jQuery Dynamic / Live Charts & Graphs

Download jQuery Code Samples

Dynamic charts are also known as Live or Real-Time chart and are useful while displaying data that changes with time. The given example shows a dynamic Line chart where the data updates every one and half seconds. It also includes HTML / jQuery source code that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function() {

var dataPoints = [];

var options = {
	theme: "light2",
	title: {
		text: "Live Data"
	},
	data: [{
		type: "line",
		dataPoints: dataPoints
	}]
};
$("#chartContainer").CanvasJSChart(options);
updateData();

// Initial Values
var xValue = 0;
var yValue = 10;
var newDataCount = 6;

function addData(data) {
	if(newDataCount != 1) {
		$.each(data, function(key, value) {
			dataPoints.push({x: value[0], y: parseInt(value[1])});
			xValue++;
			yValue = parseInt(value[1]);
		});
	} else {
		//dataPoints.shift();
		dataPoints.push({x: data[0][0], y: parseInt(data[0][1])});
		xValue++;
		yValue = parseInt(data[0][1]);
	}
  
	newDataCount = 1;
  
	$("#chartContainer").CanvasJSChart().render()
	setTimeout(updateData, 1500);	
}

function updateData() {
	$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart="+xValue+"&ystart="+yValue+"&length="+newDataCount+"&type=json", addData);
}

}

Related Customization

The size of the marker can be customized using markerSize property. You can also modify thickness of the line by using the thickness property. Other frequently used customizations are changing the label, markerType, lineColor etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial