ChartJS - Animation using ChartJS

Using Animation in ChartJS :

1) Create a .html file and add the below code :


<!DOCTYPE>
<html>
<head>
    <script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
</head>
<body>
  <canvas id="myChart" height="300" width="800"></canvas>
  <script>
	var ctx = document.getElementById("myChart").getContext("2d");
	var data = {
	  labels: ["January", "February", "March", "April", "May", "June", "July"],
	  datasets: [
		{
		  label: "Dataset 1",
		  fillColor: "rgba(220,220,220,0.2)",
		  strokeColor: "rgba(220,220,220,1)",
		  pointColor: "rgba(220,220,220,1)",
		  pointStrokeColor: "#fff",
		  pointHighlightFill: "#fff",
		  pointHighlightStroke: "rgba(220,220,220,1)",
		  data: [90, 0, 40, 81, 70, 85, 40]
		},

		{
		  label: "Dataset 2",
		  fillColor: "rgba(151,187,205,0.2)",
		  strokeColor: "rgba(151,187,205,1)",
		  pointColor: "rgba(151,187,205,1)",
		  pointStrokeColor: "#fff",
		  pointHighlightFill: "#fff",
		  pointHighlightStroke: "rgba(151,187,205,1)",
		  data: [0, 0, 0, 0, 0, 0, 0]
		}
	  ]
	};

	var data2 = [34, 48, 30, 19, 34, 58, 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;
		}
	  }
	});
  </script>
</body>
</html>
2) Run the .html file from browser


3) Browser Output :