From af26aaa53d073a7b2d25caee93e1cb5ceb2e099c Mon Sep 17 00:00:00 2001 From: Igor Sfiligoi Date: Fri, 23 Oct 2009 09:07:01 -0400 Subject: flot-0.6 --- API.txt | 543 +++++++++---- FAQ.txt | 10 +- LICENSE.txt | 22 + Makefile | 15 + NEWS.txt | 99 ++- PLUGINS.txt | 105 +++ README.txt | 15 +- TODO | 34 - examples/ajax.html | 143 ++++ examples/annotating.html | 75 ++ examples/arrow-down.gif | Bin 0 -> 916 bytes examples/arrow-left.gif | Bin 0 -> 891 bytes examples/arrow-right.gif | Bin 0 -> 897 bytes examples/arrow-up.gif | Bin 0 -> 916 bytes examples/data-eu-gdp-growth-1.json | 4 + examples/data-eu-gdp-growth-2.json | 4 + examples/data-eu-gdp-growth-3.json | 4 + examples/data-eu-gdp-growth-4.json | 4 + examples/data-eu-gdp-growth-5.json | 4 + examples/data-eu-gdp-growth.json | 4 + examples/data-japan-gdp-growth.json | 4 + examples/data-usa-gdp-growth.json | 4 + examples/dual-axis.html | 3 +- examples/hs-2004-27-a-large_web.jpg | Bin 0 -> 34489 bytes examples/image.html | 45 ++ examples/index.html | 29 +- examples/interacting.html | 13 +- examples/layout.css | 1 + examples/navigate.html | 118 +++ examples/selection.html | 19 +- examples/setting-options.html | 6 +- examples/stacking.html | 77 ++ examples/thresholding.html | 14 +- examples/time.html | 28 +- examples/tracking.html | 23 +- examples/turning-series.html | 4 +- examples/visitors.html | 11 +- examples/zooming.html | 15 +- excanvas.js | 823 +++++++++++++++---- excanvas.min.js | 2 +- jquery.colorhelpers.js | 174 ++++ jquery.colorhelpers.min.js | 1 + jquery.flot.crosshair.js | 156 ++++ jquery.flot.crosshair.min.js | 1 + jquery.flot.image.js | 237 ++++++ jquery.flot.image.min.js | 1 + jquery.flot.js | 1516 ++++++++++++++--------------------- jquery.flot.min.js | 1 + jquery.flot.navigate.js | 272 +++++++ jquery.flot.navigate.min.js | 1 + jquery.flot.selection.js | 299 +++++++ jquery.flot.selection.min.js | 1 + jquery.flot.stack.js | 152 ++++ jquery.flot.stack.min.js | 1 + jquery.flot.threshold.js | 103 +++ jquery.flot.threshold.min.js | 1 + jquery.min.js | 4 +- 57 files changed, 3880 insertions(+), 1365 deletions(-) create mode 100644 LICENSE.txt create mode 100644 Makefile create mode 100644 PLUGINS.txt delete mode 100644 TODO create mode 100644 examples/ajax.html create mode 100644 examples/annotating.html create mode 100644 examples/arrow-down.gif create mode 100644 examples/arrow-left.gif create mode 100644 examples/arrow-right.gif create mode 100644 examples/arrow-up.gif create mode 100644 examples/data-eu-gdp-growth-1.json create mode 100644 examples/data-eu-gdp-growth-2.json create mode 100644 examples/data-eu-gdp-growth-3.json create mode 100644 examples/data-eu-gdp-growth-4.json create mode 100644 examples/data-eu-gdp-growth-5.json create mode 100644 examples/data-eu-gdp-growth.json create mode 100644 examples/data-japan-gdp-growth.json create mode 100644 examples/data-usa-gdp-growth.json create mode 100644 examples/hs-2004-27-a-large_web.jpg create mode 100644 examples/image.html create mode 100644 examples/navigate.html create mode 100644 examples/stacking.html create mode 100644 jquery.colorhelpers.js create mode 100644 jquery.colorhelpers.min.js create mode 100644 jquery.flot.crosshair.js create mode 100644 jquery.flot.crosshair.min.js create mode 100644 jquery.flot.image.js create mode 100644 jquery.flot.image.min.js create mode 100644 jquery.flot.min.js create mode 100644 jquery.flot.navigate.js create mode 100644 jquery.flot.navigate.min.js create mode 100644 jquery.flot.selection.js create mode 100644 jquery.flot.selection.min.js create mode 100644 jquery.flot.stack.js create mode 100644 jquery.flot.stack.min.js create mode 100644 jquery.flot.threshold.js create mode 100644 jquery.flot.threshold.min.js diff --git a/API.txt b/API.txt index 75b3ade..bd0c663 100644 --- a/API.txt +++ b/API.txt @@ -40,7 +40,7 @@ E.g. [ [1, 3], [2, 14.01], [3.5, 3.14] ] Note that to simplify the internal logic in Flot both the x and y -values must be numbers, even if specifying time series (see below for +values must be numbers (even if specifying time series, see below for how to do this). This is a common problem because you might retrieve data from the database and serialize them directly to JSON without noticing the wrong type. If you're getting mysterious errors, double @@ -49,7 +49,7 @@ check that you're inputting numbers and not strings. If a null is specified as a point or if one of the coordinates is null or couldn't be converted to a number, the point is ignored when drawing. As a special case, a null value for lines is interpreted as a -line segment end, i.e. the point before and after the null value are +line segment end, i.e. the points before and after the null value are not connected. Lines and points take two coordinates. For bars, you can specify a @@ -64,7 +64,6 @@ The format of a single series object is as follows: lines: specific lines options bars: specific bars options points: specific points options - threshold: specific threshold options xaxis: 1 or 2 yaxis: 1 or 2 clickable: boolean @@ -100,7 +99,7 @@ E.g., you can use this to make a dual axis plot by specifying "clickable" and "hoverable" can be set to false to disable interactivity for specific series if interactivity is turned on in -plot, see below. +the plot, see below. The rest of the options are all documented below as they are the same as the default options passed in via the options parameter in the plot @@ -120,8 +119,10 @@ All options are completely optional. They are documented individually below, to change them you just specify them in an object, e.g. var options = { - lines: { show: true }, - points: { show: true } + series: { + lines: { show: true }, + points: { show: true } + } }; $.plot(placeholder, data, options); @@ -165,8 +166,6 @@ If you want the legend to appear somewhere else in the DOM, you can specify "container" as a jQuery object/expression to put the legend table into. The "position" and "margin" etc. options will then be ignored. Note that Flot will overwrite the contents of the container. -Most of the above settings do not apply - Customizing the axes @@ -177,9 +176,13 @@ Customizing the axes min: null or number max: null or number autoscaleMargin: null or number + labelWidth: null or number labelHeight: null or number + transform: null or fn: number -> number + inverseTransform: null or fn: number -> number + ticks: null or number or ticks array or (fn: range -> ticks array) tickSize: number or array minTickSize: number or array @@ -203,10 +206,33 @@ specified, the plot will furthermore extend the axis end-point to the nearest whole tick. The default value is "null" for the x axis and 0.02 for the y axis which seems appropriate for most cases. -"labelWidth" and "labelHeight" specifies the maximum size of the tick +"labelWidth" and "labelHeight" specifies a fixed size of the tick labels in pixels. They're useful in case you need to align several plots. +"transform" and "inverseTransform" are callbacks you can put in to +change the way the data is drawn. You can design a function to +compress or expand certain parts of the axis non-linearly, e.g. +suppress weekends or compress far away points with a logarithm or some +other means. When Flot draws the plot, each value is first put through +the transform function. Here's an example, the x axis can be turned +into a natural logarithm axis with the following code: + + xaxis: { + transform: function (v) { return Math.log(v); }, + inverseTransform: function (v) { return Math.exp(v); } + } + +Note that for finding extrema, Flot assumes that the transform +function does not reorder values (monotonicity is assumed). + +The inverseTransform is simply the inverse of the transform function +(so v == inverseTransform(transform(v)) for all relevant v). It is +required for converting from canvas coordinates to data coordinates, +e.g. for a mouse interaction where a certain pixel is clicked. If you +don't use any interactive features of Flot, you may not need it. + + The rest of the options deal with the ticks. If you don't specify any ticks, a tick generator algorithm will make @@ -283,7 +309,6 @@ an example of a custom formatter: return val.toFixed(axis.tickDecimals) + " B"; } - Time series data ================ @@ -354,6 +379,7 @@ through the following axis options: minTickSize: array timeformat: null or format string monthNames: null or array of size 12 of strings + twelveHourClock: boolean Here "timeformat" is a format string to use. You might use it like this: @@ -366,20 +392,25 @@ this: This will result in tick labels like "2000/12/24". The following specifiers are supported - %h': hours - %H': hours (left-padded with a zero) - %M': minutes (left-padded with a zero) - %S': seconds (left-padded with a zero) - %d': day of month (1-31) - %m': month (1-12) - %y': year (four digits) - %b': month name (customizable) + %h: hours + %H: hours (left-padded with a zero) + %M: minutes (left-padded with a zero) + %S: seconds (left-padded with a zero) + %d: day of month (1-31) + %m: month (1-12) + %y: year (four digits) + %b: month name (customizable) + %p: am/pm, additionally switches %h/%H to 12 hour instead of 24 + %P: AM/PM (uppercase version of %p) You can customize the month names with the "monthNames" option. For instance, for Danish you might specify: monthNames: ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"] +If you set "twelveHourClock" to true, the autogenerated timestamps +will use 12 hour AM/PM timestamps instead of 24 hour. + The format string and month names are used by a very simple built-in format function that takes a date object, a format string (and optionally an array of month names) and returns the formatted string. @@ -412,47 +443,51 @@ been produced with two days in-between. Customizing the data series =========================== - lines, points, bars: { - show: boolean - lineWidth: number - fill: boolean or number - fillColor: null or color/gradient - } - - points: { - radius: number - } - - bars: { - barWidth: number - align: "left" or "center" - horizontal: boolean - } + series: { + lines, points, bars: { + show: boolean + lineWidth: number + fill: boolean or number + fillColor: null or color/gradient + } - lines: { - steps: boolean - } + points: { + radius: number + } - colors: [ color1, color2, ... ] + bars: { + barWidth: number + align: "left" or "center" + horizontal: boolean + } - shadowSize: number + lines: { + steps: boolean + } - threshold: { - below: number - color: color + shadowSize: number } + + colors: [ color1, color2, ... ] +The options inside "series: {}" are copied to each of the series. So +you can specify that all series should have bars by putting it in the +global options, or override it for individual series by specifying +bars in a particular the series object in the array of data. + The most important options are "lines", "points" and "bars" that -specifies whether and how lines, points and bars should be shown for +specify whether and how lines, points and bars should be shown for each data series. In case you don't specify anything at all, Flot will default to showing lines (you can turn this off with lines: { show: false}). You can specify the various types independently of each other, and Flot will happily draw each of them -in turn, e.g. +in turn (this is probably only useful for lines and points), e.g. var options = { - lines: { show: true, fill: true, fillColor: "rgba(255, 255, 255, 0.8)" }, - points: { show: true, fill: false } + series: { + lines: { show: true, fill: true, fillColor: "rgba(255, 255, 255, 0.8)" }, + points: { show: true, fill: false } + } }; "lineWidth" is the thickness of the line or outline in pixels. You can @@ -468,20 +503,24 @@ setting fill to a number between 0 (fully transparent) and 1 (fully opaque). For bars, fillColor can be a gradient, see the gradient documentation -below. "barWidth" is the width of the bars in units of the x axis, -contrary to most other measures that are specified in pixels. For -instance, for time series the unit is milliseconds so 24 * 60 * 60 * -1000 produces bars with the width of a day. "align" specifies whether -a bar should be left-aligned (default) or centered on top of the value -it represents. When "horizontal" is on, the bars are drawn -horizontally, i.e. from the y axis instead of the x axis; note that -the bar end points are still defined in the same way so you'll -probably want to swap the coordinates if you've been plotting vertical -bars first. +below. "barWidth" is the width of the bars in units of the x axis (or +the y axis if "horizontal" is true), contrary to most other measures +that are specified in pixels. For instance, for time series the unit +is milliseconds so 24 * 60 * 60 * 1000 produces bars with the width of +a day. "align" specifies whether a bar should be left-aligned +(default) or centered on top of the value it represents. When +"horizontal" is on, the bars are drawn horizontally, i.e. from the y +axis instead of the x axis; note that the bar end points are still +defined in the same way so you'll probably want to swap the +coordinates if you've been plotting vertical bars first. For lines, "steps" specifies whether two adjacent data points are connected with a straight (possibly diagonal) line or with first a -horizontal and then a vertical line. +horizontal and then a vertical line. Note that this transforms the +data by adding extra points. + +"shadowSize" is the default size of shadows in pixels. Set it to 0 to +remove shadows. The "colors" array specifies a default color theme to get colors for the data series from. You can specify as many colors as you like, like @@ -492,18 +531,13 @@ this: If there are more data series than colors, Flot will try to generate extra colors by lightening and darkening colors in the theme. -"shadowSize" is the default size of shadows in pixels. Set it to 0 to -remove shadows. - -"threshold" specifies that the data points below "below" should be -drawn with the specified color. This makes it easy to mark points -below 0, e.g. for budget data. - Customizing the grid ==================== grid: { + show: boolean + aboveData: boolean color: color backgroundColor: color/gradient or null tickColor: color @@ -523,6 +557,10 @@ background color inside the grid area. The default value of null means that the background is transparent. You can also set a gradient, see the gradient documentation below. +You can turn off the whole grid including tick labels by setting +"show" to false. "aboveData" determines whether the grid is drawn on +above the data or below (below is default). + "tickColor" is the color of the ticks and "labelMargin" is the spacing between tick labels and the grid. Note that you can style the tick labels with CSS, e.g. to change the color. They have class "tickLabel". @@ -552,7 +590,7 @@ A line is drawn if from and to are the same, e.g. markings: [ { yaxis: { from: 1, to: 1 } }, ... ] would draw a line parallel to the x axis at y = 1. You can control the -line width with "lineWidth" in the ranges objects. +line width with "lineWidth" in the range object. An example function might look like this: @@ -595,7 +633,7 @@ You can use "plotclick" and "plothover" events like this: The item object in this example is either null or a nearby object on the form: item: { - datapoint: the point as you specified it in the data, e.g. [0, 2] + datapoint: the point, e.g. [0, 2] dataIndex: the index of the point in the data array series: the series object seriesIndex: the index of the series @@ -606,10 +644,12 @@ For instance, if you have specified the data like this $.plot($("#placeholder"), [ { label: "Foo", data: [[0, 10], [7, 3]] } ], ...); -and the mouse is near the point (7, 3), "datapoint" is the [7, 3] we -specified, "dataIndex" will be 1, "series" is a normalized series -object with among other things the "Foo" label in series.label and the -color in series.color, and "seriesIndex" is 0. +and the mouse is near the point (7, 3), "datapoint" is [7, 3], +"dataIndex" will be 1, "series" is a normalized series object with +among other things the "Foo" label in series.label and the color in +series.color, and "seriesIndex" is 0. Note that plugins and options +that transform the data can shift the indexes from what you specified +in the original data array. If you use the above events to update some other information and want to clear out that info in case the mouse goes away, you'll probably @@ -625,53 +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. - - -Customizing the crosshair -========================= - - crosshair: { - mode: null or "x" or "y" or "xy" - color: color - } - -You can enable crosshairs, thin lines, that follow the mouse by -setting the mode to one of "x", "y" or "xy". The "x" mode enables a -vertical crosshair that lets you trace the values on the x axis, "y" -enables a horizontal crosshair and "xy" enables them both. - - Specifying gradients ==================== @@ -690,10 +683,18 @@ For the series you can specify the gradient as an object that specifies the scaling of the brightness and the opacity of the series color, e.g. - { colors: [{ opacity: 0.8 }, { brightness: 0.6, opacity: 0.8 } ] + { colors: [{ opacity: 0.8 }, { brightness: 0.6, opacity: 0.8 } ] } where the first color simply has its alpha scaled, whereas the second -is also darkened. +is also darkened. For instance, for bars the following makes the bars +gradually disappear, without outline: + + bars: { + show: true, + lineWidth: 0, + fill: true, + fillColor: { colors: [ { opacity: 0.8 }, { opacity: 0.1 } ] } + } Flot currently only supports vertical gradients drawn from top to bottom because that's what works with IE. @@ -705,53 +706,22 @@ 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. - - - - setCrosshair(pos) - - Set the position of the crosshair. Note that this is cleared if - the user moves the mouse. "pos" should be on the form { x: xpos, - y: ypos } (or x2 and y2 if you're using the secondary axes), which - is coincidentally the same format as what you get from a "plothover" - event. If "pos" is null, the crosshair is cleared. - - - - clearCrosshair() - - Clear the crosshair. - - - highlight(series, datapoint) Highlight a specific datapoint in the data series. You can either specify the actual objects, e.g. if you got them from a "plotclick" event, or you can specify the indices, e.g. - highlight(1, 3) to highlight the fourth point in the second series. + highlight(1, 3) to highlight the fourth point in the second series + (remember, zero-based indexing). - - unhighlight(series, datapoint) + - unhighlight(series, datapoint) or unhighlight() - Remove the highlighting of the point, same parameters as highlight. + Remove the highlighting of the point, same parameters as + highlight. + + If you call unhighlight with no parameters, e.g. as + plot.unhighlight(), all current highlights are removed. - setData(data) @@ -760,10 +730,11 @@ can call: ticks, legend etc. will not be recomputed (use setupGrid() to do that). You'll probably want to call draw() afterwards. - You can use this function to speed up redrawing a plot if you know - that the axes won't change. Put in the new data with - setData(newdata) and call draw() afterwards, and you're good to - go. + You can use this function to speed up redrawing a small plot if + you know that the axes won't change. Put in the new data with + setData(newdata), call draw(), and you're good to go. Note that + for large datasets, almost all the time is consumed in draw() + plotting the data so in this case don't bother. - setupGrid() @@ -778,17 +749,47 @@ can call: - draw() - Redraws the canvas. - + Redraws the plot canvas. + + - triggerRedrawOverlay() + + Schedules an update of an overlay canvas used for drawing + 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). + + - width()/height() + + Gets the width and height of the plotting area inside the grid. + This is smaller than the canvas or placeholder dimensions as some + extra space is needed (e.g. for labels). + + - offset() + + Returns the offset of the plotting area inside the grid relative + to the document, useful for instance for calculating mouse + positions (event.pageX/Y minus this offset is the pixel position + inside the plot). + + - pointOffset({ x: xpos, y: ypos }) + + Returns the calculated offset of the data point at (x, y) in data + space within the placeholder div. If you are working with dual axes, you + can specify the x and y axis references, e.g. + + o = pointOffset({ x: xpos, y: ypos, xaxis: 2, yaxis: 2 }) + // o.left and o.top now contains the offset within the div + There are also some members that let you peek inside the internal -workings of Flot which in some cases is useful. Note that if you change +workings of Flot which is useful in some cases. Note that if you change something in the objects returned, you're changing the objects used by Flot to keep track of its state, so be careful. - getData() - Returns an array of the data series currently used on normalized + Returns an array of the data series currently used in normalized form with missing settings filled in according to the global options. So for instance to find out what color Flot has assigned to the data series, you could do this: @@ -797,20 +798,32 @@ Flot to keep track of its state, so be careful. for (var i = 0; i < series.length; ++i) alert(series[i].color); + A notable other interesting field besides color is datapoints + which has a field "points" with the normalized data points in a + flat array (the field "pointsize" is the increment in the flat + array to get to the next point so for a dataset consisting only of + (x,y) pairs it would be 2). - getAxes() Gets an object with the axes settings as { xaxis, yaxis, x2axis, - y2axis }. Various things are stuffed inside an axis object, e.g. - you could use getAxes().xaxis.ticks to find out what the ticks are - for the xaxis. - + y2axis }. + + Various things are stuffed inside an axis object, e.g. you could + use getAxes().xaxis.ticks to find out what the ticks are for the + xaxis. Two other useful attributes are p2c and c2p, functions for + transforming from data point space to the canvas plot space and + back. Both returns values that are offset with the plot offset. + + - getPlaceholder() + + Returns placeholder that the plot was put into. This can be useful + for plugins for adding DOM elements or firing events. - getCanvas() Returns the canvas used for drawing in case you need to hack on it yourself. You'll probably need to get the plot offset too. - - getPlotOffset() @@ -820,4 +833,192 @@ Flot to keep track of its state, so be careful. placed at (left, top), its center will be at the top-most, left corner of the grid. + - getOptions() + + Gets the options for the plot, in a normalized format with default + values filled in. + + +Hooks +===== + +In addition to the public methods, the Plot object also has some hooks +that can be used to modify the plotting process. You can install a +callback function at various points in the process, the function then +gets access to the internal data structures in Flot. + +Here's an overview of the phases Flot goes through: + + 1. Plugin initialization, parsing options + + 2. Constructing the canvases used for drawing + + 3. Set data: parsing data specification, calculating colors, + copying raw data points into internal format, + normalizing them, finding max/min for axis auto-scaling + + 4. Grid setup: calculating axis spacing, ticks, inserting tick + labels, the legend + + 5. Draw: drawing the grid, drawing each of the series in turn + + 6. Setting up event handling for interactive features + + 7. Responding to events, if any + +Each hook is simply a function which is put in the appropriate array. +You can add them through the "hooks" option, and they are also available +after the plot is constructed as the "hooks" attribute on the returned +plot object, e.g. + + // define a simple draw hook + function hellohook(plot, canvascontext) { alert("hello!"); }; + + // pass it in, in an array since we might want to specify several + var plot = $.plot(placeholder, data, { hooks: { draw: [hellohook] } }); + + // we can now find it again in plot.hooks.draw[0] unless a plugin + // has added other hooks + +The available hooks are described below. All hook callbacks get the +plot object as first parameter. You can find some examples of defined +hooks in the plugins bundled with Flot. + + - processOptions [phase 1] + + function(plot, options) + + Called after Flot has parsed and merged options. Useful in the + instance where customizations beyond simple merging of default + values is needed. A plugin might use it to detect that it has been + enabled and then turn on or off other options. + + + - processRawData [phase 3] + + function(plot, series, data, datapoints) + + Called before Flot copies and normalizes the raw data for the given + series. If the function fills in datapoints.points with normalized + points and sets datapoints.pointsize to the size of the points, + Flot will skip the copying/normalization step for this series. + + In any case, you might be interested in setting datapoints.format, + an array of objects for specifying how a point is normalized and + how it interferes with axis scaling. + + The default format array for points is something along the lines of: + + [ + { x: true, number: true, required: true }, + { y: true, number: true, required: true } + ] + The first object means that for the first coordinate it should be + taken into account when scaling the x axis, that it must be a + number, and that it is required - so if it is null or cannot be + converted to a number, the whole point will be zeroed out with + nulls. Beyond these you can also specify "defaultValue", a value to + use if the coordinate is null. This is for instance handy for bars + where one can omit the third coordinate (the bottom of the bar) + which then defaults to 0. + + + - processDatapoints [phase 3] + + function(plot, series, datapoints) + + Called after normalization of the given series but before finding + min/max of the data points. This hook is useful for implementing data + transformations. "datapoints" contains the normalized data points in + a flat array as datapoints.points with the size of a single point + given in datapoints.pointsize. Here's a simple transform that + multiplies all y coordinates by 2: + + function multiply(plot, series, datapoints) { + var points = datapoints.points, ps = datapoints.pointsize; + for (var i = 0; i < points.length; i += ps) + points[i + 1] *= 2; + } + + Note that you must leave datapoints in a good condition as Flot + doesn't check it or do any normalization on it afterwards. + + + - draw [phase 5] + + function(plot, canvascontext) + + Hook for drawing on the canvas. Called after the grid is drawn + (unless it's disabled) and the series have been plotted (in case + any points, lines or bars have been turned on). For examples of how + to draw things, look at the source code. + + + - bindEvents [phase 6] + + function(plot, eventHolder) + + Called after Flot has setup its event handlers. Should set any + necessary event handlers on eventHolder, a jQuery object with the + canvas, e.g. + + function (plot, eventHolder) { + eventHolder.mousedown(function (e) { + alert("You pressed the mouse at " + e.pageX + " " + e.pageY); + }); + } + + Interesting events include click, mousemove, mouseup/down. You can + use all jQuery events. Usually, the event handlers will update the + state by drawing something (add a drawOverlay hook and call + triggerRedrawOverlay) or firing an externally visible event for + user code. See the crosshair plugin for an example. + + Currently, eventHolder actually contains both the static canvas + used for the plot itself and the overlay canvas used for + interactive features because some versions of IE get the stacking + order wrong. The hook only gets one event, though (either for the + overlay or for the static canvas). + + + - drawOverlay [phase 7] + + function (plot, canvascontext) + + The drawOverlay hook is used for interactive things that need a + canvas to draw on. The model currently used by Flot works the way + that an extra overlay canvas is positioned on top of the static + canvas. This overlay is cleared and then completely redrawn + whenever something interesting happens. This hook is called when + the overlay canvas is to be redrawn. + + "canvascontext" is the 2D context of the overlay canvas. You can + use this to draw things. You'll most likely need some of the + metrics computed by Flot, e.g. plot.width()/plot.height(). See the + crosshair plugin for an example. + + + +Plugins +------- + +Plugins extend the functionality of Flot. To use a plugin, simply +include its Javascript file after Flot in the HTML page. + +If you're worried about download size/latency, you can concatenate all +the plugins you use, and Flot itself for that matter, into one big file +(make sure you get the order right), then optionally run it through a +Javascript minifier such as YUI Compressor. + +Here's a brief explanation of how the plugin plumbings work: + +Each plugin registers itself in the global array $.plot.plugins. When +you make a new plot object with $.plot, Flot goes through this array +calling the "init" function of each plugin and merging default options +from its "option" attribute. The init function gets a reference to the +plot object created and uses this to register hooks and add new public +methods if needed. + +See the PLUGINS.txt file for details on how to write a plugin. As the +above description hints, it's actually pretty easy. diff --git a/FAQ.txt b/FAQ.txt index 5c7c52b..ee48124 100644 --- a/FAQ.txt +++ b/FAQ.txt @@ -33,11 +33,11 @@ best bet is probably taking a screenshot, e.g. with PrtScn. Q: The bars are all tiny in time mode? -A: It's not really possible to determine the bar width -automatically. So you have to set the width with the barWidth option -which is NOT in pixels, but in the units of the x axis. For time -mode that's milliseconds so the default value of 1 makes the bars 1 -millisecond wide. +A: It's not really possible to determine the bar width automatically. +So you have to set the width with the barWidth option which is NOT in +pixels, but in the units of the x axis (or the y axis for horizontal +bars). For time mode that's milliseconds so the default value of 1 +makes the bars 1 millisecond wide. Q: Can I use Flot with libraries like Mootools or Prototype? diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..07d5b20 --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,22 @@ +Copyright (c) 2007-2009 IOLA and Ole Laursen + +Permission is hereby granted, free of charge, to any person +obtaining a copy of this software and associated documentation +files (the "Software"), to deal in the Software without +restriction, including without limitation the rights to use, +copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the +Software is furnished to do so, subject to the following +conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES +OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT +HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR +OTHER DEALINGS IN THE SOFTWARE. diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..f90a969 --- /dev/null +++ b/Makefile @@ -0,0 +1,15 @@ +# Makefile for generating minified files + +YUICOMPRESSOR_PATH=../yuicompressor-2.3.5.jar + +# if you need another compressor path, just copy the above line to a +# file called Makefile.local, customize it and you're good to go +-include Makefile.local + +.PHONY: all + +# we cheat and process all .js files instead of listing them +all: $(patsubst %.js,%.min.js,$(filter-out %.min.js,$(wildcard *.js))) + +%.min.js: %.js + java -jar $(YUICOMPRESSOR_PATH) $< -o $@ diff --git a/NEWS.txt b/NEWS.txt index 48503ba..53281c5 100644 --- a/NEWS.txt +++ b/NEWS.txt @@ -1,6 +1,36 @@ -Flot 0.x +Flot 0.6 -------- +API changes: + +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 }}) + +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 code is in place, so +old code should not break. + +3. "plothover" no longer provides the original data point, but instead +a normalized one, since there may be no corresponding original point. + +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. + + Changes: - Added support for disabling interactivity for specific data series @@ -8,15 +38,12 @@ Changes: - Flot now calls $() on the placeholder and optional legend container passed in so you can specify DOM elements or CSS expressions to make - it easier to use Flot with libraries like Prototype or Mootools. + it easier to use Flot with libraries like Prototype or Mootools or + through raw JSON from Ajax responses. - A new "plotselecting" event is now emitted while the user is making - selection. + a selection. -- Added a new crosshairs feature for tracing the mouse position on the - axes, enable with crosshair { mode: "x"} (see the new tracking - example for a use). - - The "plothover" event is now emitted immediately instead of at most 10 times per second, you'll have to put in a setTimeout yourself if you're doing something really expensive on this event. @@ -49,10 +76,6 @@ Changes: set to true connects the points with horizontal/vertical steps instead of diagonal lines. -- Thresholding: you can set a threshold and a color, and the data - points below that threshold will then get the color. Useful for - marking data below 0, for instance. - - The legend labelFormatter now passes the series in addition to just the label (suggestion by Vincent Lemeltier). @@ -62,6 +85,48 @@ Changes: don't have to start from the axis. This can be used to make stacked bars. +- New option to disable the (grid.show). + +- Added pointOffset method for converting a point in data space to an + 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 + (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 + Flot without changing the source, useful for writing plugins. Some + hooks are defined, more are likely to come. + +- Threshold plugin: you can set a threshold and a color, and the data + points below that threshold will then get the color. Useful for + marking data below 0, for instance. + +- Stack plugin: you can specify a stack key for each series to have + them summed. This is useful for drawing additive/cumulative graphs + with bars and (currently unfilled) lines. + +- Crosshairs plugin: trace the mouse position on the axes, enable with + crosshair: { mode: "x"} (see the new tracking example for a use). + +- Image plugin: plot prerendered images. + +- Navigation plugin for panning and zooming a plot. + +- More configurable grid. + +- Axis transformation support, useful for non-linear plots, e.g. log + 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 @@ -76,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 @@ -98,7 +163,15 @@ Bug fixes: with vertical lines. - Round tick positions to avoid possible problems with fractions (suggestion by Fred, issue 130). - +- Made the heuristic for determining how many ticks to aim for a bit + smarter. +- Fix for uneven axis margins (report and patch by Paul Kienzle) and + snapping to ticks (concurrent report and patch by lifthrasiir). +- Fixed bug with slicing in findNearbyItems (patch by zollman). +- Make heuristic for x axis label widths more dynamic (patch by + rickinhethuis). +- Make sure points on top take precedence when finding nearby points + when hovering (reported by didroe, issue 224). Flot 0.5 -------- diff --git a/PLUGINS.txt b/PLUGINS.txt new file mode 100644 index 0000000..00bf2e5 --- /dev/null +++ b/PLUGINS.txt @@ -0,0 +1,105 @@ +Writing plugins +--------------- + +To make a new plugin, create an init function and a set of options (if +needed), stuff it into an object and put it in the $.plot.plugins +array. For example: + + function myCoolPluginInit(plot) { plot.coolstring = "Hello!" }; + var myCoolOptions = { coolstuff: { show: true } } + $.plot.plugins.push({ init: myCoolPluginInit, options: myCoolOptions }); + + // now when $.plot is called, the returned object will have the + // attribute "coolstring" + +Now, given that the plugin might run in many different places, it's +a good idea to avoid leaking names. We can avoid this by wrapping the +above lines in an anonymous function which we call immediately, like +this: (function () { inner code ... })(). To make it even more robust +in case $ is not bound to jQuery but some other Javascript library, we +can write it as + + (function ($) { + // plugin definition + // ... + })(jQuery); + +Here is a simple debug plugin which alerts each of the series in the +plot. It has a single option that control whether it is enabled and +how much info to output: + + (function ($) { + function init(plot) { + var debugLevel = 1; + + function checkDebugEnabled(plot, options) { + if (options.debug) { + debugLevel = options.debug; + + plot.hooks.processDatapoints.push(alertSeries); + } + } + + function alertSeries(plot, series, datapoints) { + var msg = "series " + series.label; + if (debugLevel > 1) + msg += " with " + series.data.length + " points"; + alert(msg); + } + + plot.hooks.processOptions.push(checkDebugEnabled); + } + + var options = { debug: 0 }; + + $.plot.plugins.push({ + init: init, + options: options, + name: "simpledebug", + version: "0.1" + }); + })(jQuery); + +We also define "name" and "version". It's not used by Flot, but might +be helpful for other plugins in resolving dependencies. + +Put the above in a file named "jquery.flot.debug.js", include it in an +HTML page and then it can be used with: + + $.plot($("#placeholder"), [...], { debug: 2 }); + +This simple plugin illustrates a couple of points: + + - It uses the anonymous function trick to avoid name pollution. + - It can be enabled/disabled through an option. + - Variables in the init function can be used to store plot-specific + state between the hooks. + + +Options guidelines +================== + +Plugins should always support appropriate options to enable/disable +them because the plugin user may have several plots on the same page +where only one should use the plugin. + +If the plugin needs series-specific options, you can put them in +"series" in the options object, e.g. + + var options = { + series: { + downsample: { + algorithm: null, + maxpoints: 1000 + } + } + } + +Then they will be copied by Flot into each series, providing the +defaults in case the plugin user doesn't specify any. Again, in most +cases it's probably a good idea if the plugin is turned off rather +than on per default, just like most of the powerful features in Flot. + +Think hard and long about naming the options. These names are going to +be public API, and code is going to depend on them if the plugin is +successful. diff --git a/README.txt b/README.txt index 83d9a81..5f962fb 100644 --- a/README.txt +++ b/README.txt @@ -16,9 +16,8 @@ Installation Just include the Javascript file after you've included jQuery. -Note that you need to get a version of Excanvas (I currently suggest -you take the one bundled with Flot as it contains a bugfix for drawing -filled shapes) which is canvas emulation on Internet Explorer. You can +Note that you need to get a version of Excanvas (e.g. the one bundled +with Flot) which is canvas emulation on Internet Explorer. You can include the excanvas script like this: @@ -28,7 +27,9 @@ support for VML which excanvas is relying on. It appears that some stripped down versions used for test environments on virtual machines lack the VML support. -Also note that you need at least jQuery 1.2.1. +Also note that you need at least jQuery 1.2.6 (but at least jQuery +1.3.2 is recommended for interactive charts because of performance +improvements in event handling). Basic usage @@ -63,7 +64,7 @@ in the file "API.txt". Here's a quick example that'll draw a line from $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } }); -The plot function immediately draws the chart and then returns a Plot +The plot function immediately draws the chart and then returns a plot object with a couple of methods. @@ -72,9 +73,9 @@ What's with the name? First: it's pronounced with a short o, like "plot". Not like "flawed". -So "Flot" is like "Plot". +So "Flot" rhymes with "plot". And if you look up "flot" in a Danish-to-English dictionary, some up the words that come up are "good-looking", "attractive", "stylish", "smart", "impressive", "extravagant". One of the main goals with Flot -is pretty looks. Flot is supposed to be "flot". +is pretty looks. diff --git a/TODO b/TODO deleted file mode 100644 index 1e28b7f..0000000 --- a/TODO +++ /dev/null @@ -1,34 +0,0 @@ -These are mostly ideas, that they're written down here is no guarantee -that they'll ever be done. If you want something done, feel free to -say why or come up with a patch. :-) - -pending - - split out autoscaleMargin into a snapToTicks - -grid configuration - - how ticks look like - - consider setting default grid colors from each other? - -selection - - user should be able to cancel selection with escape - -interactive zooming - - convenience zoom(x1, y1, x2, y2)? and zoomOut() (via zoom stack)? - - auto-zoom mode? - - auto-margins - -legend - - interactive auto-highlight of graph? - - ability to specify noRows instead of just noColumns - -labels - - labels on bars, data points - - interactive "label this point" command/tooltip support - -error margin indicators - - for scientific/statistical purposes - -non-xy based graph types - - figure out how to integrate them with the rest of the plugin - - pie charts - - bar charts, keys instead of x values diff --git a/examples/ajax.html b/examples/ajax.html new file mode 100644 index 0000000..385a834 --- /dev/null +++ b/examples/ajax.html @@ -0,0 +1,143 @@ + + + + + Flot Examples + + + + + + +

Flot Examples

+ +
+ +

Example of loading data dynamically with AJAX. Percentage change in GDP (source: Eurostat). Click the buttons below.

+ +

The data is fetched over HTTP, in this case directly from text + files. Usually the URL would point to some web server handler + (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that + extracts it from a database and serializes it to JSON.

+ +

+ - + data - + +

+ +

+ - + data - + +

+ +

+ - + data - + +

+ +

If you combine AJAX with setTimeout, you can poll the server + for new data.

+ +

+ +

+ + + + + diff --git a/examples/annotating.html b/examples/annotating.html new file mode 100644 index 0000000..9d99ea4 --- /dev/null +++ b/examples/annotating.html @@ -0,0 +1,75 @@ + + + + + Flot Examples + + + + + + +

Flot Examples

+ +
+ +

Flot has support for simple background decorations such as + lines and rectangles. They can be useful for marking up certain + areas. You can easily add any HTML you need with standard DOM + manipulation, e.g. for labels. For drawing custom shapes there is + also direct access to the canvas.

+ + + + + diff --git a/examples/arrow-down.gif b/examples/arrow-down.gif new file mode 100644 index 0000000..e239d11 Binary files /dev/null and b/examples/arrow-down.gif differ diff --git a/examples/arrow-left.gif b/examples/arrow-left.gif new file mode 100644 index 0000000..93ffd5a Binary files /dev/null and b/examples/arrow-left.gif differ diff --git a/examples/arrow-right.gif b/examples/arrow-right.gif new file mode 100644 index 0000000..5fd0530 Binary files /dev/null and b/examples/arrow-right.gif differ diff --git a/examples/arrow-up.gif b/examples/arrow-up.gif new file mode 100644 index 0000000..7d19626 Binary files /dev/null and b/examples/arrow-up.gif differ diff --git a/examples/data-eu-gdp-growth-1.json b/examples/data-eu-gdp-growth-1.json new file mode 100644 index 0000000..4372bf5 --- /dev/null +++ b/examples/data-eu-gdp-growth-1.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9]] +} diff --git a/examples/data-eu-gdp-growth-2.json b/examples/data-eu-gdp-growth-2.json new file mode 100644 index 0000000..6199882 --- /dev/null +++ b/examples/data-eu-gdp-growth-2.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2]] +} diff --git a/examples/data-eu-gdp-growth-3.json b/examples/data-eu-gdp-growth-3.json new file mode 100644 index 0000000..607f178 --- /dev/null +++ b/examples/data-eu-gdp-growth-3.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5]] +} diff --git a/examples/data-eu-gdp-growth-4.json b/examples/data-eu-gdp-growth-4.json new file mode 100644 index 0000000..df60fa9 --- /dev/null +++ b/examples/data-eu-gdp-growth-4.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]] +} diff --git a/examples/data-eu-gdp-growth-5.json b/examples/data-eu-gdp-growth-5.json new file mode 100644 index 0000000..e722bcc --- /dev/null +++ b/examples/data-eu-gdp-growth-5.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]] +} diff --git a/examples/data-eu-gdp-growth.json b/examples/data-eu-gdp-growth.json new file mode 100644 index 0000000..e722bcc --- /dev/null +++ b/examples/data-eu-gdp-growth.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]] +} diff --git a/examples/data-japan-gdp-growth.json b/examples/data-japan-gdp-growth.json new file mode 100644 index 0000000..09aae77 --- /dev/null +++ b/examples/data-japan-gdp-growth.json @@ -0,0 +1,4 @@ +{ + label: 'Japan', + data: [[1999, -0.1], [2000, 2.9], [2001, 0.2], [2002, 0.3], [2003, 1.4], [2004, 2.7], [2005, 1.9], [2006, 2.0], [2007, 2.3], [2008, -0.7]] +} diff --git a/examples/data-usa-gdp-growth.json b/examples/data-usa-gdp-growth.json new file mode 100644 index 0000000..33fd4d3 --- /dev/null +++ b/examples/data-usa-gdp-growth.json @@ -0,0 +1,4 @@ +{ + label: 'USA', + data: [[1999, 4.4], [2000, 3.7], [2001, 0.8], [2002, 1.6], [2003, 2.5], [2004, 3.6], [2005, 2.9], [2006, 2.8], [2007, 2.0], [2008, 1.1]] +} 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/hs-2004-27-a-large_web.jpg b/examples/hs-2004-27-a-large_web.jpg new file mode 100644 index 0000000..a1d5c05 Binary files /dev/null and b/examples/hs-2004-27-a-large_web.jpg differ diff --git a/examples/image.html b/examples/image.html new file mode 100644 index 0000000..57189d2 --- /dev/null +++ b/examples/image.html @@ -0,0 +1,45 @@ + + + + + Flot Examples + + + + + + + +

