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.

Google, Inc.
1-Aug-2007
1-Dec-2007
1-Apr-2008
1-Aug-2008
1-Dec-2008
1-Apr-2009
1-Aug-2009
$200
$300
$400
$500
$600
$700
$800

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.

Plot with Zooming and 3 Y Axes
0
500
1000
1500
2000
2500
3000
0
100
200
300
400
500
1000
1200
1400
1600
1800
2000
-1000
0
1000
2000
3000
4000

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" />