jQuery Charts & Graphs with Large number of Data Points

Download jQuery Chart Samples

CanvasJS jQuery Chart plugin is built for High Performance and ease of use. It can render or update huge data-sets in a matter of milliseconds without any performance lag. The given example includes source code that you can edit in-browser or save to run locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var dataPoints = [];
var y = 1000;
var limit = 50000;

for ( var i = 0; i < limit; i++ ) {
	y += Math.round( 10 + Math.random() * (-10 -10));	
	dataPoints.push({ y: y });
}

var options = {
	animationEnabled: true,
	zoomEnabled: true,
	title:{
		text: "Performance Demo with 50,000 Data Points"
	}, 
	subtitles:[{
		text: "Try Zooming and Panning"
	}],
	data: [{
		type: "line",
		dataPoints: dataPoints
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Related Customization

Setting markerSize to zero in Line / Area chart will boost the performance of your graph, when working with huge dataSets. Some other frequently used customization options are markerType, zoomType, zoomEnabled, etc.