Q:

ChartJS, add new dataset

I'm wondering how to display my 3 curves as follow : firstly the first one, after 5000 interval, add the second, and after 5000 again, add the third dataset.
The folowing code update one of the points in the second dataset, but what I want is to add a full dataset.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://www.chartjs.org/assets/Chart.min.js"></script>
</head>
<body>
  <canvas id="updating-chart" width="500" height="300"></canvas>
 <script>
 var canvas = document.getElementById('updating-chart'),
    ctx = canvas.getContext('2d'),
    startingData = {
      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      datasets: [

          {    //first dataset
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              data: [69.23077, 78.18182, 66.66667, 65.45455, 38.18182, 40.35088, 45.61404, 36.53846, 43.28358, 54.54545, 31.25000, 44.73684]
          }
          ,
           {  // Second dataset
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              data: [25.00000, 12.72727, 22.22222, 18.18182, 54.54545, 40.35088, 45.61404, 42.30769, 31.34328, 21.81818, 34.37500, 36.84211]
          },
          {   // third dataset
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              data: [1.923077, 3.636364, 4.444444, 5.454545, 0.000000, 5.263158, 3.508772, 9.615385, 16.417910, 18.181818, 34.375000, 15.789474]
          }

      ]
    };

// Reduce the animation steps for demo clarity.
var myLiveChart = new Chart(ctx).Line(startingData, {animationSteps: 15});

setInterval(function(){

  // Update one of the points in the second dataset
  myLiveChart.datasets[1].points[1].value =  Math.random();

  myLiveChart.update();
}, 5000);

 </script>
</body>
</html>

How to do this ?

A:

First set every array except the first one to blank. Then use onAnimationComplete to progressively load them back. 
Adapted from https://stackoverflow.com/a/36010562/360067
...

var dataArrays = [];
for (var i = 1; i < data.datasets.length; i++) {
    dataArrays.push(data.datasets[i].data);
    data.datasets[i].data = data.datasets[i].data.map(function() {
        return 0
    });
}    

var myLineChart = new Chart(ctx).Line(data, {
  animationEasing: 'linear',
  onAnimationComplete: function () {
    if (dataArrays.length !== 0) {
      var index = myLineChart.datasets.length - dataArrays.length;
      myLineChart.datasets[index].points.forEach(function (point, i) {
        point.value = dataArrays[0][i];
      });
      myLineChart.update();
      dataArrays.shift();
    }
  }
});

Fiddle - http://jsfiddle.net/ngf79suk/

