title: Replacing data chart.js and reloading chart [PHP/Js/AJAX]
body: <p>I'm having trouble while trying to replace data inside my <code>chart.js</code> chart.</p>
  
  <p>By now, that's how my chart is set:</p>
  
  <pre><code>    &lt;script&gt;
  
          var optionsBar = {
              responsive: true
          };
  
          var dataBar = {
              labels: [&lt;?=$mesReferencia?&gt;],
              datasets: [
                  {
                      label: "CPF's Enviados",
                      backgroundColor: "rgba(0,51,90,0.8)",
                      borderColor: "rgba(0,51,90,0.9)",
                      borderWidth: 2,
                      hoverBackgroundColor: "rgba(0,51,90,0.9)",
                      hoverBorderColor: "rgba(0,51,90,1)",
                      data: [&lt;?=$cpfsEnviados?&gt;]
                  },
                  {
                      label: "Propostas Finalizadas",
                      backgroundColor: "rgba(0,130,229,0.8)",
                      borderColor: "rgba(0,130,229,0.9)",
                      borderWidth: 2,
                      hoverBackgroundColor: "rgba(0,130,229,0.9)",
                      hoverBorderColor: "rgba(0,130,229,1)",
                      data: [&lt;?=$propostasFinalizadas?&gt;]
                  },
                  {
                      label: "Propostas Aprovadas",
                      backgroundColor: "rgba(43,139,74,0.8)",
                      borderColor: "rgba(43,139,74,0.9)",
                      borderWidth: 2,
                      hoverBackgroundColor: "rgba(43,139,74,0.9)",
                      hoverBorderColor: "rgba(43,139,74,1)",
                      data: [&lt;?=$propostasAprovadas?&gt;]
                  }
              ]
          };
  
  
          var optionsLine = {
              responsive: true
          };
  
          var dataLine = {
              labels: [&lt;?=$mesReferencia?&gt;],
              datasets: [
                  {
                      label: "Finalizadas",
                      fill: false,
                      backgroundColor: "rgba(255,108,0,0.7)",
                      borderColor: "rgba(255,108,0,1)",
                      borderWidth: 4,
                      data: [&lt;?=$propostasFinalizadas?&gt;]
                  },
                  {
                      label: "Aprovadas",
                      fill: false,
                      backgroundColor: "rgba(255,246,0,0.6)",
  
  
    borderColor: "rgba(255,246,0,1)",                    
                  borderWidth: 4,
                  data: [&lt;?=$propostasAprovadas?&gt;]
              }
          ]
      };     
  
  //======================= FUNÇÃO GERA GRÁFICOS =====================================================================
  
      function run(){
          var ctx = document.getElementById("graficoBarra").getContext("2d");
          var BarChart2 = new Chart(ctx, {
                type: 'bar',
                data: dataBar,
                options: optionsBar          
          });            
  
          var ctx2 = document.getElementById("graficoLinha").getContext("2d");
          var LineChart = new Chart(ctx2, {
                type: 'line',
                data: dataLine,
                options: optionsLine          
          });
      }
  
      window.onload = run;
  
      run();
  &lt;/script&gt;
  </code></pre>
  
  <p>See that the data used in the charts are from <code>PHP</code> vars. (Those are the values that feed my charts by default).</p>
  
  <p>Then, I have a sequence of dropdown which filter data in my <code>DB</code> and return a javascript array object named <code>data</code>:</p>
  
  <pre><code>success: function(data){
      console.log(data);          
      $("#filtro-rede").text(data[0]['rede']);
      $("#filtro-loja").text(data[0]['loja']);
      $("#filtro-mes").text(data[0]['mesReferencia']);
      $('#cpfsEnviados').text(data[0]['cpfsEnviados']);
      $("#finalizadas").text(data[0]['propostasFinalizadas']);
      $("#aprovadas").text(data[0]['propostasAprovadas']);
      $("#indiceAprovacao").text(data[0]['indiceAprovacao']+'%');
      $("#primeirasCompras").text(data[0]['primeirasCompras']);
      $("#segurosQnt").text(data[0]['seguros']);
      mascararFiltros();
      $(".mask-loading").fadeToggle(500);         
  }
  </code></pre>
  
  <p>See that someplaces in my code are fed with the data returned in this array.</p>
  
  <p>Everything is working pretty fine, but my only problem here is replacing the default <code>PHP</code> values from my chart with <code>data[0]['example']</code> array and reloading the chart without refreshing the page. Any idea/ suggestions? Thanks!</p>