Multiseries Chart from Single External JSON file - CanvasJS JavaScript Charts

Multiseries Chart from Single External JSON file - 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 dps1 = [], dps2 = [];
var chart = new CanvasJS.Chart("chartContainer", {            
  title: {
    text: "MultiSeries Chart from JSON"
  },
  animationEnabled: true,
  toolTip: {    
    shared: true
  },
  data: [
    {
			type: "spline",
      dataPoints: dps1
    },
    {
			type: "spline",
      dataPoints: dps2
    }
  ]
});
        
$.when(
    $.getJSON("https://api.npoint.io/bad5c5a9b3669e0ff3ee", function(data) {    		
    		for(var i = 0; i < data.length; i++) {
        		dps1.push({ label: data[i].label, y: data[i].y1 });
            dps2.push({ label: data[i].label, y: data[i].y2 });            
          }
      })
    ).then(function() {
    chart.render();
 });