Flot Examples

+ +
+ +

The Cat's Eye Nebula (picture from Hubble).

+ +

With the image plugin, you can plot images. This is for example + useful for getting ticks on complex prerendered visualizations. + Instead of inputting data points, you put in the images and where + their two opposite corners are supposed to be in plot space.

+ +

Images represent a little further complication because you need + to make sure they are loaded before you can use them (Flot skips + incomplete images). The plugin comes with a couple of helpers + for doing that.

+ + + + + diff --git a/examples/index.html b/examples/index.html index 3f116ed..789f941 100644 --- a/examples/index.html +++ b/examples/index.html @@ -11,16 +11,33 @@

Flot Examples

-

Here are some examples for Flot:

+

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

+ +

Being interactive:

+ + + +

Some more esoteric features:

+ + diff --git a/examples/interacting.html b/examples/interacting.html index 5cb59d0..fbf0390 100644 --- a/examples/interacting.html +++ b/examples/interacting.html @@ -33,12 +33,13 @@ $(function () { } var plot = $.plot($("#placeholder"), - [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], - { lines: { show: true }, - points: { show: true }, - selection: { mode: "xy" }, - grid: { hoverable: true, clickable: true }, - yaxis: { min: -1.2, max: 1.2 } + [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], { + series: { + lines: { show: true }, + points: { show: true } + }, + grid: { hoverable: true, clickable: true }, + yaxis: { min: -1.2, max: 1.2 } }); function showTooltip(x, y, contents) { diff --git a/examples/layout.css b/examples/layout.css index 7a23dd9..7ef7dd4 100644 --- a/examples/layout.css +++ b/examples/layout.css @@ -2,4 +2,5 @@ body { font-family: sans-serif; font-size: 16px; margin: 50px; + max-width: 800px; } diff --git a/examples/navigate.html b/examples/navigate.html new file mode 100644 index 0000000..78eff55 --- /dev/null +++ b/examples/navigate.html @@ -0,0 +1,118 @@ + + + + + Flot Examples + + + + + + + + +

Flot Examples

+ +
+ +

+ +

With the navigate plugin it is easy to add panning and zooming. + Drag to pan, double click to zoom (or use the mouse scrollwheel).

+ +

The plugin fires events (useful for synchronizing several + plots) and adds a couple of public methods so you can easily build + a little user interface around it, like the little buttons at the + top right in the plot.

+ + + + + + diff --git a/examples/selection.html b/examples/selection.html index 56cb3db..8b67a2b 100644 --- a/examples/selection.html +++ b/examples/selection.html @@ -7,6 +7,7 @@ +

Flot Examples

@@ -15,23 +16,23 @@

1000 kg. CO2 emissions per year per capita for various countries (source: Wikipedia).

-

Flot supports selections. You can enable - rectangular selection +

Flot supports selections through the selection plugin. + You can enable rectangular selection or one-dimensional selection if the user should only be able to - select on one axis. Try left-clicking and drag on the plot above + select on one axis. Try left-click and drag on the plot above where selection on the x axis is enabled.

You selected:

-

The plot command returns a Plot object you can use to control - the selection. Try clicking the buttons below.

+

The plot command returns a plot object you can use to control + the selection. Click the buttons below.

Selections are really useful for zooming. Just replot the chart with min and max values for the axes set to the values - in the "plotselected" event triggered. Try enabling the checkbox + in the "plotselected" event triggered. Enable the checkbox below and select a region again.

Zoom to selection.

@@ -70,8 +71,10 @@ $(function () { ]; var options = { - lines: { show: true }, - points: { show: true }, + series: { + lines: { show: true }, + points: { show: true } + }, legend: { noColumns: 2 }, xaxis: { tickDecimals: 0 }, yaxis: { min: 0 }, diff --git a/examples/setting-options.html b/examples/setting-options.html index b0570b2..6eb6ee9 100644 --- a/examples/setting-options.html +++ b/examples/setting-options.html @@ -42,8 +42,10 @@ $(function () { { label: "cos(x)", data: d2}, { label: "tan(x)", data: d3} ], { - lines: { show: true }, - points: { show: true }, + series: { + lines: { show: true }, + points: { show: true } + }, xaxis: { ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]] }, diff --git a/examples/stacking.html b/examples/stacking.html new file mode 100644 index 0000000..62e0c7b --- /dev/null +++ b/examples/stacking.html @@ -0,0 +1,77 @@ + + + + + Flot Examples + + + + + + + +

Flot Examples

+ +
+ +

With the stack plugin, you can have Flot stack the + series. This is useful if you wish to display both a total and the + constituents it is made of. The only requirement is that you provide + the input sorted on x.

+ +

+ + +

+ +

+ + + +

+ + + + + diff --git a/examples/thresholding.html b/examples/thresholding.html index 7d29294..10b5b2a 100644 --- a/examples/thresholding.html +++ b/examples/thresholding.html @@ -7,15 +7,17 @@ +

Flot Examples

-

You can apply a specific color to the part of a data series - below a threshold. This is can be useful for highlighting negative - values, e.g. when displaying net results or what's in stock.

+

With the threshold plugin, you can apply a specific color to + the part of a data series below a threshold. This is can be useful + for highlighting negative values, e.g. when displaying net results + or what's in stock.

@@ -29,7 +31,7 @@ $(function () { for (var i = 0; i <= 60; i += 1) d1.push([i, parseInt(Math.random() * 30 - 10)]); - function doPlot(t) { + function plotWithOptions(t) { $.plot($("#placeholder"), [ { data: d1, color: "rgb(30, 180, 20)", @@ -38,12 +40,12 @@ $(function () { } ]); } - doPlot(0); + plotWithOptions(0); $(".controls input").click(function (e) { e.preventDefault(); var t = parseFloat($(this).val().replace('Threshold at ', '')); - doPlot(t); + plotWithOptions(t); }); }); diff --git a/examples/time.html b/examples/time.html index d1dd4e3..5f43b88 100644 --- a/examples/time.html +++ b/examples/time.html @@ -34,7 +34,7 @@ to the timestamps or simply pretend that the data was produced in UTC instead of your local time zone.

- diff --git a/examples/tracking.html b/examples/tracking.html index 722f960..a0ad77d 100644 --- a/examples/tracking.html +++ b/examples/tracking.html @@ -7,6 +7,7 @@ +

Flot Examples

@@ -18,11 +19,12 @@

If you combine it with listening on hover events, you can use it to track the intersection on the curves by interpolating - the data points.

+ the data points (look at the legend).

+

Flot Examples

@@ -18,7 +19,7 @@
- +

Flot Examples

@@ -26,7 +27,7 @@ the small overview plot to the right has been connected to the large plot. Try selecting a rectangle on either of them.

-