From d54a40c2df81b79158ad94eb5f200e67f69c564f Mon Sep 17 00:00:00 2001 From: "olau@iola.dk" Date: Thu, 22 Oct 2009 22:36:05 +0000 Subject: [PATCH] Move selection support to a plugin (based on patch from andershol), move color code to separate jQuery plugin inlined in the Flot code (and hosted here for the time being), fixup some various other little things in preparation for the 0.6 release git-svn-id: https://flot.googlecode.com/svn/trunk@220 1e0a6537-2640-0410-bfb7-f154510ff394 --- API.txt | 63 +----- NEWS.txt | 35 +-- examples/basic.html | 26 ++- examples/dual-axis.html | 3 +- examples/index.html | 16 +- examples/interacting.html | 1 - examples/selection.html | 13 +- examples/visitors.html | 1 + examples/zooming.html | 1 + jquery.flot.crosshair.js | 20 +- jquery.flot.js | 443 +++++--------------------------------- jquery.flot.selection.js | 299 +++++++++++++++++++++++++ 12 files changed, 422 insertions(+), 499 deletions(-) create mode 100644 jquery.flot.selection.js diff --git a/API.txt b/API.txt index 0932b72..bd0c663 100644 --- a/API.txt +++ b/API.txt @@ -665,39 +665,6 @@ can set "hoverable" and "clickable" to false in the options for that series, like this { data: [...], label: "Foo", clickable: false }. -Customizing the selection -========================= - - selection: { - mode: null or "x" or "y" or "xy", - color: color - } - -You enable selection support by setting the mode to one of "x", "y" or -"xy". In "x" mode, the user will only be able to specify the x range, -similarly for "y" mode. For "xy", the selection becomes a rectangle -where both ranges can be specified. "color" is color of the selection. - -When selection support is enabled, a "plotselected" event will be emitted -on the DOM element you passed into the plot function. The event -handler gets one extra parameter with the ranges selected on the axes, -like this: - - placeholder.bind("plotselected", function(event, ranges) { - alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to) - // similar for yaxis, secondary axes are in x2axis - // and y2axis if present - }); - -The "plotselected" event is only fired when the user has finished -making the selection. A "plotselecting" event is fired during the -process with the same parameters as the "plotselected" event, in case -you want to know what's happening while it's happening, - -A "plotunselected" event with no arguments is emitted when the user -clicks the mouse to remove the selection. - - Specifying gradients ==================== @@ -739,34 +706,6 @@ Plot Methods The Plot object returned from the plot function has some methods you can call: - - setSelection(ranges, preventEvent) - - Set the selection rectangle. The passed in ranges is on the same - form as returned in the "plotselected" event. If the selection - mode is "x", you should put in either an xaxis (or x2axis) object, - if the mode is "y" you need to put in an yaxis (or y2axis) object - and both xaxis/x2axis and yaxis/y2axis if the selection mode is - "xy", like this: - - setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } }); - - setSelection will trigger the "plotselected" event when called. If - you don't want that to happen, e.g. if you're inside a - "plotselected" handler, pass true as the second parameter. - - - - clearSelection(preventEvent) - - Clear the selection rectangle. Pass in true to avoid getting a - "plotunselected" event. - - - getSelection() - - Returns the current selection in the same format as the - "plotselected" event. If there's currently no selection, it - returns null. - - - highlight(series, datapoint) Highlight a specific datapoint in the data series. You can either @@ -815,7 +754,7 @@ can call: - triggerRedrawOverlay() Schedules an update of an overlay canvas used for drawing - interactive things like the selection and point highlights. This + interactive things like a selection and point highlights. This is mostly useful for writing plugins. The redraw doesn't happen immediately, instead a timer is set to catch multiple successive redraws (e.g. from a mousemove). diff --git a/NEWS.txt b/NEWS.txt index bd95833..53281c5 100644 --- a/NEWS.txt +++ b/NEWS.txt @@ -1,26 +1,32 @@ -Flot 0.x +Flot 0.6 -------- API changes: -1. In the global options specified in the $.plot command, +1. Selection support has been moved to a plugin. Thus if you're +passing selection: { mode: something }, you MUST include the file +jquery.flot.selection.js after jquery.flot.js. This reduces the size +of base Flot and makes it easier to customize the selection as well as +improving code clarity. The change is based on patch from andershol. + +2. In the global options specified in the $.plot command, "lines", "points", "bars" and "shadowSize" have been moved to a sub-object called "series", i.e. $.plot(placeholder, data, { lines: { show: true }}) -becomes +should be changed to $.plot(placeholder, data, { series: { lines: { show: true }}}) All future series-specific options will go into this sub-object to -simplify plugin writing. Backward-compatibility hooks are in place, -so old code should not break. +simplify plugin writing. Backward-compatibility code is in place, so +old code should not break. -2. "plothover" no longer provides the original data point, but instead +3. "plothover" no longer provides the original data point, but instead a normalized one, since there may be no corresponding original point. -3. Due to a bug in previous versions of jQuery, you now need at least +4. Due to a bug in previous versions of jQuery, you now need at least jQuery 1.2.6. But if you can, try jQuery 1.3.2 as it got some improvements in event handling speed. @@ -85,9 +91,9 @@ Changes: offset within the placeholder. - Plugin system: register an init method in the $.flot.plugins array - to get started, see PLUGINS.txt for details on how to write plugins. - There are also some extra methods to enable access to internal - state. + to get started, see PLUGINS.txt for details on how to write plugins + (it's easy). There are also some extra methods to enable access to + internal state. - Hooks: you can register functions that are called while Flot is crunching the data and doing the plot. This can be used to modify @@ -115,7 +121,12 @@ Changes: axes and compressed time axes (like omitting weekends). - Support for twelve-hour date formatting (patch by Forrest Aldridge). - + +- The color parsing code in Flot has been cleaned up and split out so + it's now available as a separate jQuery plugin. It's included inline + in the Flot source to make dependency managing easier. This also + makes it really easy to use the color helpers in Flot plugins. + Bug fixes: - Fixed two corner-case bugs when drawing filled curves (report and @@ -130,7 +141,7 @@ Bug fixes: problem reported by Sergio Nunes). - Updated mousemove position expression to the latest from jQuery (bug reported by meyuchas). -- Use borders instead of background in legend (fix printing issue 25 +- Use CSS borders instead of background in legend (fix printing issue 25 and 45). - Explicitly convert axis min/max to numbers. - Fixed a bug with drawing marking lines with different colors diff --git a/examples/basic.html b/examples/basic.html index fde8def..88e7914 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -21,16 +21,28 @@ diff --git a/examples/dual-axis.html b/examples/dual-axis.html index 03a94e6..093505d 100644 --- a/examples/dual-axis.html +++ b/examples/dual-axis.html @@ -28,7 +28,8 @@ $(function () { $.plot($("#placeholder"), [ { data: oilprices, label: "Oil price ($)" }, { data: exchangerates, label: "USD/EUR exchange rate", yaxis: 2 }], - { xaxis: { mode: 'time' }, + { + xaxis: { mode: 'time' }, yaxis: { min: 0 }, y2axis: { tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) +"€" }}, legend: { position: 'sw' } }); diff --git a/examples/index.html b/examples/index.html index 0df5776..789f941 100644 --- a/examples/index.html +++ b/examples/index.html @@ -11,7 +11,7 @@

Flot Examples

-

Here are some examples for Flot:

+

Here are some examples for Flot, the Javascript charting library for jQuery: