Reply To: How to update chart data every second

[Anjali]

elvinas,

For every update you shouldn’t recreate the chart. Instead you should create chart only once and later updated only its values as shown below:

var chart = new CanvasJS.Chart("chartContainer", {
	data: [
		{
			dataPoints: null
		}
	]
});

and don’t render the chart here. Inside getJSON access the chart’s options and assign the result’s data to dataPoints and render the chart. Below is the code snippet:

$.getJSON("data.php", function (result) {
	
	chart.options.data[0].dataPoints = result;
	chart.render();	
});

and update the dataPoint’s data at a given interval.

var updateChart = function() {
            
	$.getJSON("chart.php", function (result) {
	
		chart.options.data[0].dataPoints = result;
		chart.render();	
	
	});   
}            
setInterval(function(){updateChart()},1000);

Also, you can checkout this example which updates chart data every 1500 milliseconds.

__
Anjali
Team CanvasJS