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>
<script type="text/javascript" src="../plugins/jqplot.ohlcRenderer.min.js"></script>

ZoomProxy is a jqPlot feature that enable "remote control" zooming. One chart acts as an overview chart while another displays the zoomed in data.

A zoomProxy is set up by creating two charts with the same data and initial axis ranges. Make sure the "zoom" cursor option is set to true for both charts. After both charts are set up, call the $.jqplot.zoomProxy function to set up one plot as a "zoom controller" for the other. The syntax is: $.jqplot.Cursor.zoomProxy(targetPlot, controllerPlot).

Reset Zoom

targetPlot1 = $.jqplot('chart1', [InPr, OutPr, ERPM], {
  seriesDefaults:{showMarker: false},
  series:[
    {},
    {yaxis:'y2axis'},
    {yaxis:'y3axis'}
  ],
  cursor:{
    zoom: true,
    showTooltip:false
  },
  axesDefaults:{tickOptions:{formatString:"%d"}, autoscale:false, useSeriesColor:true}
    
}); 

controllerPlot1 = $.jqplot('chart2', [InPr, OutPr, ERPM], {
  seriesDefaults:{showMarker: false},
  series:[
    {label:'P In'},
    {label:'P Out', yaxis:'y2axis'},
    {label:'RPM', yaxis:'y3axis'}
  ],
  cursor:{
    zoom:true,
    showTooltip: false
  },
  axesDefaults:{
    tickOptions:{
      showLabel:false, 
      showMark:false
    }
  }
});

$.jqplot.Cursor.zoomProxy(targetPlot1, controllerPlot1);  

The following chart also has a zoom proxy. Additionally, zooming is constrained to the x axis through the "constrainZoomTo" cursor option on the controller plot. Notice that the controller plot and the target plot use different line renderers even though they use the same data.

targetPlot2 = $.jqplot('chart3', [aapl], {
  series:[
    {label:'Apple, Inc.', renderer:$.jqplot.OHLCRenderer}
  ],
  title:'Apple, Inc.',
  legend:{show:true, location:'nw'},
  cursor:{
    zoom: true,
    showTooltip:false
  },
  axes:{
    xaxis: { 
      renderer:$.jqplot.DateAxisRenderer, 
      tickOptions:{formatString:'%Y/%#m/%#d'} 
    }, 
    yaxis: { 
      renderer: $.jqplot.LogAxisRenderer, 
      tickOptions:{formatString:'$%.2f'} 
    } 
  } 
}); 

controllerPlot2 = $.jqplot('chart4', [aapl], {
  seriesDefaults:{neighborThreshold:0, showMarker: false},
  cursor:{
    zoom: true,
    showTooltip: false,
    constrainZoomTo:'x'
  },
  axes:{
    xaxis: { 
      renderer:$.jqplot.DateAxisRenderer,
      tickOptions:{formatString:'%Y/%#m/%#d'}
    }, 
    yaxis: { 
      renderer: $.jqplot.LogAxisRenderer, 
      tickOptions:{formatString:'$%.2f'} 
    } 
  }
});

$.jqplot.Cursor.zoomProxy(targetPlot2, controllerPlot2);