Click and drag on the bottom plot to zoom on the top plot. Double click inside the bottom plot or click the "reset" button to reset 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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | $(document).ready( function (){ // InPr, OutPr and ERPM are defined separately. They are large datasets. targetPlot = $.jqplot( 'chart1' , [InPr, OutPr, ERPM], { seriesDefaults:{ showMarker: false }, series:[ {label: 'P In' }, {label: 'P Out' , yaxis: 'y2axis' }, {label: 'RPM' , yaxis: 'y3axis' }, ], cursor:{ show: true , zoom: true , showTooltip: false }, legend:{ location: 'nw' , xoffset: 270, yoffset: 100 }, axesDefaults: { useSeriesColor: true , rendererOptions: { alignTicks: true } } }); controllerPlot = $.jqplot( 'chart2' , [InPr, OutPr, ERPM], { seriesDefaults:{ showMarker: false }, series:[ {label: 'P In' }, {label: 'P Out' , yaxis: 'y2axis' }, {label: 'RPM' , yaxis: 'y3axis' }, ], cursor:{ show: true , showTooltip: false , zoom: true , constrainZoomTo: 'x' }, axesDefaults: { useSeriesColor: true , rendererOptions: { alignTicks: true } } }); $.jqplot.Cursor.zoomProxy(targetPlot, controllerPlot); $.jqplot._noToImageButton = true ; }); |
The charts on this page depend on the following files:
< script type = "text/javascript" src = "../jquery.min.js" ></ script > < script type = "text/javascript" src = "../jquery.jqplot.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.cursor.min.js" ></ script > < link rel = "stylesheet" type = "text/css" hrf = "../jquery.jqplot.min.css" /> |