The cursor plugin also enables plot zooming functionality. Click and drag on the plot to zoom. Double click to reset.
You can disable the double click zoom reset. The cursor plugin also extends the plot object with a resetZoom() method which can be called from user code or other html element (a button for example) to reset the plot zoom.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(document).ready( function (){ var plot1 = $.jqplot( 'chart1' , [goog], { title: 'Google, Inc.' , series: [{ label: 'Google, Inc.' , neighborThreshold: -1 }], axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer }, yaxis: { tickOptions:{ prefix: '$' } } }, cursor:{ show: true , zoom: true , showTooltip: false } }); $( '.button-reset' ).click( function () { plot1.resetZoom() }); }); |
Plot zooming also works will multiple axes. The following plot uses 3 large datasets.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | $(document).ready( function (){ var plot2 = $.jqplot( 'chart2' , [InPr, OutPr, ERPM], { title: 'Plot with Zooming and 3 Y Axes' , seriesDefaults: {showMarker: false }, series:[ {}, {yaxis: 'y2axis' }, {yaxis: 'y3axis' } ], cursor: { show: true , tooltipLocation: 'sw' , zoom: true }, axesDefaults:{ // color the axes baselines the same color as the series. useSeriesColor: true , rendererOptions: { // align ticks for each axis across the grid alignTicks: true } }, axes:{ // Let the lines start at the edge of the axis. xaxis:{ pad: 0 } } }); }); |
The charts on this page depend on the following files:
< script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></ script > < script type = "text/javascript" src = "../src/jquery.jqplot.js" ></ script > < script type = "text/javascript" src = "../src/plugins/jqplot.cursor.js" ></ script > < script type = "text/javascript" src = "../src/plugins/jqplot.dateAxisRenderer.js" ></ script > < link rel = "stylesheet" type = "text/css" href = "../src/jquery.jqplot.css" /> |