jQuery Charts & Graphs with Zoom & Pan

Download jQuery Chart Samples

All jQuery Charts with axis support Zooming & Panning. It can be very useful while plotting graphs with large data sets. Zooming / Panning is supported along both X & Y axes. Given example demonstrates a jQuery Line Chart with Zoom / Pan feature. It also 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 limit = 10000;    //increase number of dataPoints by increasing the limit
var y = 100;    
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
	y += Math.round(Math.random() * 10 - 5);
	dataPoints.push({
		x: i,
		y: y
	});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);

//Better to construct options first and then pass it as a parameter
var options = {
	zoomEnabled: true,
	animationEnabled: true,
	title: {
		text: "Try Zooming - Panning"
	},
	data: data  // random data
};

$("#chartContainer").CanvasJSChart(options);

}

Chart Customizations

You can enable and disable zooming and panning feature in chart using zoomEnabled property. zoomType allows you to zoom along X, Y or both axes. Some other customization options include lineColor, markerSize, etc.

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