Multiseries chart based on ID from JSON - CanvasJS JavaScript Charts

Multiseries chart based on ID from JSON - CanvasJS JavaScript Charts

HTML

<script src="http://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 msi;
var dps = [];
var dataSeries = [];
var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "MultiSeries Chart from JSON"
  },
  zoomEnabled: true,
  toolTip: {
    animationEnabled: true,
    shared: true
  },
  axisX: {
    intervalType: "day",
    valueFormatString: "DD-MM-YY",
    labelAngle: -50
  },
  data: dataSeries
});

$.when(
  $.getJSON("https://api.myjson.com/bins/jgyen", function(data) {
    $.each(data, function(i) {
      $.each(data[i], function(key, val) {
        msi = key;
        dps.push({
          x: new Date(i),
          y: val
        });
      });
      dataSeries.push({
        name: msi,
        type: "line",
        dataPoints: dps
      });
    });
  })
).then(function() {
  chart.render();
});