From 1bb11ad9ce9c3e69636727550e098f8fdceeb1b5 Mon Sep 17 00:00:00 2001 From: "olau@iola.dk" Date: Thu, 25 Feb 2010 14:52:59 +0000 Subject: [PATCH] Added support for redrawing the plot while panning for the navigate plugin, idea from lasthemy (issue 235). git-svn-id: https://flot.googlecode.com/svn/trunk@232 1e0a6537-2640-0410-bfb7-f154510ff394 --- NEWS.txt | 3 ++ jquery.flot.navigate.js | 85 +++++++++++++++++++++++++++++------------ 2 files changed, 64 insertions(+), 24 deletions(-) diff --git a/NEWS.txt b/NEWS.txt index 082ad3f..dd96bf1 100644 --- a/NEWS.txt +++ b/NEWS.txt @@ -13,6 +13,9 @@ Changes: - More predictable handling of gaps for the stacking plugin, now all undefined ranges are skipped. - Stacking plugin can stack horizontal bar charts. +- Navigate plugin now redraws the plot while panning instead of only + after the fact (can be disabled by setting the pan.frameRate option + to null). Issue 235. Bug fixes: diff --git a/jquery.flot.navigate.js b/jquery.flot.navigate.js index e6f8834..7dfd7ae 100644 --- a/jquery.flot.navigate.js +++ b/jquery.flot.navigate.js @@ -7,20 +7,6 @@ plot.zoomOut() and plot.pan(offset) so you easily can add custom controls. It also fires a "plotpan" and "plotzoom" event when something happens, useful for synchronizing plots. -Example usage: - - plot = $.plot(...); - - // zoom default amount in on the pixel (100, 200) - plot.zoom({ center: { left: 10, top: 20 } }); - - // zoom out again - plot.zoomOut({ center: { left: 10, top: 20 } }); - - // pan 100 pixels to the left and 20 down - plot.pan({ left: -100, top: 20 }) - - Options: zoom: { @@ -31,6 +17,7 @@ Options: pan: { interactive: false + frameRate: 20 } xaxis, yaxis, x2axis, y2axis: { @@ -38,18 +25,52 @@ Options: panRange: null // or [number, number] (min, max) } -"interactive" enables the built-in drag/click behaviour. "amount" is -the amount to zoom the viewport relative to the current range, so 1 is -100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). +"interactive" enables the built-in drag/click behaviour. If you enable +interactive for pan, then you'll have a basic plot that supports +moving around; the same for zoom. + +"amount" specifies the default amount to zoom in (so 1.5 = 150%) +relative to the current viewport. + +"frameRate" specifies the maximum number of times per second the plot +will update itself while the user is panning around on it (set to null +to disable intermediate pans, the plot will then not update until the +mouse button is released). "zoomRange" is the interval in which zooming can happen, e.g. with zoomRange: [1, 100] the zoom will never scale the axis so that the difference between min and max is smaller than 1 or larger than 100. -You can set either of them to null to ignore. +You can set either end to null to ignore, e.g. [1, null]. "panRange" confines the panning to stay within a range, e.g. with panRange: [-10, 20] panning stops at -10 in one end and at 20 in the -other. Either can be null. +other. Either can be null, e.g. [-10, null]. + +Example API usage: + + plot = $.plot(...); + + // zoom default amount in on the pixel (10, 20) + plot.zoom({ center: { left: 10, top: 20 } }); + + // zoom out again + plot.zoomOut({ center: { left: 10, top: 20 } }); + + // zoom 200% in on the pixel (10, 20) + plot.zoom({ amount: 2, center: { left: 10, top: 20 } }); + + // pan 100 pixels to the left and 20 down + plot.pan({ left: -100, top: 20 }) + +Here, "center" specifies where the center of the zooming should +happen. Note that this is defined in pixel space, not the space of the +data points (you can use the c2p helpers on the axes in Flot to help +you convert between these). + +"amount" is the amount to zoom the viewport relative to the current +range, so 1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is +70% (zoom out). You can set the default in the options. + */ @@ -92,7 +113,8 @@ Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-L amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out) }, pan: { - interactive: false + interactive: false, + frameRate: 20 } }; @@ -118,7 +140,8 @@ Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-L }); } if (o.pan.interactive) { - var prevCursor = 'default', pageX = 0, pageY = 0; + var prevCursor = 'default', pageX = 0, pageY = 0, + panTimeout = null; eventHolder.bind("dragstart", { distance: 10 }, function (e) { if (e.which != 1) // only accept left-click @@ -129,10 +152,24 @@ Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-L pageY = e.pageY; }); eventHolder.bind("drag", function (e) { - // unused at the moment, but we need it here to - // trigger the dragstart/dragend events + if (panTimeout || !o.pan.frameRate) + return; + + panTimeout = setTimeout(function () { + plot.pan({ left: pageX - e.pageX, + top: pageY - e.pageY }); + pageX = e.pageX; + pageY = e.pageY; + + panTimeout = null; + }, 1/o.pan.frameRate * 1000); }); eventHolder.bind("dragend", function (e) { + if (panTimeout) { + clearTimeout(panTimeout); + panTimeout = null; + } + eventHolder.css('cursor', prevCursor); plot.pan({ left: pageX - e.pageX, top: pageY - e.pageY }); @@ -267,6 +304,6 @@ Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-L init: init, options: options, name: 'navigate', - version: '1.1' + version: '1.2' }); })(jQuery);