Multiseries chart from JSON - CanvasJS JavaScript Charts

Multiseries chart from JSON - 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 dataSeries = [];
var index = 0;
var chart = new CanvasJS.Chart("chartContainer", {            
  title: {
    text: "MultiSeries Chart from JSON"
  },
  toolTip: {
    animationEnabled: true,
    shared: true
  },
  data: dataSeries
});
        
$.when(
    $.getJSON("https://api.myjson.com/bins/tfcyl", function(result) {      
    		var dps1 = [], dps2 = [], dps3 = [], dps4 = [];
    		for(var i = 0; i < result.length; i++) {
        	switch(result[i].label) {
          	case 'MS01': dps1.push({ x: new Date(result[i].t), y: result[i].y });
            	break;
            case 'MS02': dps2.push({ x: new Date(result[i].t), y: result[i].y });
            	break;
            case 'MS03': dps3.push({ x: new Date(result[i].t), y: result[i].y });
            	break;
            case 'MS04': dps4.push({ x: new Date(result[i].t), y: result[i].y });
            	break;
          }
        	//console.log(result[i].label);
        }
        dataSeries.push({type: "spline", dataPoints: dps1});
        dataSeries.push({type: "spline", dataPoints: dps2});
        dataSeries.push({type: "spline", dataPoints: dps3});
        dataSeries.push({type: "spline", dataPoints: dps4});
      })
    ).then(function() {
    chart.render();
 });