Multiseries chart based on Key (Label) from JSON - CanvasJS JavaScript Charts

Multiseries chart based on Key (Label) 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 uniqueLabels = {};
var distinct = [];

var chart = new CanvasJS.Chart("chartContainer", {            
  title: {
    text: "MultiSeries Chart from JSON"
  },
  zoomEnabled: true, 
  toolTip: {
    shared: true
  },
  data: dataSeries
});

$.when(
  $.getJSON("https://api.myjson.com/bins/k2rm5", function(result) {
    for( var i in result ){
      //Find all distinct labels in JSON
      if( typeof(uniqueLabels[result[i].label]) == "undefined"){
        distinct.push(result[i].label);          
        dataSeries.push({name: result[i].label, type: "line", dataPoints: []})
      }
      uniqueLabels[result[i].label] = 0;
    }
    
    for( var i in result){      
      for(var j in dataSeries){
        //push dataPoints to corresponding dataSeries based on label from JSON
        if(dataSeries[j].name === result[i].label) {
          dataSeries[j].dataPoints.push({x: result[i].id, y: parseInt(result[i].allThreads) })
        }
      }
    }
  })
).then(function() {
  chart.render();
});