JavaScript Dynamic / Live Line Charts & Graphs

Dynamic or Live charts are used for displaying data that varies with time. Using Line Chart for Real-time Graph is very common. These Charts are interactive, responsive, support animation and live updates. Given Example shows Line Chart which updates every 500 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 chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
	title: {
		text: "Live Data"
	},
	data: [{
		type: "line",
		dataPoints: dataPoints
	}]
});
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;
	chart.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

Crosshair can be enabled in the chart by creating a crosshair object. Other commonly used customization options are lineColor, lineThickness, etc.