Animate datasets separately

Question

I'm trying to display two datasets in a line graph but animating the second dataset some seconds after the first one.

I'm using the CHART.JS version 2.6.0 and I saw a lot of samples using previous versions (1.xx), but all of them does not function in this new version cause API had changed.

I tried the documentation (see here) but it is really very poor to newbies, since the ANIMATION event doc has only a single basic sample.

WHat I want to do is basically this:

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
      label: "My First dataset",
      fillColor: "rgba(220,220,220,0.2)",
      data: [65, 0, 80, 81, 56, 85, 40]
    },
    {
      label: "My Second dataset",
      fillColor: "rgba(151,187,205,0.2)",
      data: [0, 0, 0, 0, 0, 0, 0]
    }
  ]
};

var data2 = [28, 48, 40, 19, 86, 27, 90];

var done = false;
var myLineChart = new Chart(ctx).Line(data, {
  animationEasing: 'linear',
  onAnimationComplete: function () {
    if (!done) {
      myLineChart.datasets[1].points.forEach(function (point, i) {
        point.value = data2[i];
      });
      myLineChart.update();
      done = true;
    }
  }
});

You can see this code functioning here, but this sample does not function in version 2.6, even if adapting it to the new syntax.

So, can you help me to achieve the same effect using the Chart.JS 2.6?

Thanks in advance!

Answer 1

SOLUTION for ChartJS v2.6

var done = false;
var data2 = [28, 48, 40, 19, 86, 27, 90];

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
         label: "My First dataset",
         backgroundColor: "rgba(220,220,220,0.2)",
         borderColor: "rgba(220,220,220,1)",
         pointBackgroundColor: "rgba(220,220,220,1)",
         pointBorderColor: "#fff",
         pointHoverBackgroundColor: "#fff",
         pointHoverBorderColor: "rgba(220,220,220,1)",
         data: [65, 0, 80, 81, 56, 85, 40]
      }, {
         label: "My Second dataset",
         backgroundColor: "rgba(151,187,205,0.2)",
         borderColor: "rgba(151,187,205,1)",
         pointBackgroundColor: "rgba(151,187,205,1)",
         pointBorderColor: "#fff",
         pointHoverBackgroundColor: "#fff",
         pointHoverBorderColor: "rgba(151,187,205,1)",
         data: [0, 0, 0, 0, 0, 0, 0]
      }]
   },
   options: {
      animation: {
         easing: 'linear',
         onComplete: function(e, i) {
            if (!done) {
               this.data.datasets[1].data = data2;
               /* we need to update chart within setTimeout,
               	as there seems to be an issue when updating the chart 
               	at first animation onComplete function call */
               setTimeout(function() {
                  this.update();
               }.bind(this), 100);
               done = true;
            }
         }
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" height="300" width="800"></canvas>