The plot(s) on this page use the following plugins:

<script type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>

The cursor plugin also enables plot zooming functionality. Click and drag on the plot to zoom. Double click to reset.

You can also enaable single click zoom reset, or 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.

Reset Zoom

plot = $.jqplot('chart1', [goog], { 
    title: 'Google, Inc.', 
    series: [{ 
        label: 'Google, Inc.', 
        neighborThreshold: -1 
    }], 
    axes: { 
        xaxis: { 
            renderer:$.jqplot.DateAxisRenderer, 
            min:'August 1, 2007', 
            tickInterval: '4 months', 
            tickOptions:{formatString:'%Y/%#m/%#d'} 
        }, 
        yaxis: { 
            renderer: $.jqplot.LogAxisRenderer, 
            tickOptions:{formatString:'$%.2f'} 
        } 
    }, 
    cursor:{zoom:true, showTooltip:false} 
});

Plot zooming also works will multiple axes. The following plot uses 3 large datasets. Single Click will reset the zoom on this plot.

Reset Zoom

plot1 = $.jqplot('chart2', [InPr, OutPr, ERPM], { 
    title:'Plot with Zooming and 3 Y Axes', 
    seriesDefaults: {showMarker:false}, 
    series:[
        {},
        {yaxis:'y2axis'}, 
        {yaxis:'y3axis'}
    ], 
    cursor: {tooltipLocation:'sw', zoom:true, clickReset:true}, 
    axesDefaults:{useSeriesColor: true}, 
    axes:{
        xaxis:{min:0, max:1600}, 
        yaxis:{min:0, max:600},  
        y2axis:{
            min:1000, 
            max:2000, 
            numberTicks:9, 
            tickOptions:{showGridline:false}
        }, 
        y3axis:{}
    } 
});