jQuery Dynamic / Live Line Charts & Graphs

Download jQuery Code Samples

Dynamic or Live charts are used for displaying data that varies with time. Use of Line Chart to display Real-time Graph is very common. Given Example shows Line Chart which updates every 1500 milliseconds. It also contains 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 Chart from JSON Data"
	},
	data: [{
		type: "spline",
		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]);
		});
		newDataCount = 1;
	} else {
		//dataPoints.shift();
		dataPoints.push({ x: data[0][0], y: parseInt(data[0][1]) });
		xValue++;
		yValue = parseInt(data[0][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

lineThickness & lineColor properties can be used to customize the line. Other commonly used customization options are animationEnabled, animationDuration, zoomEnabled, etc.

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