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: 800px; width: 100%;"></div>

JavaScript

var date;
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",
    interval: 1,
    valueFormatString: "DD-MM-YY",
    labelAngle: -50
  },
  legend: {
    cursor: "pointer",
    verticalAlign: "top",
    horizontalAlign: "top",
    fontSize: 16,
    fontFamily: "calibri",
    fontColor: "dimGrey",
    itemclick: toggleDataSeries
  },
  data: dataSeries
});

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

function toggleDataSeries(e) {
  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
  } else {
    e.dataSeries.visible = true;
  }
  chart.render();
}