Home forums Using CanvasJS How to update chart data every second Reply To: How to update chart data every second

#8295

Anjali
Participant

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);

__
Anjali