jQuery Dynamic / Live Column Charts & Graphs

Download jQuery Chart Samples

jQuery Column Chart, like any other chart in CanvasJS, supports updating data dynamically in real-time. Given example shows a Real-Time Column Chart and also includes source code that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function () {

var options = {
	title: {
		text: "Number of Active Users in Website"
	},
	axisY: {
		includeZero: true
	},
	data: [{
		type: "column",
		yValueFormatString: "#,###",
		indexLabel: "{y}",
      	color: "#546BC1",
		dataPoints: [
			{ label: "Home", y: 196 },
			{ label: "Gallery", y: 263 },
			{ label: "Dashboards", y: 134 },
			{ label: "Docs", y: 216 },
			{ label: "Support", y: 174 },
			{ label: "Blog", y: 122 },
			{ label: "Others", y: 182 }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

function updateChart() {
	var performance, deltaY, yVal;
	var dps = options.data[0].dataPoints;
	for (var i = 0; i < dps.length; i++) {
		deltaY = Math.round(2 + Math.random() * (-2 - 2));
		yVal = deltaY + dps[i].y > 0 ? dps[i].y + deltaY : 0;
		dps[i].y = yVal;
	}
	options.data[0].dataPoints = dps;
	$("#chartContainer").CanvasJSChart().render();
};
updateChart();

setInterval(function () { updateChart() }, 500);

}

Chart Customizations

The color and fillOpacity properties are used to change the color and opacity of the columns . Other frequently used customization options are indexLabel, dataPointWidth etc.

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