title: ChartJs chart won't update new values
body: <p>first and foremost, sorry about the broken english.</p>
  
  <p>I'm using ChartJS to generate charts for a while, but today I stumbled in a problem that I can't seem to find an answer.
  I'm using a function to add data dynamically to my chart, then update it.
  It's working when I need to just add another dataset, but when I try to edit an existing dataset, I can get the values (seems like correctly) to the chart dataset, however, the chart won't show the new values, even after a update().</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div class="row"&gt;
      &lt;img id="loading1" class="loading" src="resources/img/loading2.gif" hidden&gt;
      &lt;div id="chart1-wrapper" class="chart-wrapper"&gt;
        &lt;canvas id="chart1"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
      var ctx = document.id("chart1").getContext("2d");
      var chart1 = create_chart("chart title", "label text", "bar"); //Custom code that just create an empty chart;
    &lt;/script&gt;
  </code></pre>
  
  <p>Function that creates the chart:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function create_chart(title, label_prefix, type) {
    var data = {
      labels: [],
      datasets: []
    };
    var options = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      legend: {
        display: true
      },
      title: {
        display: true,
        text: title
      },
      tooltips: {
        intersect: false,
        mode: 'x',
        callbacks: {
          title: function() {}
        }
      },
      maintainAspectRatio: false,
      onClick: handleClick
    };
    var chart = new Chart(ctx, {
      type: type,
      data: data,
      options: options
    });
    return chart;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my Update script:</p>
  
  <pre><code>function updateChart1(data, sigla){
              var dtsts;
              if(data != null){
                  if(chart1.data.datasets.length == 0){
                      dtsts = [];
                      jQuery.each(JSON.parse(data), function(index, val){
                          var media = (val.soma_duracao/val.count_prot)/3600;
                          var dt_item = {
                              label: getMes(val.mes),
                              data: [media],
                              backgroundColor: [(pallete[0].rgba)],
                              borderColor: [(pallete[0].rgba.replace('0.7', '1'))],
                              borderWidth: 2
                          }
                          dtsts.push(dt_item);                        
                      });
                      console.log(dtsts);
                      chart1.data.labels = ['hours'];
                      chart1.options.title.text = "foo bar";
                      chart1.options.title.display = true;
                      chart1.options.legend = true;
                      chart1.options.tooltips.callbacks.label = function(tooltipItems, data) {
                          return tooltipItems.yLabel.toFixed(2) + " hours";
                      }                           
                  } else {
                      dtsts = chart1.data.datasets;                               
                      jQuery.each(JSON.parse(data), function(index, val){
                          var media = (val.soma_duracao/val.count_prot)/3600;
                          dtsts[index].data.push(media);
                          dtsts[index].backgroundColor.push(pallete[1].rgba);
                          dtsts[index].borderColor.push(pallete[1].rgba.replace('0.7', '1'));
                      });
                      console.log(dtsts);
                  }
                  chart1.data.datasets = dtsts;                   
              }
              chart1.update();
          }
  </code></pre>
  
  <p>Running the script the first time I get this:</p>
  
  <pre><code>data:Array(1)
  0:83.83071111111111
  length:1
  pop:ƒ ()
  push:ƒ ()
  shift:ƒ ()
  splice:ƒ ()
  unshift:ƒ ()
  _chartjs: {listeners: Array(1)}
  __proto__: Array(0)
  </code></pre>
  
  <p>Running it again updates my data:</p>
  
  <pre><code>data:Array(2)
  0:83.83071111111111
  1:13.746988158477201
  length:2
  pop:ƒ ()
  push:ƒ ()
  shift:ƒ ()
  splice:ƒ ()
  unshift:ƒ ()
  _chartjs:{listeners: Array(1)}
  __proto__:Array(0)
  </code></pre>
  
  <p>This is the correct value for my data, however, the chart simply won't update to show the values.</p>
  
  <p>I'm not sure if it is some stupid mistake, but I'm just lost at this point.
  If anyone can shed a light, would be great.
  Thanks!</p>
  
  <p>(PS: if you guys need any more info, please let me know)</p>
  
  <p><strong>Edit</strong>
  Just to clarify, I need both datas in the same dataset after the update, 2 bars of data.</p>