jQuery Dynamic / Live Charts & Graphs

Download jQuery Chart Samples

jQuery Dynamic charts are also known as Live or Real-Time chart & are useful while displaying data that changes with time. Below example shows a jQuery Dynamic Line chart where data updates every 1.5 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);
}

}

Chart Customizations

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

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