Multiple Line Charts from single JSON file - CanvasJS JavaScript Charts

Multiple Line Charts from single 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="chartContainer1" style="height: 360px; width: 100%;"></div>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

JavaScript

var dps1 = [], dps2 = [], dps3 = [], dps4 = [], dps5 = [], dps6 = [];
var chart1 = new CanvasJS.Chart("chartContainer1", {
  axisY: {
    title: "Duration"
  },
  axisY2: {
    title: "Bandwidth"
  },
  legend: {
    verticalAlign: "center",
    horizontalAlign: "right"
  },
  data: [
    {
      type: "line",
      color:"blue",
      name: "RealDuration",
      showInLegend: true,
      legendMarkerType: "circle",
      dataPoints: dps2
    },
    {
      type: "line",
      name: "bandwidth",
      color:"red",
      showInLegend: true,
      legendMarkerType: "triangle",
      markerType:"triangle",
      axisYType: "secondary",
      dataPoints: dps3
    },
    {
      type: "line",
      name: "newDuration",
      color:"orange",
      showInLegend: true,
      legendMarkerType: "square",
      markerType:"square",
      dataPoints: dps1
    }
  ]
});

var chart2 = new CanvasJS.Chart("chartContainer2", {
  axisY: {
    title: "Duration"
  },
  axisY2: {
    title: "Bandwidth"
  },
  legend: {
    verticalAlign: "center",
    horizontalAlign: "right"
  },
  data: [{
    type: "line",
    color:"blue",
    name: "RealDuration",
    showInLegend: true,
    legendMarkerType: "circle",
    dataPoints: dps5
  },
         {
           type: "line",
           name: "bandwidth",
           color:"red",
           showInLegend: true,
           legendMarkerType: "triangle",
           markerType:"triangle",
           axisYType: "secondary",
           dataPoints: dps6
         },
         {
           type: "line",
           name: "newDuration",
           color:"orange",
           showInLegend: true,
           legendMarkerType: "square",
           markerType:"square",
           dataPoints: dps4
         }
        ]
});

$.get("https://api.myjson.com/bins/vjebw", function(data) {
  for (var i = 0; i < data.viewers.length; i++) {
    if (data.viewers[i].id === 1) {
      for (var j = 0; j < data.viewers[i].datapoints.length; j++) {
        dps1.push({
         ...