Candlestick from JSON data - CanvasJS JavaScript Charts

Candlestick from JSON data - 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 dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer",{
        title:{
         	 text:"Candlestick using JSON data"
        },
        axisY: {
        	  includeZero: false
        },
        data: [{
            type: "candlestick",
            dataPoints : dataPoints,
        }]
});

$.getJSON("https://api.myjson.com/bins/6u80h", function(data) {  
		 for (var i = 0; i < 10; i++) {   
        dataPoints.push({
            x: data[i].x,
            y: [data[i].y[0], data[i].y[1], data[i].y[2], data[i].y[3]]
        });
		}
    
		chart.render();
		updateChart();
});
	
function updateChart() {
		var dpsLength = dataPoints.length + 1;		
    $.getJSON("https://api.myjson.com/bins/6u80h", function(data) {    	
    	dataPoints = [];
      if( dpsLength < data.length) {
            for (var i = 0; i < dpsLength; i++) {   
                dataPoints.push({
                    x: data[i].x,
                    y: [data[i].y[0], data[i].y[1], data[i].y[2], data[i].y[3]]
                });
            }
            chart.options.data[0].dataPoints = dataPoints;
            chart.render();        
            setTimeout(function(){updateChart()}, 1000);
      }
    });
 }