Multiple Dynamic / Live Charts in a Page with Data from External JSON | CanvasJS JavaScript Charts

Multiple Dynamic / Live Charts in a Page with Data from External 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="chartContainer1" style="height: 300px; width: 50%; float: left;"></div>
<div id="chartContainer2" style="height: 300px; width: 50%; float: left;"></div>
<div id="chartContainer3" style="height: 300px; width: 100%; float: left;"></div>

JavaScript

var dps1 = [], dps2 = [], dps3 = [];
var chart1 = new CanvasJS.Chart("chartContainer1", {
  title: {
    text: "Dynamic Chart 1"
  },
  data: [
    {
      type: "line",
      dataPoints: dps1
    }					
  ]
});
chart1.render();

var chart2 = new CanvasJS.Chart("chartContainer2", {
  title: {
    text: "Dynamic Chart 2"
  },
  data: [
    {
      type: "splineArea",
      dataPoints: dps2
    }					
  ]
});
chart2.render();

var chart3 = new CanvasJS.Chart("chartContainer3", {
  title: {
    text: "Dynamic Chart 3"
  },
  data: [
    {
      type: "column",
      dataPoints: dps3
    }					
  ]
});
chart3.render();

var i = 0, j = 0, k = 0;
function updateChart() {
  $.getJSON("https://api.myjson.com/bins/1fvhd0", function(data) {
    if( i < data.length ){
      dps1.push({ x: parseInt(data[i].x), y: parseInt(data[i].y) });
      i++;
      chart1.render();
    }    
  });
  $.getJSON("https://api.myjson.com/bins/13fitg", function(data) {
    if( j < data.length ){
      dps2.push({ x: parseInt(data[j].x), y: parseInt(data[j].y) });
      j++;
      chart2.render();
    }    
  });
  $.getJSON("https://api.myjson.com/bins/j8xes", function(data) {
    if( k < data.length ){
      dps3.push({ x: parseInt(data[k].x), y: parseInt(data[k].y) });
      k++;
      chart3.render();    
    }    
  });
}

setInterval(function(){updateChart()}, 1000);