Multi Series Line Chart from Multiple Json and animation - CanvasJS JavaScript Charts

Multi Series Line Chart from Multiple Json and animation - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme1",
            title: {
                text: "Statistics"
            },
            animationEnabled: true,
            animationDuration: 1500,
            toolTip: {
                animationEnabled: true,
                shared: true
            },
            data: []
        });

var dataSeries1, dataSeries2;
$.when(
    $.getJSON("https://api.myjson.com/bins/3ax15", function(result) {
      dataSeries1 = {
                        type: "spline",
                        showInLegend: true,
                        name: "Likes",
                        // color: "rgba(54,158,173,.6)",
                        dataPoints: result
                    }
    }),
    $.getJSON("https://api.myjson.com/bins/1krdl", function(result) {
        dataSeries2 = {
          type: "spline",
          showInLegend: true,
          name: "Dislikes",
          dataPoints: result
        }
    })
 ).then(function	()	{ //).done(function	()	{
 		chart.options.data.push(dataSeries1);
    chart.options.data.push(dataSeries2);
    chart.render();
 });