CanvasJS chart using JSON - CanvasJS JavaScript Charts

CanvasJS chart using 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 chart = new CanvasJS.Chart("chartContainer", {    
  	title: {
    	text: "Chart from External JSON Data"
    },
    data: [
      {
        type: "column",
        dataPoints: []
      }
    ]
  });
  chart.render();



setInterval(function(){
  $.getJSON("https://api.myjson.com/bins/8mx9j", function(data) {
    var noOfInitialDps = 5;
    if(chart.options.data[0].dataPoints.length === 0) { // Initial Render
      for(var i = 0; i < 5; i++) { // The length of json must be atleast 5
        pushDps(chart, 0, data[i].x , data[i].y);
      }
      chart.render();
    } else { // Inserting the dataPoints after the initial render
      if(chart.options.data[0].dataPoints.length < data.length) {
        pushDps(chart, 0, data[chart.options.data[0].dataPoints.length].x , data[chart.options.data[0].dataPoints.length].y);
        chart.render();
      } 
    }
  });
}, 500);


function pushDps(chart, dsIndex, xVal, yVal) {
	chart.options.data[dsIndex].dataPoints.push({
  	x: new Date(xVal),
    y: yVal
  });
}