[Pkg-javascript-commits] [SCM] flot branch, upstream, updated. afc26e4bafda2d022297c6073eaa6e5ba95e2975
Marcelo Jorge Vieira (metal)
metal at alucinados.com
Tue Mar 9 01:42:37 UTC 2010
The following commit has been merged in the upstream branch:
commit afc26e4bafda2d022297c6073eaa6e5ba95e2975
Author: Marcelo Jorge Vieira (metal) <metal at alucinados.com>
Date: Sat Mar 6 12:10:56 2010 -0300
Imported Upstream version 0.6
diff --git a/API.txt b/API.txt
index f2f59df..bd0c663 100644
--- a/API.txt
+++ b/API.txt
@@ -5,11 +5,14 @@ Consider a call to the plot function:
var plot = $.plot(placeholder, data, options)
-The placeholder is a jQuery object that the plot will be put into.
-This placeholder needs to have its width and height set as explained
-in the README (go read that now if you haven't, it's short). The plot
-will modify some properties of the placeholder so it's recommended you
-simply pass in a div that you don't use for anything else.
+The placeholder is a jQuery object or DOM element or jQuery expression
+that the plot will be put into. This placeholder needs to have its
+width and height set as explained in the README (go read that now if
+you haven't, it's short). The plot will modify some properties of the
+placeholder so it's recommended you simply pass in a div that you
+don't use for anything else. Make sure you check any fancy styling
+you apply to the div, e.g. background images have been reported to be a
+problem on IE 7.
The format of the data is documented below, as is the available
options. The "plot" object returned has some methods you can call.
@@ -37,28 +40,34 @@ 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.
+noticing the wrong type. If you're getting mysterious errors, double
+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
+third coordinate which is the bottom of the bar (defaults to 0).
+
The format of a single series object is as follows:
{
- color: color or number,
- data: rawdata,
- label: string,
- lines: specific lines options,
- bars: specific bars options,
- points: specific points options,
- xaxis: 1 or 2,
- yaxis: 1 or 2,
+ color: color or number
+ data: rawdata
+ label: string
+ lines: specific lines options
+ bars: specific bars options
+ points: specific points options
+ xaxis: 1 or 2
+ yaxis: 1 or 2
+ clickable: boolean
+ hoverable: boolean
shadowSize: number
}
@@ -88,6 +97,10 @@ to get the secondary axis (x axis at top or y axis to the right).
E.g., you can use this to make a dual axis plot by specifying
{ yaxis: 2 } for one data series.
+"clickable" and "hoverable" can be set to false to disable
+interactivity for specific series if interactivity is turned on in
+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
commmand. When you specify them for a specific data series, they will
@@ -106,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);
@@ -118,14 +133,14 @@ Customizing the legend
legend: {
show: boolean
- labelFormatter: null or (fn: string -> string)
+ labelFormatter: null or (fn: string, series object -> string)
labelBoxBorderColor: color
noColumns: number
position: "ne" or "nw" or "se" or "sw"
- margin: number of pixels
+ margin: number of pixels or [x margin, y margin]
backgroundColor: null or color
- backgroundOpacity: number in 0.0 - 1.0
- container: null or jQuery object
+ backgroundOpacity: number between 0 and 1
+ container: null or jQuery object/DOM element/jQuery expression
}
The legend is generated as a table with the data series labels and
@@ -134,22 +149,23 @@ the labels in some way, e.g. make them to links, you can pass in a
function for "labelFormatter". Here's an example that makes them
clickable:
- labelFormatter: function(label) {
- return '<a href="' + label + '">' + label + '</a>';
+ labelFormatter: function(label, series) {
+ // series is the series object for the label
+ return '<a href="#' + label + '">' + label + '</a>';
}
"noColumns" is the number of columns to divide the legend table into.
"position" specifies the overall placement of the legend within the
plot (top-right, top-left, etc.) and margin the distance to the plot
-edge. "backgroundColor" and "backgroundOpacity" specifies the
+edge (this can be either a number or an array of two numbers like [x,
+y]). "backgroundColor" and "backgroundOpacity" specifies the
background. The default is a partly transparent auto-detected
background.
If you want the legend to appear somewhere else in the DOM, you can
-specify "container" as a jQuery object to put the legend table into.
-The "position" and "margin" etc. options will then be ignored. Note
-that it will overwrite the contents of the container.
-
+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.
Customizing the axes
@@ -160,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
@@ -170,7 +190,7 @@ Customizing the axes
tickDecimals: null or number
}
-The axes have the same kind of options. The "mode" option
+All axes have the same kind of options. The "mode" option
determines how the data is interpreted, the default of null means as
decimal numbers. Use "time" for time series data, see the next section.
@@ -186,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
@@ -200,8 +243,8 @@ round tick interval size. Then it generates the ticks.
You can specify how many ticks the algorithm aims for by setting
"ticks" to a number. The algorithm always tries to generate reasonably
round tick values so even if you ask for three ticks, you might get
-five if that fits better with the rounding. If you don't want ticks,
-set "ticks" to 0 or an empty array.
+five if that fits better with the rounding. If you don't want any
+ticks at all, set "ticks" to 0 or an empty array.
Another option is to skip the rounding part and directly set the tick
interval size with "tickSize". If you set it to 2, you'll get ticks at
@@ -215,10 +258,12 @@ an array for "ticks", either like this:
ticks: [0, 1.2, 2.4]
-Or like this (you can mix the two if you like):
+Or like this where the labels are also customized:
ticks: [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]]
+You can mix the two if you like.
+
For extra flexibility you can specify a function as the "ticks"
parameter. The function will be called with an object with the axis
min and max and should return a ticks array. Here's a simplistic tick
@@ -264,7 +309,6 @@ an example of a custom formatter:
return val.toFixed(axis.tickDecimals) + " B";
}
-
Time series data
================
@@ -320,10 +364,11 @@ pretend trick described above. But you can fix up the timestamps by
adding the time zone offset, e.g. for UTC+0200 you would add 2 hours
to the UTC timestamp you got. Then it'll look right on the plot. Most
programming environments have some means of getting the timezone
-offset for a specific date.
+offset for a specific date (note that you need to get the offset for
+each individual timestamp to account for daylight savings).
-Once you've got the timestamps into the data and specified "time" as
-the axis mode, Flot will automatically generate relevant ticks and
+Once you've gotten the timestamps into the data and specified "time"
+as the axis mode, Flot will automatically generate relevant ticks and
format them. As always, you can tweak the ticks via the "ticks" option
- just remember that the values should be timestamps (numbers), not
Date objects.
@@ -331,36 +376,47 @@ Date objects.
Tick generation and formatting can also be controlled separately
through the following axis options:
- xaxis, yaxis: {
- minTickSize
- timeformat: null or format string
- monthNames: null or array of size 12 of strings
- }
+ 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:
xaxis: {
- mode: "time",
+ mode: "time"
timeformat: "%y/%m/%d"
}
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:
- monthName: ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]
+ 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.
+If needed, you can access it as $.plot.formatDate(date, formatstring,
+monthNames) or even replace it with another more advanced function
+from a date library if you're feeling adventurous.
If everything else fails, you can control the formatting by specifying
a custom tick formatter function as usual. Here's a simple example
@@ -387,51 +443,84 @@ been produced with two days in-between.
Customizing the data series
===========================
- lines, points, bars: {
- show: boolean
- lineWidth: number
- fill: boolean or number
- fillColor: color
- }
+ series: {
+ lines, points, bars: {
+ show: boolean
+ lineWidth: number
+ fill: boolean or number
+ fillColor: null or color/gradient
+ }
- points: {
- radius: number
- }
+ points: {
+ radius: number
+ }
- bars: {
- barWidth: number
- align: "left" or "center"
- }
+ bars: {
+ barWidth: number
+ align: "left" or "center"
+ horizontal: boolean
+ }
- colors: [ color1, color2, ... ]
+ lines: {
+ steps: boolean
+ }
- shadowSize: number
+ 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
-each data series. You can specify them independently of each other,
-and Flot will happily draw each of them in turn, e.g.
+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 (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.
+"lineWidth" is the thickness of the line or outline in pixels. You can
+set it to 0 to prevent a line or outline from being drawn; this will
+also hide the shadow.
"fill" is whether the shape should be filled. For lines, this produces
area graphs. You can use "fillColor" to specify the color of the fill.
If "fillColor" evaluates to false (default for everything except
-points), the fill color is auto-set to the color of the data series.
-You can adjust the opacity of the fill by setting fill to a number
-between 0 (fully transparent) and 1 (fully opaque).
+points which are filled with white), the fill color is auto-set to the
+color of the data series. You can adjust the opacity of the fill by
+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 (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. Note that this transforms the
+data by adding extra points.
-"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.
+"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
@@ -442,39 +531,42 @@ 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.
-
Customizing the grid
====================
grid: {
+ show: boolean
+ aboveData: boolean
color: color
- backgroundColor: color or null
+ backgroundColor: color/gradient or null
tickColor: color
labelMargin: number
markings: array of markings or (fn: axes -> array of markings)
borderWidth: number
+ borderColor: color or null
clickable: boolean
hoverable: boolean
autoHighlight: boolean
mouseActiveRadius: number
}
-The grid is the thing with the axes and a number of ticks. "color"
-is the color of the grid itself whereas "backgroundColor" specifies
-the background color inside the grid area. The default value of null
-means that the background is transparent. You should only need to set
-backgroundColor if you want the grid area to be a different color from the
-page color. Otherwise you might as well just set the background color
-of the page with CSS.
+The grid is the thing with the axes and a number of ticks. "color" is
+the color of the grid itself whereas "backgroundColor" specifies the
+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".
"borderWidth" is the width of the border around the plot. Set it to 0
-to disable the border.
+to disable the border. You can also set "borderColor" if you want the
+border to have a different color than the grid lines.
"markings" is used to draw simple lines and rectangular areas in the
background of the plot. You can either specify an array of ranges on
@@ -498,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:
@@ -541,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
@@ -552,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
@@ -566,70 +660,68 @@ and still activate it. If there are two or more points within this
radius, Flot chooses the closest item. For bars, the top-most bar
(from the latest specified data series) is chosen.
+If you want to disable interactivity for a specific data series, you
+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:
+Specifying gradients
+====================
- 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
- });
+A gradient is specified like this:
+ { colors: [ color1, color2, ... ] }
-Plot Methods
-------------
+For instance, you might specify a background on the grid going from
+black to gray like this:
-The Plot object returned from the plot function has some methods you
-can call:
+ grid: {
+ backgroundColor: { colors: ["#000", "#999"] }
+ }
- - clearSelection()
+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.
- Clear the selection rectangle.
+ { 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. For instance, for bars the following makes the bars
+gradually disappear, without outline:
- - setSelection(ranges, preventEvent)
+ 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.
- 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 } });
+Plot Methods
+------------
- 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.
-
+The Plot object returned from the plot function has some methods you
+can call:
- 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)
@@ -638,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()
@@ -656,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:
@@ -675,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()
@@ -698,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
new file mode 100644
index 0000000..ee48124
--- /dev/null
+++ b/FAQ.txt
@@ -0,0 +1,71 @@
+Frequently asked questions
+--------------------------
+
+Q: How much data can Flot cope with?
+
+A: Flot will happily draw everything you send to it so the answer
+depends on the browser. The excanvas emulation used for IE (built with
+VML) makes IE by far the slowest browser so be sure to test with that
+if IE users are in your target group.
+
+1000 points is not a problem, but as soon as you start having more
+points than the pixel width, you should probably start thinking about
+downsampling/aggregation as this is near the resolution limit of the
+chart anyway. If you downsample server-side, you also save bandwidth.
+
+
+Q: Flot isn't working when I'm using JSON data as source!
+
+A: Actually, Flot loves JSON data, you just got the format wrong.
+Double check that you're not inputting strings instead of numbers,
+like [["0", "-2.13"], ["5", "4.3"]]. This is most common mistake, and
+the error might not show up immediately because Javascript can do some
+conversion automatically.
+
+
+Q: Can I export the graph?
+
+A: This is a limitation of the canvas technology. There's a hook in
+the canvas object for getting an image out, but you won't get the tick
+labels. And it's not likely to be supported by IE. At this point, your
+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 (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?
+
+A: Yes, Flot supports it out of the box and it's easy! Just use jQuery
+instead of $, e.g. call jQuery.plot instead of $.plot and use
+jQuery(something) instead of $(something). As a convenience, you can
+put in a DOM element for the graph placeholder where the examples and
+the API documentation are using jQuery objects.
+
+Depending on how you include jQuery, you may have to add one line of
+code to prevent jQuery from overwriting functions from the other
+libraries, see the documentation in jQuery ("Using jQuery with other
+libraries") for details.
+
+
+Q: Flot doesn't work with [widget framework xyz]!
+
+A: The problem is most likely within the framework, or your use of the
+framework.
+
+The only non-standard thing used by Flot is the canvas tag; otherwise
+it is simply a series of absolute positioned divs within the
+placeholder tag you put in. If this is not working, it's probably
+because the framework you're using is doing something weird with the
+DOM. As a last resort, you might try replotting and see if it helps.
+
+If you find there's a specific thing we can do to Flot to help, feel
+free to submit a bug report. Otherwise, you're welcome to ask for help
+on the mailing list, but please don't submit a bug report to Flot -
+try the framework instead.
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 49bf82b..53281c5 100644
--- a/NEWS.txt
+++ b/NEWS.txt
@@ -1,3 +1,178 @@
+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
+ (request from Ronald Schouten and Steve Upton).
+
+- 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 or
+ through raw JSON from Ajax responses.
+
+- A new "plotselecting" event is now emitted while the user is making
+ a selection.
+
+- 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.
+
+- The built-in date formatter can now be accessed as
+ $.plot.formatDate(...) (suggestion by Matt Manela) and even
+ replaced.
+
+- Added "borderColor" option to the grid (patch from Amaury Chamayou
+ and patch from Mike R. Williamson).
+
+- Added support for gradient backgrounds for the grid, take a look at
+ the "setting options" example (based on patch from Amaury Chamayou,
+ issue 90).
+
+- Gradient bars (suggestion by stefpet).
+
+- Added a "plotunselected" event which is triggered when the selection
+ is removed, see "selection" example (suggestion by Meda Ugo);
+
+- The option legend.margin can now specify horizontal and vertical
+ margins independently (suggestion by someone who's annoyed).
+
+- Data passed into Flot is now copied to a new canonical format to
+ enable further processing before it hits the drawing routines. As a
+ side-effect, this should make Flot more robust in the face of bad
+ data (and fixes issue 112).
+
+- Step-wise charting: line charts have a new option "steps" that when
+ set to true connects the points with horizontal/vertical steps
+ instead of diagonal lines.
+
+- The legend labelFormatter now passes the series in addition to just
+ the label (suggestion by Vincent Lemeltier).
+
+- Horizontal bars (based on patch by Jason LeBrun).
+
+- Support for partial bars by specifying a third coordinate, i.e. they
+ 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
+ analysis by Joshua Varner).
+- Fix auto-adjustment code when setting min to 0 for an axis where the
+ dataset is completely flat on that axis (report by chovy).
+- Fixed a bug with passing in data from getData to setData when the
+ secondary axes are used (issue 65, reported by nperelman).
+- Fixed so that it is possible to turn lines off when no other chart
+ type is shown (based on problem reported by Glenn Vanderburg), and
+ fixed so that setting lineWidth to 0 also hides the shadow (based on
+ problem reported by Sergio Nunes).
+- Updated mousemove position expression to the latest from jQuery (bug
+ reported by meyuchas).
+- 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
+ (reported by Khurram).
+- Fixed a bug with returning y2 values in the selection event (fix
+ by exists, issue 75).
+- Only set position relative on placeholder if it hasn't already a
+ position different from static (reported by kyberneticist, issue 95).
+- Don't round markings to prevent sub-pixel problems (reported by Dan
+ Lipsitt).
+- Make the grid border act similarly to a regular CSS border, i.e.
+ prevent it from overlapping the plot itself. This also fixes a
+ problem with anti-aliasing when the width is 1 pixel (reported by
+ Anthony Ettinger).
+- Imported version 3 of excanvas and fixed two issues with the newer
+ version. Hopefully, this will make Flot work with IE8 (nudge by
+ Fabien Menager, further analysis by Booink, issue 133).
+- Changed the shadow code for lines to hopefully look a bit better
+ 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:
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->
@@ -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 3f7be1c..0000000
--- a/TODO
+++ /dev/null
@@ -1,36 +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
-
-hi-low bars
-
-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 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Flot Examples</title>
+ <link href="layout.css" rel="stylesheet" type="text/css"></link>
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
+ <script language="javascript" type="text/javascript" src="../jquery.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+ </head>
+ <body>
+ <h1>Flot Examples</h1>
+
+ <div id="placeholder" style="width:600px;height:300px;"></div>
+
+ <p>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below.</p>
+
+ <p>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.</p>
+
+ <p>
+ <input class="fetchSeries" type="button" value="First dataset"> -
+ <a href="data-eu-gdp-growth.json">data</a> -
+ <span></span>
+ </p>
+
+ <p>
+ <input class="fetchSeries" type="button" value="Second dataset"> -
+ <a href="data-japan-gdp-growth.json">data</a> -
+ <span></span>
+ </p>
+
+ <p>
+ <input class="fetchSeries" type="button" value="Third dataset"> -
+ <a href="data-usa-gdp-growth.json">data</a> -
+ <span></span>
+ </p>
+
+ <p>If you combine AJAX with setTimeout, you can poll the server
+ for new data.</p>
+
+ <p>
+ <input class="dataUpdate" type="button" value="Poll for data">
+ </p>
+
+<script id="source" language="javascript" type="text/javascript">
+$(function () {
+ var options = {
+ lines: { show: true },
+ points: { show: true },
+ xaxis: { tickDecimals: 0, tickSize: 1 }
+ };
+ var data = [];
+ var placeholder = $("#placeholder");
+
+ $.plot(placeholder, data, options);
+
+
+ // fetch one series, adding to what we got
+ var alreadyFetched = {};
+
+ $("input.fetchSeries").click(function () {
+ var button = $(this);
+
+ // find the URL in the link right next to us
+ var dataurl = button.siblings('a').attr('href');
+
+ // then fetch the data with jQuery
+ function onDataReceived(series) {
+ // extract the first coordinate pair so you can see that
+ // data is now an ordinary Javascript object
+ var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')';
+
+ button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate);
+
+ // let's add it to our current data
+ if (!alreadyFetched[series.label]) {
+ alreadyFetched[series.label] = true;
+ data.push(series);
+ }
+
+ // and plot all we got
+ $.plot(placeholder, data, options);
+ }
+
+ $.ajax({
+ url: dataurl,
+ method: 'GET',
+ dataType: 'json',
+ success: onDataReceived
+ });
+ });
+
+
+ // initiate a recurring data update
+ $("input.dataUpdate").click(function () {
+ // reset data
+ data = [];
+ alreadyFetched = {};
+
+ $.plot(placeholder, data, options);
+
+ var iteration = 0;
+
+ function fetchData() {
+ ++iteration;
+
+ function onDataReceived(series) {
+ // we get all the data in one go, if we only got partial
+ // data, we could merge it with what we already got
+ data = [ series ];
+
+ $.plot($("#placeholder"), data, options);
+ }
+
+ $.ajax({
+ // usually, we'll just call the same URL, a script
+ // connected to a database, but in this case we only
+ // have static example files so we need to modify the
+ // URL
+ url: "data-eu-gdp-growth-" + iteration + ".json",
+ method: 'GET',
+ dataType: 'json',
+ success: onDataReceived
+ });
+
+ if (iteration < 5)
+ setTimeout(fetchData, 1000);
+ else {
+ data = [];
+ alreadyFetched = {};
+ }
+ }
+
+ setTimeout(fetchData, 1000);
+ });
+});
+</script>
+
+ </body>
+</html>
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 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Flot Examples</title>
+ <link href="layout.css" rel="stylesheet" type="text/css"></link>
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
+ <script language="javascript" type="text/javascript" src="../jquery.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+ </head>
+ <body>
+ <h1>Flot Examples</h1>
+
+ <div id="placeholder" style="width:600px;height:300px;"></div>
+
+ <p>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.</p>
+
+<script id="source" language="javascript" type="text/javascript">
+$(function () {
+ // generate a dataset
+ var d1 = [];
+ for (var i = 0; i < 20; ++i)
+ d1.push([i, Math.sin(i)]);
+
+ var data = [{ data: d1, label: "Pressure", color: "#333" }];
+
+ // setup background areas
+ var markings = [
+ { color: '#f6f6f6', yaxis: { from: 1 } },
+ { color: '#f6f6f6', yaxis: { to: -1 } },
+ { color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } },
+ { color: '#000', lineWidth: 1, xaxis: { from: 8, to: 8 } }
+ ];
+
+ var placeholder = $("#placeholder");
+
+ // plot it
+ var plot = $.plot(placeholder, data, {
+ bars: { show: true, barWidth: 0.5, fill: 0.9 },
+ xaxis: { ticks: [], autoscaleMargin: 0.02 },
+ yaxis: { min: -2, max: 2 },
+ grid: { markings: markings }
+ });
+
+ // add labels
+ var o;
+
+ o = plot.pointOffset({ x: 2, y: -1.2});
+ // we just append it to the placeholder which Flot already uses
+ // for positioning
+ placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Warming up</div>');
+
+ o = plot.pointOffset({ x: 8, y: -1.2});
+ placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Actual measurements</div>');
+
+ // draw a little arrow on top of the last label to demonstrate
+ // canvas drawing
+ var ctx = plot.getCanvas().getContext("2d");
+ ctx.beginPath();
+ o.left += 4;
+ ctx.moveTo(o.left, o.top);
+ ctx.lineTo(o.left, o.top - 10);
+ ctx.lineTo(o.left + 10, o.top - 5);
+ ctx.lineTo(o.left, o.top);
+ ctx.fillStyle = "#000";
+ ctx.fill();
+});
+</script>
+
+ </body>
+</html>
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/basic.html b/examples/basic.html
index afd7ac1..fde8def 100644
--- a/examples/basic.html
+++ b/examples/basic.html
@@ -4,7 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
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 d97fa8a..093505d 100644
--- a/examples/dual-axis.html
+++ b/examples/dual-axis.html
@@ -4,7 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
@@ -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/graph-types.html b/examples/graph-types.html
index 64aa0e9..b3c3818 100644
--- a/examples/graph-types.html
+++ b/examples/graph-types.html
@@ -4,7 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
@@ -36,7 +36,11 @@ $(function () {
var d5 = [];
for (var i = 0; i < 14; i += 0.5)
d5.push([i, Math.sqrt(i)]);
-
+
+ var d6 = [];
+ for (var i = 0; i < 14; i += 0.5 + Math.random())
+ d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]);
+
$.plot($("#placeholder"), [
{
data: d1,
@@ -58,6 +62,10 @@ $(function () {
data: d5,
lines: { show: true },
points: { show: true }
+ },
+ {
+ data: d6,
+ lines: { show: true, steps: true }
}
]);
});
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 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Flot Examples</title>
+ <link href="layout.css" rel="stylesheet" type="text/css"></link>
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
+ <script language="javascript" type="text/javascript" src="../jquery.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.image.js"></script>
+ </head>
+ <body>
+ <h1>Flot Examples</h1>
+
+ <div id="placeholder" style="width:400px;height:400px;"></div>
+
+ <p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>
+
+ <p>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.</p>
+
+ <p>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.</p>
+
+<script id="source" language="javascript" type="text/javascript">
+$(function () {
+ var data = [ [ ["hs-2004-27-a-large_web.jpg", -10, -10, 10, 10] ] ];
+ var options = {
+ series: { images: { show: true } },
+ xaxis: { min: -8, max: 4 },
+ yaxis: { min: -8, max: 4 }
+ };
+
+ $.plot.image.loadDataImages(data, options, function () {
+ $.plot($("#placeholder"), data, options);
+ });
+});
+</script>
+
+ </body>
+</html>
diff --git a/examples/index.html b/examples/index.html
index 36ae0a1..789f941 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -4,23 +4,40 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
- <p>Here are some examples for <a href="http://code.google.com/p/flot/">Flot</a>:</p>
+ <p>Here are some examples for <a href="http://code.google.com/p/flot/">Flot</a>, the Javascript charting library for jQuery:</p>
<ul>
<li><a href="basic.html">Basic example</a></li>
- <li><a href="graph-types.html">Different graph types</a> and <a href="setting-options.html">setting various options</a></li>
+ <li><a href="graph-types.html">Different graph types</a></li>
+ <li><a href="setting-options.html">Setting various options</a> and <a href="annotating.html">annotating a chart</a></li>
+ <li><a href="ajax.html">Updating graphs with AJAX</a></li>
+ </ul>
+
+ <p>Being interactive:</p>
+
+ <ul>
<li><a href="turning-series.html">Turning series on/off</a></li>
- <li><a href="selection.html">Selection support and zooming</a> and <a href="zooming.html">zooming with overview</a></li>
- <li><a href="time.html">Plotting time series</a> and <a href="visitors.html">visitors per day with zooming and weekends</a></li>
+ <li><a href="selection.html">Rectangular selection support and zooming</a> and <a href="zooming.html">zooming with overview</a></li> (both with selection plugin)
+ <li><a href="interacting.html">Interacting with the data points</a></li>
+ <li><a href="navigate.html">Panning and zooming</a> (with navigation plugin)</li>
+ </ul>
+
+ <p>Some more esoteric features:</p>
+
+ <ul>
+ <li><a href="time.html">Plotting time series</a> and <a href="visitors.html">visitors per day with zooming and weekends</a> (with selection plugin)</li>
<li><a href="dual-axis.html">Dual axis support</a></li>
- <li><a href="interacting.html">Interacting with the data</a></li>
+ <li><a href="thresholding.html">Thresholding the data</a> (with threshold plugin)</li>
+ <li><a href="stacking.html">Stacked charts</a> (with stacking plugin)</li>
+ <li><a href="tracking.html">Tracking curves with crosshair</a> (with crosshair plugin)</li>
+ <li><a href="image.html">Plotting prerendered images</a> (with image plugin)</li>
</ul>
</body>
</html>
diff --git a/examples/interacting.html b/examples/interacting.html
index b5c8003..fbf0390 100644
--- a/examples/interacting.html
+++ b/examples/interacting.html
@@ -4,7 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
@@ -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 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Flot Examples</title>
+ <link href="layout.css" rel="stylesheet" type="text/css"></link>
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
+ <script language="javascript" type="text/javascript" src="../jquery.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script>
+ <style>
+ #placeholder .button {
+ position: absolute;
+ cursor: pointer;
+ }
+ #placeholder div.button {
+ font-size: smaller;
+ color: #999;
+ background-color: #eee;
+ padding: 2px;
+ }
+ .message {
+ padding-left: 50px;
+ font-size: smaller;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Flot Examples</h1>
+
+ <div id="placeholder" style="width:600px;height:300px;"></div>
+
+ <p class="message"></p>
+
+ <p>With the navigate plugin it is easy to add panning and zooming.
+ Drag to pan, double click to zoom (or use the mouse scrollwheel).</p>
+
+ <p>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.</p>
+
+
+<script id="source" language="javascript" type="text/javascript">
+$(function () {
+ // generate data set from a parametric function with a fractal
+ // look
+ function sumf(f, t, m) {
+ var res = 0;
+ for (var i = 1; i < m; ++i)
+ res += f(i * i * t) / (i * i);
+ return res;
+ }
+
+ var d1 = [];
+ for (var t = 0; t <= 2 * Math.PI; t += 0.01)
+ d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]);
+ var data = [ d1 ];
+
+
+ var placeholder = $("#placeholder");
+ var options = {
+ series: { lines: { show: true }, shadowSize: 0 },
+ xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
+ yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
+ zoom: {
+ interactive: true
+ },
+ pan: {
+ interactive: true
+ }
+ };
+
+ var plot = $.plot(placeholder, data, options);
+
+ // show pan/zoom messages to illustrate events
+ placeholder.bind('plotpan', function (event, plot) {
+ var axes = plot.getAxes();
+ $(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2)
+ + " – " + axes.xaxis.max.toFixed(2)
+ + " and y: " + axes.yaxis.min.toFixed(2)
+ + " – " + axes.yaxis.max.toFixed(2));
+ });
+
+ placeholder.bind('plotzoom', function (event, plot) {
+ var axes = plot.getAxes();
+ $(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2)
+ + " – " + axes.xaxis.max.toFixed(2)
+ + " and y: " + axes.yaxis.min.toFixed(2)
+ + " – " + axes.yaxis.max.toFixed(2));
+ });
+
+ // add zoom out button
+ $('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
+ e.preventDefault();
+ plot.zoomOut();
+ });
+
+ // and add panning buttons
+
+ // little helper for taking the repetitive work out of placing
+ // panning arrows
+ function addArrow(dir, right, top, offset) {
+ $('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) {
+ e.preventDefault();
+ plot.pan(offset);
+ });
+ }
+
+ addArrow('left', 55, 60, { left: -100 });
+ addArrow('right', 25, 60, { left: 100 });
+ addArrow('up', 40, 45, { top: -100 });
+ addArrow('down', 40, 75, { top: 100 });
+});
+</script>
+
+ </body>
+</html>
diff --git a/examples/selection.html b/examples/selection.html
index 4a745d7..8b67a2b 100644
--- a/examples/selection.html
+++ b/examples/selection.html
@@ -4,9 +4,10 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
@@ -15,23 +16,23 @@
<p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <a href="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>
- <p>Flot supports selections. You can enable
- rectangular selection
+ <p>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.</p>
<p>You selected: <span id="selection"></span></p>
- <p>The plot command returns a Plot object you can use to control
- the selection. Try clicking the buttons below.</p>
+ <p>The plot command returns a plot object you can use to control
+ the selection. Click the buttons below.</p>
<p><input id="clearSelection" type="button" value="Clear selection" />
<input id="setSelection" type="button" value="Select year 1994" /></p>
<p>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.</p>
<p><input id="zoom" type="checkbox">Zoom to selection.</input></p>
@@ -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 },
@@ -90,6 +93,10 @@ $(function () {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
}));
});
+
+ placeholder.bind("plotunselected", function (event) {
+ $("#selection").text("");
+ });
var plot = $.plot(placeholder, data, options);
diff --git a/examples/setting-options.html b/examples/setting-options.html
index 31dd798..6eb6ee9 100644
--- a/examples/setting-options.html
+++ b/examples/setting-options.html
@@ -4,7 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
@@ -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"]]
},
@@ -53,7 +55,7 @@ $(function () {
max: 2
},
grid: {
- backgroundColor: "#fffaff"
+ backgroundColor: { colors: ["#fff", "#eee"] }
}
});
});
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 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Flot Examples</title>
+ <link href="layout.css" rel="stylesheet" type="text/css"></link>
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
+ <script language="javascript" type="text/javascript" src="../jquery.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.stack.js"></script>
+ </head>
+ <body>
+ <h1>Flot Examples</h1>
+
+ <div id="placeholder" style="width:600px;height:300px;"></div>
+
+ <p>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.</p>
+
+ <p class="stackControls">
+ <input type="button" value="With stacking">
+ <input type="button" value="Without stacking">
+ </p>
+
+ <p class="graphControls">
+ <input type="button" value="Bars">
+ <input type="button" value="Lines">
+ <input type="button" value="Lines with steps">
+ </p>
+
+<script id="source">
+$(function () {
+ var d1 = [];
+ for (var i = 0; i <= 10; i += 1)
+ d1.push([i, parseInt(Math.random() * 30)]);
+
+ var d2 = [];
+ for (var i = 0; i <= 10; i += 1)
+ d2.push([i, parseInt(Math.random() * 30)]);
+
+ var d3 = [];
+ for (var i = 0; i <= 10; i += 1)
+ d3.push([i, parseInt(Math.random() * 30)]);
+
+ var stack = 0, bars = true, lines = false, steps = false;
+
+ function plotWithOptions() {
+ $.plot($("#placeholder"), [ d1, d2, d3 ], {
+ series: {
+ stack: stack,
+ lines: { show: lines, steps: steps },
+ bars: { show: bars, barWidth: 0.6 }
+ }
+ });
+ }
+
+ plotWithOptions();
+
+ $(".stackControls input").click(function (e) {
+ e.preventDefault();
+ stack = $(this).val() == "With stacking" ? true : null;
+ plotWithOptions();
+ });
+ $(".graphControls input").click(function (e) {
+ e.preventDefault();
+ bars = $(this).val().indexOf("Bars") != -1;
+ lines = $(this).val().indexOf("Lines") != -1;
+ steps = $(this).val().indexOf("steps") != -1;
+ plotWithOptions();
+ });
+});
+</script>
+
+ </body>
+</html>
diff --git a/examples/thresholding.html b/examples/thresholding.html
new file mode 100644
index 0000000..10b5b2a
--- /dev/null
+++ b/examples/thresholding.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Flot Examples</title>
+ <link href="layout.css" rel="stylesheet" type="text/css"></link>
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
+ <script language="javascript" type="text/javascript" src="../jquery.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.threshold.js"></script>
+ </head>
+ <body>
+ <h1>Flot Examples</h1>
+
+ <div id="placeholder" style="width:600px;height:300px;"></div>
+
+ <p>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.</p>
+
+ <p class="controls">
+ <input type="button" value="Threshold at 5">
+ <input type="button" value="Threshold at 0">
+ <input type="button" value="Threshold at -2.5">
+ </p>
+
+<script id="source" language="javascript" type="text/javascript">
+$(function () {
+ var d1 = [];
+ for (var i = 0; i <= 60; i += 1)
+ d1.push([i, parseInt(Math.random() * 30 - 10)]);
+
+ function plotWithOptions(t) {
+ $.plot($("#placeholder"), [ {
+ data: d1,
+ color: "rgb(30, 180, 20)",
+ threshold: { below: t, color: "rgb(200, 20, 30)" },
+ lines: { steps: true }
+ } ]);
+ }
+
+ plotWithOptions(0);
+
+ $(".controls input").click(function (e) {
+ e.preventDefault();
+ var t = parseFloat($(this).val().replace('Threshold at ', ''));
+ plotWithOptions(t);
+ });
+});
+</script>
+
+ </body>
+</html>
diff --git a/examples/time.html b/examples/time.html
index f810a28..5f43b88 100644
--- a/examples/time.html
+++ b/examples/time.html
@@ -4,7 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
@@ -34,7 +34,7 @@
to the timestamps or simply pretend that the data was produced
in UTC instead of your local time zone.</p>
-<script id="source" language="javascript" type="text/javascript">
+<script id="source">
$(function () {
var d = [[-373597200000, 315.71], [-370918800000, 317.45], [-368326800000, 317.50], [-363056400000, 315.86], [-360378000000, 314.93], [-357699600000, 313.19], [-352429200000, 313.34], [-349837200000, 314.67], [-347158800000, 315.58], [-344480400000, 316.47], [-342061200000, 316.65], [-339382800000, 317.71], [-336790800000, 318.29], [-334112400000, 318.16], [-331520400000, 316.55], [-328842000000, 314.80], [-326163600000, 313.84], [-323571600000, 313.34], [-320893200000, 314.81], [-318301200000, 315.59], [-315622800000, 316.43], [-312944400000, 316.97], [-310438800000, 317.58], [-307760400000, 319.03], [-305168400000, 320.03], [-302490000000, 319.59], [-299898000000, 318.18], [-297219600000, 315.91], [-294541200000, 314.16], [-291949200000, 313.83], [-289270800000, 315.00], [-286678800000, 316.19], [-284000400000, 316.89], [-281322000000, 317.70], [-278902800000, 318.54], [-276224400000, 319.48], [-273632400000, 320.58], [-270954000000, 319.78], [-268362000000, 318.58], [-265683600000, 316.79], [-263005200000, 314.99], [-260413200000, 315.31], [-257734800000, 316.10], [-255142800000, 317.01], [-252464400000, 317.94], [-249786000000, 318.56], [-247366800000, 319.69], [-244688400000, 320.58], [-242096400000, 321.01], [-239418000000, 320.61], [-236826000000, 319.61], [-234147600000, 317.40], [-231469200000, 316.26], [-228877200000, 315.42], [-226198800000, 316.69], [-223606800000, 317.69], [-220928400000, 318.74], [-218250000000, 319.08], [-215830800000, 319.86], [-213152400000, 321.39], [-210560400000, 322.24], [-207882000000, 321.47], [-205290000000, 319.74], [-202611600000, 317.77], [-199933200000, 316.21], [-197341200000, 315.99], [-194662800000, 317.07], [-192070800000, 318.36], [-189392400000, 319.57], [-178938000000, 322.23], [-176259600000, 321.89], [-173667600000, 320.44], [-170989200000, 318.70], [-168310800000, 316.70], [-165718800000, 316.87], [-163040400000, 317.68], [-160448400000, 318.71], [-157770000000, 319.44], [-155091600000, 320.44], [-152672400000, 320.89], [-149994000000, 322.13], [-147402000000, 322.16], [-144723600000, 321.87], [-142131600000, 321.21], [-139453200000, 318.87], [-136774800000, 317.81], [-134182800000, 317.30], [-131504400000, 318.87], [-128912400000, 319.42], [-126234000000, 320.62], [-123555600000, 321.59], [-121136400000, 322.39], [-118458000000, 323.70], [-115866000000, 324.07], [-113187600000, 323.75], [-110595600000, 322.40], [-107917200000, 320.37], [-105238800000, 318.64], [-102646800000, 318.10], [-99968400000, 319.79], [-97376400000, 321.03], [-94698000000, 322.33], [-92019600000, 322.50], [-89600400000, 323.04], [-86922000000, 324.42], [-84330000000, 325.00], [-81651600000, 324.09], [-79059600000, 322.55], [-76381200000, 320.92], [-73702800000, 319.26], [-71110800000, 319.39], [-68432400000, 320.72], [-65840400000, 321.96], [-63162000000, 322.57], [-60483600000, 323.15], [-57978000000, 323.89], [-55299600000, 325.02], [-52707600000, 325.57], [-50029200000, 325.36], [-47437200000, 324.14], [-44758800000, 322.11], [-42080400000, 320.33], [-39488400000, 320.25], [-36810000000, 321.32], [-34218000000, 322.90], [-31539600000, 324.00], [-28861200000, 324.42], [-26442000000, 325.64], [-23763600000, 326.66], [-21171600000, 327.38], [-18493200000, 326.70], [-15901200000, 325.89], [-13222800000, 323.67], [-10544400000, 322.38], [-7952400000, 321.78], [-5274000000, 322.85], [-2682000000, 324.12], [-3600000, 325.06], [2674800000, 325.98], [5094000000, 326.93], [7772400000, 328.13], [10364400000, 328.07], [13042800000, 327.66], [15634800000, 326.35], [18313200000, 324.69], [20991600000, 323.10], [23583600000, 323.07], [26262000000, 324.01], [28854000000, 325.13], [31532400000, 326.17], [34210800000, 326.68], [36630000000, 327.18], [39308400000, 327.78], [41900400000, 328.92], [44578800000, 328.57], [47170800000, 327.37], [49849200000, 325.43], [52527600000, 323.36], [55119600000, 323.56], [57798000000, 324.80], [60390000000, 326.01], [63068400000, 326.77], [65746800000, 327.63], [68252400000, 327.75], [70930800000, 329.72], [73522800000, 330.07], [76201200000, 329.09], [78793200000, 328.05], [81471600000, 326.32], [84150000000, 324.84], [86742000000, 325.20], [89420400000, 326.50], [92012400000, 327.55], [94690800000, 328.54], [97369200000, 329.56], [99788400000, 330.30], [102466800000, 331.50], [105058800000, 332.48], [107737200000, 332.07], [110329200000, 330.87], [113007600000, 329.31], [115686000000, 327.51], [118278000000, 327.18], [120956400000, 328.16], [123548400000, 328.64], [126226800000, 329.35], [128905200000, 330.71], [131324400000, 331.48], [134002800000, 332.65], [136594800000, 333.16], [139273200000, 332.06], [141865200000, 330.99], [144543600000, 329.17], [147222000000, 327.41], [149814000000, 327.20], [152492400000, 328.33], [155084400000, 329.50], [157762800000, 330.68], [160441200000, 331.41], [162860400000, 331.85], [165538800000, 333.29], [168130800000, 333.91], [170809200000, 333.40], [173401200000, 331.78], [176079600000, 329.88], [178758000000, 328.57], [181350000000, 328.46], [184028400000, 329.26], [189298800000, 331.71], [191977200000, 332.76], [194482800000, 333.48], [197161200000, 334.78], [199753200000, 334.78], [202431600000, 334.17], [205023600000, 332.78], [207702000000, 330.64], [210380400000, 328.95], [212972400000, 328.77], [215650800000, 330.23], [218242800000, 331.69], [220921200000, 332.70], [223599600000, 333.24], [226018800000, 334.96], [228697200000, 336.04], [231289200000, 336.82], [233967600000, 336.13], [236559600000, 334.73], [239238000000, 332.52], [241916400000, 331.19], [244508400000, 331.19], [247186800000, 332.35], [249778800000, 333.47], [252457200000, 335.11], [255135600000, 335.26], [257554800000, 336.60], [260233200000, 337.77], [262825200000, 338.00], [265503600000, 337.99], [268095600000, 336.48], [270774000000, 334.37], [273452400000, 332.27], [276044400000, 332.41], [278722800000, 333.76], [281314800000, 334.83], [283993200000, 336.21], [286671600000, 336.64], [289090800000, 338.12], [291769200000, 339.02], [294361200000, 339.02], [297039600000, 339.20], [299631600000, 337.58], [302310000000, 335.55], [304988400000, 333.89], [307580400000, 334.14], [310258800000, 335.26], [312850800000, 336.71], [315529200000, 337.81], [318207600000, 338.29], [320713200000, 340.04], [323391600000, 340.86], [325980000000, 341.47], [328658400000, 341.26], [331250400000, 339.29], [333928800000, 337.60], [336607200000, 336.12], [339202800000, 336.08], [341881200000, 337.22], [344473200000, 338.34], [347151600000, 339.36], [349830000000, 340.51], [352249200000, 341.57], [354924000000, 342.56], [357516000000, 343.01], [360194400000, 342.47], [362786400000, 340.71], [365464800000, 338.52], [368143200000, 336.96], [370738800000, 337.13], [373417200000, 338.58], [376009200000, 339.89], [378687600000, 340.93], [381366000000, 341.69], [383785200000, 342.69], [389052000000, 344.30], [391730400000, 343.43], [394322400000, 341.88], [397000800000, 339.89], [399679200000, 337.95], [402274800000, 338.10], [404953200000, 339.27], [407545200000, 340.67], [410223600000, 341.42], [412902000000, 342.68], [415321200000, 343.46], [417996000000, 345.10], [420588000000, 345.76], [423266400000, 345.36], [425858400000, 343.91], [428536800000, 342.05], [431215200000, 340.00], [433810800000, 340.12], [436489200000, 341.33], [439081200000, 342.94], [441759600000, 343.87], [444438000000, 344.60], [446943600000, 345.20], [452210400000, 347.36], [454888800000, 346.74], [457480800000, 345.41], [460159200000, 343.01], [462837600000, 341.23], [465433200000, 341.52], [468111600000, 342.86], [470703600000, 344.41], [473382000000, 345.09], [476060400000, 345.89], [478479600000, 347.49], [481154400000, 348.00], [483746400000, 348.75], [486424800000, 348.19], [489016800000, 346.54], [491695200000, 344.63], [494373600000, 343.03], [496969200000, 342.92], [499647600000, 344.24], [502239600000, 345.62], [504918000000, 346.43], [507596400000, 346.94], [510015600000, 347.88], [512690400000, 349.57], [515282400000, 350.35], [517960800000, 349.72], [520552800000, 347.78], [523231200000, 345.86], [525909600000, 344.84], [528505200000, 344.32], [531183600000, 345.67], [533775600000, 346.88], [536454000000, 348.19], [539132400000, 348.55], [541551600000, 349.52], [544226400000, 351.12], [546818400000, 351.84], [549496800000, 351.49], [552088800000, 349.82], [554767200000, 347.63], [557445600000, 346.38], [560041200000, 346.49], [562719600000, 347.75], [565311600000, 349.03], [567990000000, 350.20], [570668400000, 351.61], [573174000000, 352.22], [575848800000, 353.53], [578440800000, 354.14], [581119200000, 353.62], [583711200000, 352.53], [586389600000, 350.41], [589068000000, 348.84], [591663600000, 348.94], [594342000000, 350.04], [596934000000, 351.29], [599612400000, 352.72], [602290800000, 353.10], [604710000000, 353.65], [607384800000, 355.43], [609976800000, 355.70], [612655200000, 355.11], [615247200000, 353.79], [617925600000, 351.42], [620604000000, 349.81], [623199600000, 350.11], [625878000000, 351.26], [628470000000, 352.63], [631148400000, 353.64], [633826800000, 354.72], [636246000000, 355.49], [638920800000, 356.09], [641512800000, 357.08], [644191200000, 356.11], [646783200000, 354.70], [649461600000, 352.68], [652140000000, 351.05], [654735600000, 351.36], [657414000000, 352.81], [660006000000, 354.22], [662684400000, 354.85], [665362800000, 355.66], [667782000000, 357.04], [670456800000, 358.40], [673048800000, 359.00], [675727200000, 357.99], [678319200000, 356.00], [680997600000, 353.78], [683676000000, 352.20], [686271600000, 352.22], [688950000000, 353.70], [691542000000, 354.98], [694220400000, 356.09], [696898800000, 356.85], [699404400000, 357.73], [702079200000, 358.91], [704671200000, 359.45], [707349600000, 359.19], [709941600000, 356.72], [712620000000, 354.79], [715298400000, 352.79], [717894000000, 353.20], [720572400000, 354.15], [723164400000, 355.39], [725842800000, 356.77], [728521200000, 357.17], [730940400000, 358.26], [733615200000, 359.16], [736207200000, 360.07], [738885600000, 359.41], [741477600000, 357.44], [744156000000, 355.30], [746834400000, 353.87], [749430000000, 354.04], [752108400000, 355.27], [754700400000, 356.70], [757378800000, 358.00], [760057200000, 358.81], [762476400000, 359.68], [765151200000, 361.13], [767743200000, 361.48], [770421600000, 360.60], [773013600000, 359.20], [775692000000, 357.23], [778370400000, 355.42], [780966000000, 355.89], [783644400000, 357.41], [786236400000, 358.74], [788914800000, 359.73], [791593200000, 360.61], [794012400000, 361.58], [796687200000, 363.05], [799279200000, 363.62], [801957600000, 363.03], [804549600000, 361.55], [807228000000, 358.94], [809906400000, 357.93], [812502000000, 357.80], [815180400000, 359.22], [817772400000, 360.44], [820450800000, 361.83], [823129200000, 362.95], [825634800000, 363.91], [828309600000, 364.28], [830901600000, 364.94], [833580000000, 364.70], [836172000000, 363.31], [838850400000, 361.15], [841528800000, 359.40], [844120800000, 359.34], [846802800000, 360.62], [849394800000, 361.96], [852073200000, 362.81], [854751600000, 363.87], [857170800000, 364.25], [859845600000, 366.02], [862437600000, 366.46], [865116000000, 365.32], [867708000000, 364.07], [870386400000, 361.95], [873064800000, 360.06], [875656800000, 360.49], [878338800000, 362.19], [880930800000, 364.12], [883609200000, 364.99], [886287600000, 365.82], [888706800000, 366.95], [891381600000, 368.42], [893973600000, 369.33], [896652000000, 368.78], [899244000000, 367.59], [901922400000, 365.84], [904600800000, 363.83], [907192800000, 364.18], [909874800000, 365.34], [912466800000, 366.93], [915145200000, 367.94], [917823600000, 368.82], [920242800000, 369.46], [922917600000, 370.77], [925509600000, 370.66], [928188000000, 370.10], [930780000000, 369.08], [933458400000, 366.66], [936136800000, 364.60], [938728800000, 365.17], [941410800000, 366.51], [944002800000, 367.89], [946681200000, 369.04], [949359600000, 369.35], [951865200000, 370.38], [954540000000, 371.63], [957132000000, 371.32], [959810400000, 371.53], [962402400000, 369.75], [965080800000, 368.23], [967759200000, 366.87], [970351200000, 366.94], [973033200000, 368.27], [975625200000, 369.64], [978303600000, 370.46], [980982000000, 371.44], [983401200000, 372.37], [986076000000, 373.33], [988668000000, 373.77], [991346400000, 373.09], [993938400000, 371.51], [996616800000, 369.55], [999295200000, 368.12], [1001887200000, 368.38], [1004569200000, 369.66], [1007161200000, 371.11], [1009839600000, 372.36], [1012518000000, 373.09], [1014937200000, 373.81], [1017612000000, 374.93], [1020204000000, 375.58], [1022882400000, 375.44], [1025474400000, 373.86], [1028152800000, 371.77], [1030831200000, 370.73], [1033423200000, 370.50], [1036105200000, 372.18], [1038697200000, 373.70], [1041375600000, 374.92], [1044054000000, 375.62], [1046473200000, 376.51], [1049148000000, 377.75], [1051740000000, 378.54], [1054418400000, 378.20], [1057010400000, 376.68], [1059688800000, 374.43], [1062367200000, 373.11], [1064959200000, 373.10], [1067641200000, 374.77], [1070233200000, 375.97], [1072911600000, 377.03], [1075590000000, 377.87], [1078095600000, 378.88], [1080770400000, 380.42], [1083362400000, 380.62], [1086040800000, 379.70], [1088632800000, 377.43], [1091311200000, 376.32], [1093989600000, 374.19], [1096581600000, 374.47], [1099263600000, 376.15], [1101855600000, 377.51], [1104534000000, 378.43], [1107212400000, 379.70], [1109631600000, 380.92], [1112306400000, 382.18], [1114898400000, 382.45], [1117576800000, 382.14], [1120168800000, 380.60], [1122847200000, 378.64], [1125525600000, 376.73], [1128117600000, 376.84], [1130799600000, 378.29], [1133391600000, 380.06], [1136070000000, 381.40], [1138748400000, 382.20], [1141167600000, 382.66], [1143842400000, 384.69], [1146434400000, 384.94], [1149112800000, 384.01], [1151704800000, 382.14], [1154383200000, 380.31], [1157061600000, 378.81], [1159653600000, 379.03], [1162335600000, 380.17], [1164927600000, 381.85], [1167606000000, 382.94], [1170284400000, 383.86], [1172703600000, 384.49], [1175378400000, 386.37], [1177970400000, 386.54], [1180648800000, 385.98], [1183240800000, 384.36], [1185919200000, 381.85], [1188597600000, 380.74], [1191189600000, 381.15], [1193871600000, 382.38], [1196463600000, 383.94], [1199142000000, 385.44]];
@@ -45,20 +45,24 @@ $(function () {
});
$("#nineties").click(function () {
- $.plot($("#placeholder"), [d], { xaxis: {
- mode: "time",
- min: (new Date("1990/01/01")).getTime(),
- max: (new Date("2000/01/01")).getTime()
- } });
+ $.plot($("#placeholder"), [d], {
+ xaxis: {
+ mode: "time",
+ min: (new Date("1990/01/01")).getTime(),
+ max: (new Date("2000/01/01")).getTime()
+ }
+ });
});
$("#ninetynine").click(function () {
- $.plot($("#placeholder"), [d], { xaxis: {
- mode: "time",
- minTickSize: [1, "month"],
- min: (new Date("1999/01/01")).getTime(),
- max: (new Date("2000/01/01")).getTime()
- } });
+ $.plot($("#placeholder"), [d], {
+ xaxis: {
+ mode: "time",
+ minTickSize: [1, "month"],
+ min: (new Date("1999/01/01")).getTime(),
+ max: (new Date("2000/01/01")).getTime()
+ }
+ });
});
});
</script>
diff --git a/examples/tracking.html b/examples/tracking.html
new file mode 100644
index 0000000..a0ad77d
--- /dev/null
+++ b/examples/tracking.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Flot Examples</title>
+ <link href="layout.css" rel="stylesheet" type="text/css"></link>
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
+ <script language="javascript" type="text/javascript" src="../jquery.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.crosshair.js"></script>
+ </head>
+ <body>
+ <h1>Flot Examples</h1>
+
+ <div id="placeholder" style="width:600px;height:300px"></div>
+
+ <p>You can add crosshairs that'll track the mouse position, either
+ on both axes or as here on only one.</p>
+
+ <p>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 (look at the legend).</p>
+
+ <p id="hoverdata"></p>
+
+<script id="source" language="javascript" type="text/javascript">
+var plot;
+$(function () {
+ var sin = [], cos = [];
+ for (var i = 0; i < 14; i += 0.1) {
+ sin.push([i, Math.sin(i)]);
+ cos.push([i, Math.cos(i)]);
+ }
+
+ plot = $.plot($("#placeholder"),
+ [ { data: sin, label: "sin(x) = -0.00"},
+ { data: cos, label: "cos(x) = -0.00" } ], {
+ series: {
+ lines: { show: true }
+ },
+ crosshair: { mode: "x" },
+ grid: { hoverable: true, autoHighlight: false },
+ yaxis: { min: -1.2, max: 1.2 }
+ });
+ var legends = $("#placeholder .legendLabel");
+ legends.each(function () {
+ // fix the widths so they don't jump around
+ $(this).css('width', $(this).width());
+ });
+
+ var updateLegendTimeout = null;
+ var latestPosition = null;
+
+ function updateLegend() {
+ updateLegendTimeout = null;
+
+ var pos = latestPosition;
+
+ var axes = plot.getAxes();
+ if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
+ pos.y < axes.yaxis.min || pos.y > axes.yaxis.max)
+ return;
+
+ var i, j, dataset = plot.getData();
+ for (i = 0; i < dataset.length; ++i) {
+ var series = dataset[i];
+
+ // find the nearest points, x-wise
+ for (j = 0; j < series.data.length; ++j)
+ if (series.data[j][0] > pos.x)
+ break;
+
+ // now interpolate
+ var y, p1 = series.data[j - 1], p2 = series.data[j];
+ if (p1 == null)
+ y = p2[1];
+ else if (p2 == null)
+ y = p1[1];
+ else
+ y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
+
+ legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
+ }
+ }
+
+ $("#placeholder").bind("plothover", function (event, pos, item) {
+ latestPosition = pos;
+ if (!updateLegendTimeout)
+ updateLegendTimeout = setTimeout(updateLegend, 50);
+ });
+});
+</script>
+
+ </body>
+</html>
diff --git a/examples/turning-series.html b/examples/turning-series.html
index 83fb134..f72fe62 100644
--- a/examples/turning-series.html
+++ b/examples/turning-series.html
@@ -4,7 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
@@ -67,7 +67,9 @@ $(function () {
var choiceContainer = $("#choices");
$.each(datasets, function(key, val) {
choiceContainer.append('<br/><input type="checkbox" name="' + key +
- '" checked="checked" >' + val.label + '</input>');
+ '" checked="checked" id="id' + key + '">' +
+ '<label for="id' + key + '">'
+ + val.label + '</label>');
});
choiceContainer.find("input").click(plotAccordingToChoices);
diff --git a/examples/visitors.html b/examples/visitors.html
index 919f903..2b0aade 100644
--- a/examples/visitors.html
+++ b/examples/visitors.html
@@ -4,9 +4,10 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
@@ -18,7 +19,7 @@
<div id="overview" style="margin-left:50px;margin-top:20px;width:400px;height:50px"></div>
-<script id="source" language="javascript" type="text/javascript">
+<script id="source">
$(function () {
var d = [[1196463600000, 0], [1196550000000, 0], [1196636400000, 0], [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], [1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], [1197414000000, 710], [1197500400000, 639], [1197586800000, 540], [1197673200000, 435], [1197759600000, 301], [1197846000000, 575], [1197932400000, 481], [1198018800000, 591], [1198105200000, 608], [1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], [1198450800000, 686], [1198537200000, 279], [1198623600000, 449], [1198710000000, 468], [1198796400000, 392], [1198882800000, 282], [1198969200000, 208], [1199055600000, 229], [1199142000000, 177], [1199228400000, 374], [1199314800000, 436], [1199401200000, 404], [1199487600000, 253], [1199574000000, 218], [1199660400000, 476], [1199746800000, 462], [1199833200000, 448], [1199919600000, 442], [1200006000000, 403], [1200092400000, 204], [1200178800000, 194], [1200265200000, 327], [1200351600000, 374], [1200438000000, 507], [1200524400000, 546], [1200610800000, 482], [1200697200000, 283], [1200783600000, 221], [1200870000000, 483], [1200956400000, 523], [1201042800000, 528], [1201129200000, 483], [1201215600000, 452], [1201302000000, 270], [1201388400000, 222], [1201474800000, 439], [1201561200000, 559], [1201647600000, 521], [1201734000000, 477], [1201820400000, 442], [1201906800000, 252], [1201993200000, 236], [1202079600000, 525], [1202166000000, 477], [1202252400000, 386], [1202338800000, 409], [1202425200000, 408], [1202511600000, 237], [1202598000000, 193], [1202684400000, 357], [1202770800000, 414], [1202857200000, 393], [1202943600000, 353], [1203030000000, 364], [1203116400000, 215], [1203202800000, 214], [1203289200000, 356], [1203375600000, 399], [1203462000000, 334], [1203548400000, 348], [1203634800000, 243], [1203721200000, 126], [1203807600000, 157], [1203894000000, 288]];
@@ -39,7 +40,7 @@ $(function () {
d.setUTCHours(0);
var i = d.getTime();
do {
- // when we don't set yaxis the rectangle automatically
+ // when we don't set yaxis, the rectangle automatically
// extends to infinity upwards and downwards
markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
i += 7 * 24 * 60 * 60 * 1000;
@@ -57,10 +58,12 @@ $(function () {
var plot = $.plot($("#placeholder"), [d], options);
var overview = $.plot($("#overview"), [d], {
- lines: { show: true, lineWidth: 1 },
- shadowSize: 0,
+ series: {
+ lines: { show: true, lineWidth: 1 },
+ shadowSize: 0
+ },
xaxis: { ticks: [], mode: "time" },
- yaxis: { ticks: [], min: 0, max: 4000 },
+ yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
selection: { mode: "x" }
});
diff --git a/examples/zooming.html b/examples/zooming.html
index 0f3284b..b485912 100644
--- a/examples/zooming.html
+++ b/examples/zooming.html
@@ -4,9 +4,10 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+ <script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
@@ -26,13 +27,15 @@
the small overview plot to the right has been connected to the large
plot. Try selecting a rectangle on either of them.</p>
-<script id="source" language="javascript" type="text/javascript">
+<script id="source">
$(function () {
// setup plot
function getData(x1, x2) {
var d = [];
- for (var i = x1; i < x2; i += (x2 - x1) / 100)
- d.push([i, Math.sin(i * Math.sin(i))]);
+ for (var i = 0; i <= 100; ++i) {
+ var x = x1 + i * (x2 - x1) / 100;
+ d.push([x, Math.sin(x * Math.sin(x))]);
+ }
return [
{ label: "sin(x sin(x))", data: d }
@@ -41,8 +44,10 @@ $(function () {
var options = {
legend: { show: false },
- lines: { show: true },
- points: { show: true },
+ series: {
+ lines: { show: true },
+ points: { show: true }
+ },
yaxis: { ticks: 10 },
selection: { mode: "xy" }
};
@@ -54,8 +59,10 @@ $(function () {
// setup overview
var overview = $.plot($("#overview"), startData, {
legend: { show: true, container: $("#overviewLegend") },
- lines: { show: true, lineWidth: 1 },
- shadowSize: 0,
+ series: {
+ lines: { show: true, lineWidth: 1 },
+ shadowSize: 0
+ },
xaxis: { ticks: 4 },
yaxis: { ticks: 3, min: -2, max: 2 },
grid: { color: "#999" },
diff --git a/jquery.colorhelpers.js b/jquery.colorhelpers.js
new file mode 100644
index 0000000..fa44961
--- /dev/null
+++ b/jquery.colorhelpers.js
@@ -0,0 +1,174 @@
+/* Plugin for jQuery for working with colors.
+ *
+ * Version 1.0.
+ *
+ * Inspiration from jQuery color animation plugin by John Resig.
+ *
+ * Released under the MIT license by Ole Laursen, October 2009.
+ *
+ * Examples:
+ *
+ * $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
+ * var c = $.color.extract($("#mydiv"), 'background-color');
+ * console.log(c.r, c.g, c.b, c.a);
+ * $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
+ *
+ * Note that .scale() and .add() work in-place instead of returning
+ * new objects.
+ */
+
+(function() {
+ jQuery.color = {};
+
+ // construct color object with some convenient chainable helpers
+ jQuery.color.make = function (r, g, b, a) {
+ var o = {};
+ o.r = r || 0;
+ o.g = g || 0;
+ o.b = b || 0;
+ o.a = a != null ? a : 1;
+
+ o.add = function (c, d) {
+ for (var i = 0; i < c.length; ++i)
+ o[c.charAt(i)] += d;
+ return o.normalize();
+ };
+
+ o.scale = function (c, f) {
+ for (var i = 0; i < c.length; ++i)
+ o[c.charAt(i)] *= f;
+ return o.normalize();
+ };
+
+ o.toString = function () {
+ if (o.a >= 1.0) {
+ return "rgb("+[o.r, o.g, o.b].join(",")+")";
+ } else {
+ return "rgba("+[o.r, o.g, o.b, o.a].join(",")+")";
+ }
+ };
+
+ o.normalize = function () {
+ function clamp(min, value, max) {
+ return value < min ? min: (value > max ? max: value);
+ }
+
+ o.r = clamp(0, parseInt(o.r), 255);
+ o.g = clamp(0, parseInt(o.g), 255);
+ o.b = clamp(0, parseInt(o.b), 255);
+ o.a = clamp(0, o.a, 1);
+ return o;
+ };
+
+ o.clone = function () {
+ return jQuery.color.make(o.r, o.b, o.g, o.a);
+ };
+
+ return o.normalize();
+ }
+
+ // extract CSS color property from element, going up in the DOM
+ // if it's "transparent"
+ jQuery.color.extract = function (elem, css) {
+ var c;
+ do {
+ c = elem.css(css).toLowerCase();
+ // keep going until we find an element that has color, or
+ // we hit the body
+ if (c != '' && c != 'transparent')
+ break;
+ elem = elem.parent();
+ } while (!jQuery.nodeName(elem.get(0), "body"));
+
+ // catch Safari's way of signalling transparent
+ if (c == "rgba(0, 0, 0, 0)")
+ c = "transparent";
+
+ return jQuery.color.parse(c);
+ }
+
+ // parse CSS color string (like "rgb(10, 32, 43)" or "#fff"),
+ // returns color object
+ jQuery.color.parse = function (str) {
+ var res, m = jQuery.color.make;
+
+ // Look for rgb(num,num,num)
+ if (res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))
+ return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10));
+
+ // Look for rgba(num,num,num,num)
+ if (res = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
+ return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4]));
+
+ // Look for rgb(num%,num%,num%)
+ if (res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))
+ return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55);
+
+ // Look for rgba(num%,num%,num%,num)
+ if (res = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
+ return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55, parseFloat(res[4]));
+
+ // Look for #a0b1c2
+ if (res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))
+ return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16));
+
+ // Look for #fff
+ if (res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))
+ return m(parseInt(res[1]+res[1], 16), parseInt(res[2]+res[2], 16), parseInt(res[3]+res[3], 16));
+
+ // Otherwise, we're most likely dealing with a named color
+ var name = jQuery.trim(str).toLowerCase();
+ if (name == "transparent")
+ return m(255, 255, 255, 0);
+ else {
+ res = lookupColors[name];
+ return m(res[0], res[1], res[2]);
+ }
+ }
+
+ var lookupColors = {
+ aqua:[0,255,255],
+ azure:[240,255,255],
+ beige:[245,245,220],
+ black:[0,0,0],
+ blue:[0,0,255],
+ brown:[165,42,42],
+ cyan:[0,255,255],
+ darkblue:[0,0,139],
+ darkcyan:[0,139,139],
+ darkgrey:[169,169,169],
+ darkgreen:[0,100,0],
+ darkkhaki:[189,183,107],
+ darkmagenta:[139,0,139],
+ darkolivegreen:[85,107,47],
+ darkorange:[255,140,0],
+ darkorchid:[153,50,204],
+ darkred:[139,0,0],
+ darksalmon:[233,150,122],
+ darkviolet:[148,0,211],
+ fuchsia:[255,0,255],
+ gold:[255,215,0],
+ green:[0,128,0],
+ indigo:[75,0,130],
+ khaki:[240,230,140],
+ lightblue:[173,216,230],
+ lightcyan:[224,255,255],
+ lightgreen:[144,238,144],
+ lightgrey:[211,211,211],
+ lightpink:[255,182,193],
+ lightyellow:[255,255,224],
+ lime:[0,255,0],
+ magenta:[255,0,255],
+ maroon:[128,0,0],
+ navy:[0,0,128],
+ olive:[128,128,0],
+ orange:[255,165,0],
+ pink:[255,192,203],
+ purple:[128,0,128],
+ violet:[128,0,128],
+ red:[255,0,0],
+ silver:[192,192,192],
+ white:[255,255,255],
+ yellow:[255,255,0]
+ };
+})();
diff --git a/jquery.flot.crosshair.js b/jquery.flot.crosshair.js
new file mode 100644
index 0000000..11be113
--- /dev/null
+++ b/jquery.flot.crosshair.js
@@ -0,0 +1,156 @@
+/*
+Flot plugin for showing a crosshair, thin lines, when the mouse hovers
+over the plot.
+
+ crosshair: {
+ mode: null or "x" or "y" or "xy"
+ color: color
+ lineWidth: number
+ }
+
+Set 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. "color" is
+the color of the crosshair (default is "rgba(170, 0, 0, 0.80)"),
+"lineWidth" is the width of the drawn lines (default is 1).
+
+The plugin also adds four public methods:
+
+ - 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.
+
+ - lockCrosshair(pos)
+
+ Cause the crosshair to lock to the current location, no longer
+ updating if the user moves the mouse. Optionally supply a position
+ (passed on to setCrosshair()) to move it to.
+
+ Example usage:
+ var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } };
+ $("#graph").bind("plothover", function (evt, position, item) {
+ if (item) {
+ // Lock the crosshair to the data point being hovered
+ myFlot.lockCrosshair({ x: item.datapoint[0], y: item.datapoint[1] });
+ }
+ else {
+ // Return normal crosshair operation
+ myFlot.unlockCrosshair();
+ }
+ });
+
+ - unlockCrosshair()
+
+ Free the crosshair to move again after locking it.
+*/
+
+(function ($) {
+ var options = {
+ crosshair: {
+ mode: null, // one of null, "x", "y" or "xy",
+ color: "rgba(170, 0, 0, 0.80)",
+ lineWidth: 1
+ }
+ };
+
+ function init(plot) {
+ // position of crosshair in pixels
+ var crosshair = { x: -1, y: -1, locked: false };
+
+ plot.setCrosshair = function setCrosshair(pos) {
+ if (!pos)
+ crosshair.x = -1;
+ else {
+ var axes = plot.getAxes();
+
+ crosshair.x = Math.max(0, Math.min(pos.x != null ? axes.xaxis.p2c(pos.x) : axes.x2axis.p2c(pos.x2), plot.width()));
+ crosshair.y = Math.max(0, Math.min(pos.y != null ? axes.yaxis.p2c(pos.y) : axes.y2axis.p2c(pos.y2), plot.height()));
+ }
+
+ plot.triggerRedrawOverlay();
+ };
+
+ plot.clearCrosshair = plot.setCrosshair; // passes null for pos
+
+ plot.lockCrosshair = function lockCrosshair(pos) {
+ if (pos)
+ plot.setCrosshair(pos);
+ crosshair.locked = true;
+ }
+
+ plot.unlockCrosshair = function unlockCrosshair() {
+ crosshair.locked = false;
+ }
+
+ plot.hooks.bindEvents.push(function (plot, eventHolder) {
+ if (!plot.getOptions().crosshair.mode)
+ return;
+
+ eventHolder.mouseout(function () {
+ if (crosshair.x != -1) {
+ crosshair.x = -1;
+ plot.triggerRedrawOverlay();
+ }
+ });
+
+ eventHolder.mousemove(function (e) {
+ if (plot.getSelection && plot.getSelection()) {
+ crosshair.x = -1; // hide the crosshair while selecting
+ return;
+ }
+
+ if (crosshair.locked)
+ return;
+
+ var offset = plot.offset();
+ crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width()));
+ crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height()));
+ plot.triggerRedrawOverlay();
+ });
+ });
+
+ plot.hooks.drawOverlay.push(function (plot, ctx) {
+ var c = plot.getOptions().crosshair;
+ if (!c.mode)
+ return;
+
+ var plotOffset = plot.getPlotOffset();
+
+ ctx.save();
+ ctx.translate(plotOffset.left, plotOffset.top);
+
+ if (crosshair.x != -1) {
+ ctx.strokeStyle = c.color;
+ ctx.lineWidth = c.lineWidth;
+ ctx.lineJoin = "round";
+
+ ctx.beginPath();
+ if (c.mode.indexOf("x") != -1) {
+ ctx.moveTo(crosshair.x, 0);
+ ctx.lineTo(crosshair.x, plot.height());
+ }
+ if (c.mode.indexOf("y") != -1) {
+ ctx.moveTo(0, crosshair.y);
+ ctx.lineTo(plot.width(), crosshair.y);
+ }
+ ctx.stroke();
+ }
+ ctx.restore();
+ });
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'crosshair',
+ version: '1.0'
+ });
+})(jQuery);
diff --git a/jquery.flot.image.js b/jquery.flot.image.js
new file mode 100644
index 0000000..90babf6
--- /dev/null
+++ b/jquery.flot.image.js
@@ -0,0 +1,237 @@
+/*
+Flot plugin for plotting images, e.g. useful for putting ticks on a
+prerendered complex visualization.
+
+The data syntax is [[image, x1, y1, x2, y2], ...] where (x1, y1) and
+(x2, y2) are where you intend the two opposite corners of the image to
+end up in the plot. Image must be a fully loaded Javascript image (you
+can make one with new Image()). If the image is not complete, it's
+skipped when plotting.
+
+There are two helpers included for retrieving images. The easiest work
+the way that you put in URLs instead of images in the data (like
+["myimage.png", 0, 0, 10, 10]), then call $.plot.image.loadData(data,
+options, callback) where data and options are the same as you pass in
+to $.plot. This loads the images, replaces the URLs in the data with
+the corresponding images and calls "callback" when all images are
+loaded (or failed loading). In the callback, you can then call $.plot
+with the data set. See the included example.
+
+A more low-level helper, $.plot.image.load(urls, callback) is also
+included. Given a list of URLs, it calls callback with an object
+mapping from URL to Image object when all images are loaded or have
+failed loading.
+
+Options for the plugin are
+
+ series: {
+ images: {
+ show: boolean
+ anchor: "corner" or "center"
+ alpha: [0,1]
+ }
+ }
+
+which can be specified for a specific series
+
+ $.plot($("#placeholder"), [{ data: [ ... ], images: { ... } ])
+
+Note that because the data format is different from usual data points,
+you can't use images with anything else in a specific data series.
+
+Setting "anchor" to "center" causes the pixels in the image to be
+anchored at the corner pixel centers inside of at the pixel corners,
+effectively letting half a pixel stick out to each side in the plot.
+
+
+A possible future direction could be support for tiling for large
+images (like Google Maps).
+
+*/
+
+(function ($) {
+ var options = {
+ series: {
+ images: {
+ show: false,
+ alpha: 1,
+ anchor: "corner" // or "center"
+ }
+ }
+ };
+
+ $.plot.image = {};
+
+ $.plot.image.loadDataImages = function (series, options, callback) {
+ var urls = [], points = [];
+
+ var defaultShow = options.series.images.show;
+
+ $.each(series, function (i, s) {
+ if (!(defaultShow || s.images.show))
+ return;
+
+ if (s.data)
+ s = s.data;
+
+ $.each(s, function (i, p) {
+ if (typeof p[0] == "string") {
+ urls.push(p[0]);
+ points.push(p);
+ }
+ });
+ });
+
+ $.plot.image.load(urls, function (loadedImages) {
+ $.each(points, function (i, p) {
+ var url = p[0];
+ if (loadedImages[url])
+ p[0] = loadedImages[url];
+ });
+
+ callback();
+ });
+ }
+
+ $.plot.image.load = function (urls, callback) {
+ var missing = urls.length, loaded = {};
+ if (missing == 0)
+ callback({});
+
+ $.each(urls, function (i, url) {
+ var handler = function () {
+ --missing;
+
+ loaded[url] = this;
+
+ if (missing == 0)
+ callback(loaded);
+ };
+
+ $('<img />').load(handler).error(handler).attr('src', url);
+ });
+ }
+
+ function draw(plot, ctx) {
+ var plotOffset = plot.getPlotOffset();
+
+ $.each(plot.getData(), function (i, series) {
+ var points = series.datapoints.points,
+ ps = series.datapoints.pointsize;
+
+ for (var i = 0; i < points.length; i += ps) {
+ var img = points[i],
+ x1 = points[i + 1], y1 = points[i + 2],
+ x2 = points[i + 3], y2 = points[i + 4],
+ xaxis = series.xaxis, yaxis = series.yaxis,
+ tmp;
+
+ // actually we should check img.complete, but it
+ // appears to be a somewhat unreliable indicator in
+ // IE6 (false even after load event)
+ if (!img || img.width <= 0 || img.height <= 0)
+ continue;
+
+ if (x1 > x2) {
+ tmp = x2;
+ x2 = x1;
+ x1 = tmp;
+ }
+ if (y1 > y2) {
+ tmp = y2;
+ y2 = y1;
+ y1 = tmp;
+ }
+
+ // if the anchor is at the center of the pixel, expand the
+ // image by 1/2 pixel in each direction
+ if (series.images.anchor == "center") {
+ tmp = 0.5 * (x2-x1) / (img.width - 1);
+ x1 -= tmp;
+ x2 += tmp;
+ tmp = 0.5 * (y2-y1) / (img.height - 1);
+ y1 -= tmp;
+ y2 += tmp;
+ }
+
+ // clip
+ if (x1 == x2 || y1 == y2 ||
+ x1 >= xaxis.max || x2 <= xaxis.min ||
+ y1 >= yaxis.max || y2 <= yaxis.min)
+ continue;
+
+ var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
+ if (x1 < xaxis.min) {
+ sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
+ x1 = xaxis.min;
+ }
+
+ if (x2 > xaxis.max) {
+ sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
+ x2 = xaxis.max;
+ }
+
+ if (y1 < yaxis.min) {
+ sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
+ y1 = yaxis.min;
+ }
+
+ if (y2 > yaxis.max) {
+ sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
+ y2 = yaxis.max;
+ }
+
+ x1 = xaxis.p2c(x1);
+ x2 = xaxis.p2c(x2);
+ y1 = yaxis.p2c(y1);
+ y2 = yaxis.p2c(y2);
+
+ // the transformation may have swapped us
+ if (x1 > x2) {
+ tmp = x2;
+ x2 = x1;
+ x1 = tmp;
+ }
+ if (y1 > y2) {
+ tmp = y2;
+ y2 = y1;
+ y1 = tmp;
+ }
+
+ tmp = ctx.globalAlpha;
+ ctx.globalAlpha *= series.images.alpha;
+ ctx.drawImage(img,
+ sx1, sy1, sx2 - sx1, sy2 - sy1,
+ x1 + plotOffset.left, y1 + plotOffset.top,
+ x2 - x1, y2 - y1);
+ ctx.globalAlpha = tmp;
+ }
+ });
+ }
+
+ function processRawData(plot, series, data, datapoints) {
+ if (!series.images.show)
+ return;
+
+ // format is Image, x1, y1, x2, y2 (opposite corners)
+ datapoints.format = [
+ { required: true },
+ { x: true, number: true, required: true },
+ { y: true, number: true, required: true },
+ { x: true, number: true, required: true },
+ { y: true, number: true, required: true }
+ ];
+ }
+
+ function init(plot) {
+ plot.hooks.processRawData.push(processRawData);
+ plot.hooks.draw.push(draw);
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'image',
+ version: '1.1'
+ });
+})(jQuery);
diff --git a/jquery.flot.js b/jquery.flot.js
index b1b298e..6534a46 100644
--- a/jquery.flot.js
+++ b/jquery.flot.js
@@ -1,20 +1,44 @@
-/* Javascript plotting library for jQuery, v. 0.5.
+/* Javascript plotting library for jQuery, v. 0.6.
*
* Released under the MIT license by IOLA, December 2007.
*
*/
+// first an inline dependency, jquery.colorhelpers.js, we inline it here
+// for convenience
+
+/* Plugin for jQuery for working with colors.
+ *
+ * Version 1.0.
+ *
+ * Inspiration from jQuery color animation plugin by John Resig.
+ *
+ * Released under the MIT license by Ole Laursen, October 2009.
+ *
+ * Examples:
+ *
+ * $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
+ * var c = $.color.extract($("#mydiv"), 'background-color');
+ * console.log(c.r, c.g, c.b, c.a);
+ * $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
+ *
+ * Note that .scale() and .add() work in-place instead of returning
+ * new objects.
+ */
+(function(){jQuery.color={};jQuery.color.make=function(E,D,B,C){var F={};F.r=E||0;F.g=D||0;F.b=B||0;F.a=C!=null?C:1;F.add=function(I,H){for(var G=0;G<I.length;++G){F[I.charAt(G)]+=H}return F.normalize()};F.scale=function(I,H){for(var G=0;G<I.length;++G){F[I.charAt(G)]*=H}return F.normalize()};F.toString=function(){if(F.a>=1){return"rgb("+[F.r,F.g,F.b].join(",")+")"}else{return"rgba("+[F.r,F.g,F.b,F.a].join(",")+")"}};F.normalize=function(){function G(I,J,H){return J<I?I:(J>H?H:J)}F.r=G(0,parseInt(F.r),255);F.g=G(0,parseInt(F.g),255);F.b=G(0,parseInt(F.b),255);F.a=G(0,F.a,1);return F};F.clone=function(){return jQuery.color.make(F.r,F.b,F.g,F.a)};return F.normalize()};jQuery.color.extract=function(C,B){var D;do{D=C.css(B).toLowerCase();if(D!=""&&D!="transparent"){break}C=C.parent()}while(!jQuery.nodeName(C.get(0),"body"));if(D=="rgba(0, 0, 0, 0)"){D="transparent"}return jQuery.color.parse(D)};jQuery.color.parse=function(E){var D,B=jQuery.color.make;if(D=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(E)){return B(parseInt(D[1],10),parseInt(D[2],10),parseInt(D[3],10))}if(D=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(E)){return B(parseInt(D[1],10),parseInt(D[2],10),parseInt(D[3],10),parseFloat(D[4]))}if(D=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(E)){return B(parseFloat(D[1])*2.55,parseFloat(D[2])*2.55,parseFloat(D[3])*2.55)}if(D=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(E)){return B(parseFloat(D[1])*2.55,parseFloat(D[2])*2.55,parseFloat(D[3])*2.55,parseFloat(D[4]))}if(D=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(E)){return B(parseInt(D[1],16),parseInt(D[2],16),parseInt(D[3],16))}if(D=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(E)){return B(parseInt(D[1]+D[1],16),parseInt(D[2]+D[2],16),parseInt(D[3]+D[3],16))}var C=jQuery.trim(E).toLowerCase();if(C=="transparent"){return B(255,255,255,0)}else{D=A[C];return B(D[0],D[1],D[2])}};var A={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})();
+
+// the actual Flot code
(function($) {
- function Plot(target_, data_, options_) {
+ function Plot(placeholder, data_, options_, plugins) {
// data is on the form:
// [ series1, series2 ... ]
// where series is either just the data as [ [x1, y1], [x2, y2], ... ]
- // or { data: [ [x1, y1], [x2, y2], ... ], label: "some label" }
+ // or { data: [ [x1, y1], [x2, y2], ... ], label: "some label", ... }
var series = [],
options = {
- // the color theme used for graphs
- colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
+ // the color theme used for graphs
+ colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
legend: {
show: true,
noColumns: 1, // number of colums in legend table
@@ -28,6 +52,8 @@
},
xaxis: {
mode: null, // null or "time"
+ transform: null, // null or f: number -> number to transform axis
+ inverseTransform: null, // if transform is set, this should be the inverse function
min: null, // min. value to show, null means set automatically
max: null, // max. value to show, null means set automatically
autoscaleMargin: null, // margin in % to add if auto-setting min/max
@@ -41,7 +67,8 @@
tickSize: null, // number or [number, "unit"]
minTickSize: null, // number or [number, "unit"]
monthNames: null, // list of names of months
- timeformat: null // format string to use
+ timeformat: null, // format string to use
+ twelveHourClock: false // 12 or 24 time in time mode
},
yaxis: {
autoscaleMargin: 0.02
@@ -51,34 +78,43 @@
},
y2axis: {
autoscaleMargin: 0.02
- },
- points: {
- show: false,
- radius: 3,
- lineWidth: 2, // in pixels
- fill: true,
- fillColor: "#ffffff"
- },
- lines: {
- show: false,
- lineWidth: 2, // in pixels
- fill: false,
- fillColor: null
},
- bars: {
- show: false,
- lineWidth: 2, // in pixels
- barWidth: 1, // in units of the x axis
- fill: true,
- fillColor: null,
- align: "left" // or "center"
+ series: {
+ points: {
+ show: false,
+ radius: 3,
+ lineWidth: 2, // in pixels
+ fill: true,
+ fillColor: "#ffffff"
+ },
+ lines: {
+ // we don't put in show: false so we can see
+ // whether lines were actively disabled
+ lineWidth: 2, // in pixels
+ fill: false,
+ fillColor: null,
+ steps: false
+ },
+ bars: {
+ show: false,
+ lineWidth: 2, // in pixels
+ barWidth: 1, // in units of the x axis
+ fill: true,
+ fillColor: null,
+ align: "left", // or "center"
+ horizontal: false // when horizontal, left is now top
+ },
+ shadowSize: 3
},
grid: {
+ show: true,
+ aboveData: false,
color: "#545454", // primary color used for outline and labels
backgroundColor: null, // null for transparent, else color
- tickColor: "#dddddd", // color used for the ticks
+ tickColor: "rgba(0,0,0,0.15)", // color used for the ticks
labelMargin: 5, // in pixels
- borderWidth: 2,
+ borderWidth: 2, // in pixels
+ borderColor: null, // set if different from the grid color
markings: null, // array of ranges or fn: axes -> array of ranges
markingsColor: "#f4f4f4",
markingsLineWidth: 2,
@@ -88,47 +124,112 @@
autoHighlight: true, // highlight in case mouse is near
mouseActiveRadius: 10 // how far the mouse can be away to activate an item
},
- selection: {
- mode: null, // one of null, "x", "y" or "xy"
- color: "#e8cfac"
- },
- shadowSize: 4
+ hooks: {}
},
canvas = null, // the canvas for the plot itself
overlay = null, // canvas for interactive stuff on top of plot
eventHolder = null, // jQuery object that events should be bound to
ctx = null, octx = null,
- target = target_,
axes = { xaxis: {}, yaxis: {}, x2axis: {}, y2axis: {} },
plotOffset = { left: 0, right: 0, top: 0, bottom: 0},
canvasWidth = 0, canvasHeight = 0,
plotWidth = 0, plotHeight = 0,
- // dedicated to storing data for buggy standard compliance cases
- workarounds = {};
+ hooks = {
+ processOptions: [],
+ processRawData: [],
+ processDatapoints: [],
+ draw: [],
+ bindEvents: [],
+ drawOverlay: []
+ },
+ plot = this;
+
+ // public functions
+ plot.setData = setData;
+ plot.setupGrid = setupGrid;
+ plot.draw = draw;
+ plot.getPlaceholder = function() { return placeholder; };
+ plot.getCanvas = function() { return canvas; };
+ plot.getPlotOffset = function() { return plotOffset; };
+ plot.width = function () { return plotWidth; };
+ plot.height = function () { return plotHeight; };
+ plot.offset = function () {
+ var o = eventHolder.offset();
+ o.left += plotOffset.left;
+ o.top += plotOffset.top;
+ return o;
+ };
+ plot.getData = function() { return series; };
+ plot.getAxes = function() { return axes; };
+ plot.getOptions = function() { return options; };
+ plot.highlight = highlight;
+ plot.unhighlight = unhighlight;
+ plot.triggerRedrawOverlay = triggerRedrawOverlay;
+ plot.pointOffset = function(point) {
+ return { left: parseInt(axisSpecToRealAxis(point, "xaxis").p2c(+point.x) + plotOffset.left),
+ top: parseInt(axisSpecToRealAxis(point, "yaxis").p2c(+point.y) + plotOffset.top) };
+ };
- this.setData = setData;
- this.setupGrid = setupGrid;
- this.draw = draw;
- this.clearSelection = clearSelection;
- this.setSelection = setSelection;
- this.getCanvas = function() { return canvas; };
- this.getPlotOffset = function() { return plotOffset; };
- this.getData = function() { return series; };
- this.getAxes = function() { return axes; };
- this.highlight = highlight;
- this.unhighlight = unhighlight;
+
+ // public attributes
+ plot.hooks = hooks;
// initialize
+ initPlugins(plot);
parseOptions(options_);
- setData(data_);
constructCanvas();
+ setData(data_);
setupGrid();
draw();
+ bindEvents();
+ function executeHooks(hook, args) {
+ args = [plot].concat(args);
+ for (var i = 0; i < hook.length; ++i)
+ hook[i].apply(this, args);
+ }
+
+ function initPlugins() {
+ for (var i = 0; i < plugins.length; ++i) {
+ var p = plugins[i];
+ p.init(plot);
+ if (p.options)
+ $.extend(true, options, p.options);
+ }
+ }
+
+ function parseOptions(opts) {
+ $.extend(true, options, opts);
+ if (options.grid.borderColor == null)
+ options.grid.borderColor = options.grid.color;
+ // backwards compatibility, to be removed in future
+ if (options.xaxis.noTicks && options.xaxis.ticks == null)
+ options.xaxis.ticks = options.xaxis.noTicks;
+ if (options.yaxis.noTicks && options.yaxis.ticks == null)
+ options.yaxis.ticks = options.yaxis.noTicks;
+ if (options.grid.coloredAreas)
+ options.grid.markings = options.grid.coloredAreas;
+ if (options.grid.coloredAreasColor)
+ options.grid.markingsColor = options.grid.coloredAreasColor;
+ if (options.lines)
+ $.extend(true, options.series.lines, options.lines);
+ if (options.points)
+ $.extend(true, options.series.points, options.points);
+ if (options.bars)
+ $.extend(true, options.series.bars, options.bars);
+ if (options.shadowSize)
+ options.series.shadowSize = options.shadowSize;
+
+ for (var n in hooks)
+ if (options.hooks[n] && options.hooks[n].length)
+ hooks[n] = hooks[n].concat(options.hooks[n]);
+
+ executeHooks(hooks.processOptions, [options]);
+ }
+
function setData(d) {
series = parseData(d);
-
fillInSeriesOptions();
processData();
}
@@ -136,35 +237,33 @@
function parseData(d) {
var res = [];
for (var i = 0; i < d.length; ++i) {
- var s;
+ var s = $.extend(true, {}, options.series);
+
if (d[i].data) {
- s = {};
- for (var v in d[i])
- s[v] = d[i][v];
- }
- else {
- s = { data: d[i] };
+ s.data = d[i].data; // move the data instead of deep-copy
+ delete d[i].data;
+
+ $.extend(true, s, d[i]);
+
+ d[i].data = s.data;
}
+ else
+ s.data = d[i];
res.push(s);
}
return res;
}
- function parseOptions(o) {
- $.extend(true, options, o);
-
- // backwards compatibility, to be removed in future
- if (options.xaxis.noTicks && options.xaxis.ticks == null)
- options.xaxis.ticks = options.xaxis.noTicks;
- if (options.yaxis.noTicks && options.yaxis.ticks == null)
- options.yaxis.ticks = options.yaxis.noTicks;
- if (options.grid.coloredAreas)
- options.grid.markings = options.grid.coloredAreas;
- if (options.grid.coloredAreasColor)
- options.grid.markingsColor = options.grid.coloredAreasColor;
+ function axisSpecToRealAxis(obj, attr) {
+ var a = obj[attr];
+ if (!a || a == 1)
+ return axes[attr];
+ if (typeof a == "number")
+ return axes[attr.charAt(0) + a + attr.slice(1)];
+ return a; // assume it's OK
}
-
+
function fillInSeriesOptions() {
var i;
@@ -179,7 +278,7 @@
if (typeof sc == "number")
assignedColors.push(sc);
else
- usedColors.push(parseColor(series[i].color));
+ usedColors.push($.color.parse(series[i].color));
}
}
@@ -195,14 +294,13 @@
while (colors.length < neededColors) {
var c;
if (options.colors.length == i) // check degenerate case
- c = new Color(100, 100, 100);
+ c = $.color.make(100, 100, 100);
else
- c = parseColor(options.colors[i]);
+ c = $.color.parse(options.colors[i]);
// vary color if needed
var sign = variation % 2 == 1 ? -1 : 1;
- var factor = 1 + sign * Math.ceil(variation / 2) * 0.2;
- c.scale(factor, factor, factor);
+ c.scale('rgb', 1 + sign * Math.ceil(variation / 2) * 0.2)
// FIXME: if we're getting to close to something else,
// we should probably skip this one
@@ -219,7 +317,7 @@
var colori = 0, s;
for (i = 0; i < series.length; ++i) {
s = series[i];
-
+
// assign colors
if (s.color == null) {
s.color = colors[colori].toString();
@@ -228,176 +326,437 @@
else if (typeof s.color == "number")
s.color = colors[s.color].toString();
- // copy the rest
- s.lines = $.extend(true, {}, options.lines, s.lines);
- s.points = $.extend(true, {}, options.points, s.points);
- s.bars = $.extend(true, {}, options.bars, s.bars);
- if (s.shadowSize == null)
- s.shadowSize = options.shadowSize;
- if (s.xaxis && s.xaxis == 2)
- s.xaxis = axes.x2axis;
- else
- s.xaxis = axes.xaxis;
- if (s.yaxis && s.yaxis == 2)
- s.yaxis = axes.y2axis;
- else
- s.yaxis = axes.yaxis;
+ // turn on lines automatically in case nothing is set
+ if (s.lines.show == null) {
+ var v, show = true;
+ for (v in s)
+ if (s[v].show) {
+ show = false;
+ break;
+ }
+ if (show)
+ s.lines.show = true;
+ }
+
+ // setup axes
+ s.xaxis = axisSpecToRealAxis(s, "xaxis");
+ s.yaxis = axisSpecToRealAxis(s, "yaxis");
}
}
function processData() {
var topSentry = Number.POSITIVE_INFINITY,
bottomSentry = Number.NEGATIVE_INFINITY,
- axis;
+ i, j, k, m, length,
+ s, points, ps, x, y, axis, val, f, p;
for (axis in axes) {
axes[axis].datamin = topSentry;
axes[axis].datamax = bottomSentry;
axes[axis].used = false;
}
+
+ function updateAxis(axis, min, max) {
+ if (min < axis.datamin)
+ axis.datamin = min;
+ if (max > axis.datamax)
+ axis.datamax = max;
+ }
+
+ for (i = 0; i < series.length; ++i) {
+ s = series[i];
+ s.datapoints = { points: [] };
+
+ executeHooks(hooks.processRawData, [ s, s.data, s.datapoints ]);
+ }
- for (var i = 0; i < series.length; ++i) {
- var data = series[i].data,
- axisx = series[i].xaxis,
- axisy = series[i].yaxis,
- mindelta = 0, maxdelta = 0;
+ // first pass: clean and copy data
+ for (i = 0; i < series.length; ++i) {
+ s = series[i];
+
+ var data = s.data, format = s.datapoints.format;
+
+ if (!format) {
+ format = [];
+ // find out how to copy
+ format.push({ x: true, number: true, required: true });
+ format.push({ y: true, number: true, required: true });
+
+ if (s.bars.show)
+ format.push({ y: true, number: true, required: false, defaultValue: 0 });
+
+ s.datapoints.format = format;
+ }
+
+ if (s.datapoints.pointsize != null)
+ continue; // already filled in
+
+ if (s.datapoints.pointsize == null)
+ s.datapoints.pointsize = format.length;
+
+ ps = s.datapoints.pointsize;
+ points = s.datapoints.points;
+
+ insertSteps = s.lines.show && s.lines.steps;
+ s.xaxis.used = s.yaxis.used = true;
- // make sure we got room for the bar
- if (series[i].bars.show) {
- mindelta = series[i].bars.align == "left" ? 0 : -series[i].bars.barWidth/2;
- maxdelta = mindelta + series[i].bars.barWidth;
+ for (j = k = 0; j < data.length; ++j, k += ps) {
+ p = data[j];
+
+ var nullify = p == null;
+ if (!nullify) {
+ for (m = 0; m < ps; ++m) {
+ val = p[m];
+ f = format[m];
+
+ if (f) {
+ if (f.number && val != null) {
+ val = +val; // convert to number
+ if (isNaN(val))
+ val = null;
+ }
+
+ if (val == null) {
+ if (f.required)
+ nullify = true;
+
+ if (f.defaultValue != null)
+ val = f.defaultValue;
+ }
+ }
+
+ points[k + m] = val;
+ }
+ }
+
+ if (nullify) {
+ for (m = 0; m < ps; ++m) {
+ val = points[k + m];
+ if (val != null) {
+ f = format[m];
+ // extract min/max info
+ if (f.x)
+ updateAxis(s.xaxis, val, val);
+ if (f.y)
+ updateAxis(s.yaxis, val, val);
+ }
+ points[k + m] = null;
+ }
+ }
+ else {
+ // a little bit of line specific stuff that
+ // perhaps shouldn't be here, but lacking
+ // better means...
+ if (insertSteps && k > 0
+ && points[k - ps] != null
+ && points[k - ps] != points[k]
+ && points[k - ps + 1] != points[k + 1]) {
+ // copy the point to make room for a middle point
+ for (m = 0; m < ps; ++m)
+ points[k + ps + m] = points[k + m];
+
+ // middle point has same y
+ points[k + 1] = points[k - ps + 1];
+
+ // we've added a point, better reflect that
+ k += ps;
+ }
+ }
}
+ }
+
+ // give the hooks a chance to run
+ for (i = 0; i < series.length; ++i) {
+ s = series[i];
+
+ executeHooks(hooks.processDatapoints, [ s, s.datapoints]);
+ }
+
+ // second pass: find datamax/datamin for auto-scaling
+ for (i = 0; i < series.length; ++i) {
+ s = series[i];
+ points = s.datapoints.points,
+ ps = s.datapoints.pointsize;
+
+ var xmin = topSentry, ymin = topSentry,
+ xmax = bottomSentry, ymax = bottomSentry;
- axisx.used = axisy.used = true;
- for (var j = 0; j < data.length; ++j) {
- if (data[j] == null)
+ for (j = 0; j < points.length; j += ps) {
+ if (points[j] == null)
continue;
-
- var x = data[j][0], y = data[j][1];
-
- // convert to number
- if (x != null && !isNaN(x = +x)) {
- if (x + mindelta < axisx.datamin)
- axisx.datamin = x + mindelta;
- if (x + maxdelta > axisx.datamax)
- axisx.datamax = x + maxdelta;
+
+ for (m = 0; m < ps; ++m) {
+ val = points[j + m];
+ f = format[m];
+ if (!f)
+ continue;
+
+ if (f.x) {
+ if (val < xmin)
+ xmin = val;
+ if (val > xmax)
+ xmax = val;
+ }
+ if (f.y) {
+ if (val < ymin)
+ ymin = val;
+ if (val > ymax)
+ ymax = val;
+ }
}
-
- if (y != null && !isNaN(y = +y)) {
- if (y < axisy.datamin)
- axisy.datamin = y;
- if (y > axisy.datamax)
- axisy.datamax = y;
+ }
+
+ if (s.bars.show) {
+ // make sure we got room for the bar on the dancing floor
+ var delta = s.bars.align == "left" ? 0 : -s.bars.barWidth/2;
+ if (s.bars.horizontal) {
+ ymin += delta;
+ ymax += delta + s.bars.barWidth;
+ }
+ else {
+ xmin += delta;
+ xmax += delta + s.bars.barWidth;
}
-
- if (x == null || y == null || isNaN(x) || isNaN(y))
- data[j] = null; // mark this point as invalid
}
+
+ updateAxis(s.xaxis, xmin, xmax);
+ updateAxis(s.yaxis, ymin, ymax);
}
for (axis in axes) {
if (axes[axis].datamin == topSentry)
- axes[axis].datamin = 0;
+ axes[axis].datamin = null;
if (axes[axis].datamax == bottomSentry)
- axes[axis].datamax = 1;
+ axes[axis].datamax = null;
}
}
function constructCanvas() {
- canvasWidth = target.width();
- canvasHeight = target.height();
- target.html(""); // clear target
- target.css("position", "relative"); // for positioning labels and overlay
+ function makeCanvas(width, height) {
+ var c = document.createElement('canvas');
+ c.width = width;
+ c.height = height;
+ if ($.browser.msie) // excanvas hack
+ c = window.G_vmlCanvasManager.initElement(c);
+ return c;
+ }
+
+ canvasWidth = placeholder.width();
+ canvasHeight = placeholder.height();
+ placeholder.html(""); // clear placeholder
+ if (placeholder.css("position") == 'static')
+ placeholder.css("position", "relative"); // for positioning labels and overlay
if (canvasWidth <= 0 || canvasHeight <= 0)
throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
- // the canvas
- canvas = $('<canvas width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo(target).get(0);
if ($.browser.msie) // excanvas hack
- canvas = window.G_vmlCanvasManager.initElement(canvas);
+ window.G_vmlCanvasManager.init_(document); // make sure everything is setup
+
+ // the canvas
+ canvas = $(makeCanvas(canvasWidth, canvasHeight)).appendTo(placeholder).get(0);
ctx = canvas.getContext("2d");
// overlay canvas for interactive features
- overlay = $('<canvas style="position:absolute;left:0px;top:0px;" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo(target).get(0);
- if ($.browser.msie) // excanvas hack
- overlay = window.G_vmlCanvasManager.initElement(overlay);
+ overlay = $(makeCanvas(canvasWidth, canvasHeight)).css({ position: 'absolute', left: 0, top: 0 }).appendTo(placeholder).get(0);
octx = overlay.getContext("2d");
+ octx.stroke();
+ }
+ function bindEvents() {
// we include the canvas in the event holder too, because IE 7
// sometimes has trouble with the stacking order
eventHolder = $([overlay, canvas]);
// bind events
- if (options.selection.mode != null || options.grid.hoverable) {
- // FIXME: temp. work-around until jQuery bug 1871 is fixed
- eventHolder.each(function () {
- this.onmousemove = onMouseMove;
- });
-
- if (options.selection.mode != null)
- eventHolder.mousedown(onMouseDown);
- }
+ if (options.grid.hoverable)
+ eventHolder.mousemove(onMouseMove);
if (options.grid.clickable)
eventHolder.click(onClick);
+
+ executeHooks(hooks.bindEvents, [eventHolder]);
}
function setupGrid() {
- function setupAxis(axis, options) {
- setRange(axis, options);
- prepareTickGeneration(axis, options);
- setTicks(axis, options);
+ function setTransformationHelpers(axis, o) {
+ function identity(x) { return x; }
+
+ var s, m, t = o.transform || identity,
+ it = o.inverseTransform;
+
// add transformation helpers
if (axis == axes.xaxis || axis == axes.x2axis) {
+ // precompute how much the axis is scaling a point
+ // in canvas space
+ s = axis.scale = plotWidth / (t(axis.max) - t(axis.min));
+ m = t(axis.min);
+
// data point to canvas coordinate
- axis.p2c = function (p) { return (p - axis.min) * axis.scale; };
- // canvas coordinate to data point
- axis.c2p = function (c) { return axis.min + c / axis.scale; };
+ if (t == identity) // slight optimization
+ axis.p2c = function (p) { return (p - m) * s; };
+ else
+ axis.p2c = function (p) { return (t(p) - m) * s; };
+ // canvas coordinate to data point
+ if (!it)
+ axis.c2p = function (c) { return m + c / s; };
+ else
+ axis.c2p = function (c) { return it(m + c / s); };
}
else {
- axis.p2c = function (p) { return (axis.max - p) * axis.scale; };
- axis.c2p = function (p) { return axis.max - p / axis.scale; };
+ s = axis.scale = plotHeight / (t(axis.max) - t(axis.min));
+ m = t(axis.max);
+
+ if (t == identity)
+ axis.p2c = function (p) { return (m - p) * s; };
+ else
+ axis.p2c = function (p) { return (m - t(p)) * s; };
+ if (!it)
+ axis.c2p = function (c) { return m - c / s; };
+ else
+ axis.c2p = function (c) { return it(m - c / s); };
}
}
- for (var axis in axes)
- setupAxis(axes[axis], options[axis]);
+ function measureLabels(axis, axisOptions) {
+ var i, labels = [], l;
+
+ axis.labelWidth = axisOptions.labelWidth;
+ axis.labelHeight = axisOptions.labelHeight;
+
+ if (axis == axes.xaxis || axis == axes.x2axis) {
+ // to avoid measuring the widths of the labels, we
+ // construct fixed-size boxes and put the labels inside
+ // them, we don't need the exact figures and the
+ // fixed-size box content is easy to center
+ if (axis.labelWidth == null)
+ axis.labelWidth = canvasWidth / (axis.ticks.length > 0 ? axis.ticks.length : 1);
+
+ // measure x label heights
+ if (axis.labelHeight == null) {
+ labels = [];
+ for (i = 0; i < axis.ticks.length; ++i) {
+ l = axis.ticks[i].label;
+ if (l)
+ labels.push('<div class="tickLabel" style="float:left;width:' + axis.labelWidth + 'px">' + l + '</div>');
+ }
+
+ if (labels.length > 0) {
+ var dummyDiv = $('<div style="position:absolute;top:-10000px;width:10000px;font-size:smaller">'
+ + labels.join("") + '<div style="clear:left"></div></div>').appendTo(placeholder);
+ axis.labelHeight = dummyDiv.height();
+ dummyDiv.remove();
+ }
+ }
+ }
+ else if (axis.labelWidth == null || axis.labelHeight == null) {
+ // calculate y label dimensions
+ for (i = 0; i < axis.ticks.length; ++i) {
+ l = axis.ticks[i].label;
+ if (l)
+ labels.push('<div class="tickLabel">' + l + '</div>');
+ }
+
+ if (labels.length > 0) {
+ var dummyDiv = $('<div style="position:absolute;top:-10000px;font-size:smaller">'
+ + labels.join("") + '</div>').appendTo(placeholder);
+ if (axis.labelWidth == null)
+ axis.labelWidth = dummyDiv.width();
+ if (axis.labelHeight == null)
+ axis.labelHeight = dummyDiv.find("div").height();
+ dummyDiv.remove();
+ }
+
+ }
+
+ if (axis.labelWidth == null)
+ axis.labelWidth = 0;
+ if (axis.labelHeight == null)
+ axis.labelHeight = 0;
+ }
+
+ function setGridSpacing() {
+ // get the most space needed around the grid for things
+ // that may stick out
+ var maxOutset = options.grid.borderWidth;
+ for (i = 0; i < series.length; ++i)
+ maxOutset = Math.max(maxOutset, 2 * (series[i].points.radius + series[i].points.lineWidth/2));
+
+ plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = maxOutset;
+
+ var margin = options.grid.labelMargin + options.grid.borderWidth;
+
+ if (axes.xaxis.labelHeight > 0)
+ plotOffset.bottom = Math.max(maxOutset, axes.xaxis.labelHeight + margin);
+ if (axes.yaxis.labelWidth > 0)
+ plotOffset.left = Math.max(maxOutset, axes.yaxis.labelWidth + margin);
+ if (axes.x2axis.labelHeight > 0)
+ plotOffset.top = Math.max(maxOutset, axes.x2axis.labelHeight + margin);
+ if (axes.y2axis.labelWidth > 0)
+ plotOffset.right = Math.max(maxOutset, axes.y2axis.labelWidth + margin);
+
+ plotWidth = canvasWidth - plotOffset.left - plotOffset.right;
+ plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top;
+ }
+
+ var axis;
+ for (axis in axes)
+ setRange(axes[axis], options[axis]);
+
+ if (options.grid.show) {
+ for (axis in axes) {
+ prepareTickGeneration(axes[axis], options[axis]);
+ setTicks(axes[axis], options[axis]);
+ measureLabels(axes[axis], options[axis]);
+ }
+
+ setGridSpacing();
+ }
+ else {
+ plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = 0;
+ plotWidth = canvasWidth;
+ plotHeight = canvasHeight;
+ }
+
+ for (axis in axes)
+ setTransformationHelpers(axes[axis], options[axis]);
- setSpacing();
- insertLabels();
+ if (options.grid.show)
+ insertLabels();
+
insertLegend();
}
function setRange(axis, axisOptions) {
- var min = axisOptions.min != null ? axisOptions.min : axis.datamin;
- var max = axisOptions.max != null ? axisOptions.max : axis.datamax;
+ var min = +(axisOptions.min != null ? axisOptions.min : axis.datamin),
+ max = +(axisOptions.max != null ? axisOptions.max : axis.datamax),
+ delta = max - min;
- if (max - min == 0.0) {
+ if (delta == 0.0) {
// degenerate case
- var widen;
- if (max == 0.0)
- widen = 1.0;
- else
- widen = 0.01;
+ var widen = max == 0 ? 1 : 0.01;
- min -= widen;
- max += widen;
+ if (axisOptions.min == null)
+ min -= widen;
+ // alway widen max if we couldn't widen min to ensure we
+ // don't fall into min == max which doesn't work
+ if (axisOptions.max == null || axisOptions.min != null)
+ max += widen;
}
else {
// consider autoscaling
var margin = axisOptions.autoscaleMargin;
if (margin != null) {
if (axisOptions.min == null) {
- min -= (max - min) * margin;
+ min -= delta * margin;
// make sure we don't go below zero if all values
// are positive
- if (min < 0 && axis.datamin >= 0)
+ if (min < 0 && axis.datamin != null && axis.datamin >= 0)
min = 0;
}
if (axisOptions.max == null) {
- max += (max - min) * margin;
- if (max > 0 && axis.datamax <= 0)
+ max += delta * margin;
+ if (max > 0 && axis.datamax != null && axis.datamax <= 0)
max = 0;
}
}
@@ -412,54 +771,18 @@
if (typeof axisOptions.ticks == "number" && axisOptions.ticks > 0)
noTicks = axisOptions.ticks;
else if (axis == axes.xaxis || axis == axes.x2axis)
- noTicks = canvasWidth / 100;
+ // heuristic based on the model a*sqrt(x) fitted to
+ // some reasonable data points
+ noTicks = 0.3 * Math.sqrt(canvasWidth);
else
- noTicks = canvasHeight / 60;
+ noTicks = 0.3 * Math.sqrt(canvasHeight);
- var delta = (axis.max - axis.min) / noTicks;
- var size, generator, unit, formatter, i, magn, norm;
+ var delta = (axis.max - axis.min) / noTicks,
+ size, generator, unit, formatter, i, magn, norm;
if (axisOptions.mode == "time") {
// pretty handling of time
- function formatDate(d, fmt, monthNames) {
- var leftPad = function(n) {
- n = "" + n;
- return n.length == 1 ? "0" + n : n;
- };
-
- var r = [];
- var escape = false;
- if (monthNames == null)
- monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
- for (var i = 0; i < fmt.length; ++i) {
- var c = fmt.charAt(i);
-
- if (escape) {
- switch (c) {
- case 'h': c = "" + d.getUTCHours(); break;
- case 'H': c = leftPad(d.getUTCHours()); break;
- case 'M': c = leftPad(d.getUTCMinutes()); break;
- case 'S': c = leftPad(d.getUTCSeconds()); break;
- case 'd': c = "" + d.getUTCDate(); break;
- case 'm': c = "" + (d.getUTCMonth() + 1); break;
- case 'y': c = "" + d.getUTCFullYear(); break;
- case 'b': c = "" + monthNames[d.getUTCMonth()]; break;
- }
- r.push(c);
- escape = false;
- }
- else {
- if (c == "%")
- escape = true;
- else
- r.push(c);
- }
- }
- return r.join("");
- }
-
-
// map of app. size of time units in milliseconds
var timeUnitSize = {
"second": 1000,
@@ -591,18 +914,19 @@
// first check global format
if (axisOptions.timeformat != null)
- return formatDate(d, axisOptions.timeformat, axisOptions.monthNames);
+ return $.plot.formatDate(d, axisOptions.timeformat, axisOptions.monthNames);
var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]];
var span = axis.max - axis.min;
+ var suffix = (axisOptions.twelveHourClock) ? " %p" : "";
if (t < timeUnitSize.minute)
- fmt = "%h:%M:%S";
+ fmt = "%h:%M:%S" + suffix;
else if (t < timeUnitSize.day) {
if (span < 2 * timeUnitSize.day)
- fmt = "%h:%M";
+ fmt = "%h:%M" + suffix;
else
- fmt = "%b %d %h:%M";
+ fmt = "%b %d %h:%M" + suffix;
}
else if (t < timeUnitSize.month)
fmt = "%b %d";
@@ -615,7 +939,7 @@
else
fmt = "%y";
- return formatDate(d, fmt, axisOptions.monthNames);
+ return $.plot.formatDate(d, fmt, axisOptions.monthNames);
};
}
else {
@@ -624,7 +948,7 @@
var dec = -Math.floor(Math.log(delta) / Math.LN10);
if (maxDec != null && dec > maxDec)
dec = maxDec;
-
+
magn = Math.pow(10, -dec);
norm = delta / magn; // norm is between 1.0 and 10.0
@@ -650,9 +974,9 @@
if (axisOptions.tickSize != null)
size = axisOptions.tickSize;
-
+
axis.tickDecimals = Math.max(0, (maxDec != null) ? maxDec : dec);
-
+
generator = function (axis) {
var ticks = [];
@@ -679,10 +1003,6 @@
axis.tickFormatter = function (v, axis) { return "" + axisOptions.tickFormatter(v, axis); };
else
axis.tickFormatter = formatter;
- if (axisOptions.labelWidth != null)
- axis.labelWidth = axisOptions.labelWidth;
- if (axisOptions.labelHeight != null)
- axis.labelHeight = axisOptions.labelHeight;
}
function setTicks(axis, axisOptions) {
@@ -727,104 +1047,25 @@
if (axisOptions.min == null)
axis.min = Math.min(axis.min, axis.ticks[0].v);
if (axisOptions.max == null && axis.ticks.length > 1)
- axis.max = Math.min(axis.max, axis.ticks[axis.ticks.length - 1].v);
+ axis.max = Math.max(axis.max, axis.ticks[axis.ticks.length - 1].v);
}
}
-
- function setSpacing() {
- function measureXLabels(axis) {
- // to avoid measuring the widths of the labels, we
- // construct fixed-size boxes and put the labels inside
- // them, we don't need the exact figures and the
- // fixed-size box content is easy to center
- if (axis.labelWidth == null)
- axis.labelWidth = canvasWidth / 6;
+
+ function draw() {
+ ctx.clearRect(0, 0, canvasWidth, canvasHeight);
- // measure x label heights
- if (axis.labelHeight == null) {
- labels = [];
- for (i = 0; i < axis.ticks.length; ++i) {
- l = axis.ticks[i].label;
- if (l)
- labels.push('<div class="tickLabel" style="float:left;width:' + axis.labelWidth + 'px">' + l + '</div>');
- }
-
- axis.labelHeight = 0;
- if (labels.length > 0) {
- var dummyDiv = $('<div style="position:absolute;top:-10000px;width:10000px;font-size:smaller">'
- + labels.join("") + '<div style="clear:left"></div></div>').appendTo(target);
- axis.labelHeight = dummyDiv.height();
- dummyDiv.remove();
- }
- }
- }
-
- function measureYLabels(axis) {
- if (axis.labelWidth == null || axis.labelHeight == null) {
- var i, labels = [], l;
- // calculate y label dimensions
- for (i = 0; i < axis.ticks.length; ++i) {
- l = axis.ticks[i].label;
- if (l)
- labels.push('<div class="tickLabel">' + l + '</div>');
- }
-
- if (labels.length > 0) {
- var dummyDiv = $('<div style="position:absolute;top:-10000px;font-size:smaller">'
- + labels.join("") + '</div>').appendTo(target);
- if (axis.labelWidth == null)
- axis.labelWidth = dummyDiv.width();
- if (axis.labelHeight == null)
- axis.labelHeight = dummyDiv.find("div").height();
- dummyDiv.remove();
- }
-
- if (axis.labelWidth == null)
- axis.labelWidth = 0;
- if (axis.labelHeight == null)
- axis.labelHeight = 0;
- }
- }
+ var grid = options.grid;
- measureXLabels(axes.xaxis);
- measureYLabels(axes.yaxis);
- measureXLabels(axes.x2axis);
- measureYLabels(axes.y2axis);
-
- // get the most space needed around the grid for things
- // that may stick out
- var maxOutset = options.grid.borderWidth / 2;
- for (i = 0; i < series.length; ++i)
- maxOutset = Math.max(maxOutset, 2 * (series[i].points.radius + series[i].points.lineWidth/2));
-
- plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = maxOutset;
-
- if (axes.xaxis.labelHeight > 0)
- plotOffset.bottom = Math.max(maxOutset, axes.xaxis.labelHeight + options.grid.labelMargin);
- if (axes.yaxis.labelWidth > 0)
- plotOffset.left = Math.max(maxOutset, axes.yaxis.labelWidth + options.grid.labelMargin);
-
- if (axes.x2axis.labelHeight > 0)
- plotOffset.top = Math.max(maxOutset, axes.x2axis.labelHeight + options.grid.labelMargin);
-
- if (axes.y2axis.labelWidth > 0)
- plotOffset.right = Math.max(maxOutset, axes.y2axis.labelWidth + options.grid.labelMargin);
-
- plotWidth = canvasWidth - plotOffset.left - plotOffset.right;
- plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top;
+ if (grid.show && !grid.aboveData)
+ drawGrid();
- // precompute how much the axis is scaling a point in canvas space
- axes.xaxis.scale = plotWidth / (axes.xaxis.max - axes.xaxis.min);
- axes.yaxis.scale = plotHeight / (axes.yaxis.max - axes.yaxis.min);
- axes.x2axis.scale = plotWidth / (axes.x2axis.max - axes.x2axis.min);
- axes.y2axis.scale = plotHeight / (axes.y2axis.max - axes.y2axis.min);
- }
-
- function draw() {
- drawGrid();
- for (var i = 0; i < series.length; i++) {
+ for (var i = 0; i < series.length; ++i)
drawSeries(series[i]);
- }
+
+ executeHooks(hooks.draw, [ctx]);
+
+ if (grid.show && grid.aboveData)
+ drawGrid();
}
function extractRange(ranges, coord) {
@@ -860,18 +1101,17 @@
var i;
ctx.save();
- ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.translate(plotOffset.left, plotOffset.top);
// draw background, if any
if (options.grid.backgroundColor) {
- ctx.fillStyle = options.grid.backgroundColor;
+ ctx.fillStyle = getColorOrGradient(options.grid.backgroundColor, plotHeight, 0, "rgba(255, 255, 255, 0)");
ctx.fillRect(0, 0, plotWidth, plotHeight);
}
// draw markings
- if (options.grid.markings) {
- var markings = options.grid.markings;
+ var markings = options.grid.markings;
+ if (markings) {
if ($.isFunction(markings))
// xmin etc. are backwards-compatible, to be removed in future
markings = markings({ xmin: axes.xaxis.min, xmax: axes.xaxis.max, ymin: axes.yaxis.min, ymax: axes.yaxis.max, xaxis: axes.xaxis, yaxis: axes.yaxis, x2axis: axes.x2axis, y2axis: axes.y2axis });
@@ -912,19 +1152,21 @@
if (xrange.from == xrange.to || yrange.from == yrange.to) {
// draw line
+ ctx.beginPath();
ctx.strokeStyle = m.color || options.grid.markingsColor;
ctx.lineWidth = m.lineWidth || options.grid.markingsLineWidth;
- ctx.moveTo(Math.floor(xrange.from), Math.floor(yrange.from));
- ctx.lineTo(Math.floor(xrange.to), Math.floor(yrange.to));
+ //ctx.moveTo(Math.floor(xrange.from), yrange.from);
+ //ctx.lineTo(Math.floor(xrange.to), yrange.to);
+ ctx.moveTo(xrange.from, yrange.from);
+ ctx.lineTo(xrange.to, yrange.to);
ctx.stroke();
}
else {
// fill area
ctx.fillStyle = m.color || options.grid.markingsColor;
- ctx.fillRect(Math.floor(xrange.from),
- Math.floor(yrange.to),
- Math.floor(xrange.to - xrange.from),
- Math.floor(yrange.from - yrange.to));
+ ctx.fillRect(xrange.from, yrange.to,
+ xrange.to - xrange.from,
+ yrange.from - yrange.to);
}
}
}
@@ -977,53 +1219,55 @@
if (options.grid.borderWidth) {
// draw border
- ctx.lineWidth = options.grid.borderWidth;
- ctx.strokeStyle = options.grid.color;
- ctx.lineJoin = "round";
- ctx.strokeRect(0, 0, plotWidth, plotHeight);
+ var bw = options.grid.borderWidth;
+ ctx.lineWidth = bw;
+ ctx.strokeStyle = options.grid.borderColor;
+ ctx.strokeRect(-bw/2, -bw/2, plotWidth + bw, plotHeight + bw);
}
ctx.restore();
}
-
+
function insertLabels() {
- target.find(".tickLabels").remove();
+ placeholder.find(".tickLabels").remove();
- var html = '<div class="tickLabels" style="font-size:smaller;color:' + options.grid.color + '">';
+ var html = ['<div class="tickLabels" style="font-size:smaller;color:' + options.grid.color + '">'];
function addLabels(axis, labelGenerator) {
for (var i = 0; i < axis.ticks.length; ++i) {
var tick = axis.ticks[i];
if (!tick.label || tick.v < axis.min || tick.v > axis.max)
continue;
- html += labelGenerator(tick, axis);
+ html.push(labelGenerator(tick, axis));
}
}
+
+ var margin = options.grid.labelMargin + options.grid.borderWidth;
addLabels(axes.xaxis, function (tick, axis) {
- return '<div style="position:absolute;top:' + (plotOffset.top + plotHeight + options.grid.labelMargin) + 'px;left:' + (plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
+ return '<div style="position:absolute;top:' + (plotOffset.top + plotHeight + margin) + 'px;left:' + Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
});
addLabels(axes.yaxis, function (tick, axis) {
- return '<div style="position:absolute;top:' + (plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;right:' + (plotOffset.right + plotWidth + options.grid.labelMargin) + 'px;width:' + axis.labelWidth + 'px;text-align:right" class="tickLabel">' + tick.label + "</div>";
+ return '<div style="position:absolute;top:' + Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;right:' + (plotOffset.right + plotWidth + margin) + 'px;width:' + axis.labelWidth + 'px;text-align:right" class="tickLabel">' + tick.label + "</div>";
});
addLabels(axes.x2axis, function (tick, axis) {
- return '<div style="position:absolute;bottom:' + (plotOffset.bottom + plotHeight + options.grid.labelMargin) + 'px;left:' + (plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
+ return '<div style="position:absolute;bottom:' + (plotOffset.bottom + plotHeight + margin) + 'px;left:' + Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
});
addLabels(axes.y2axis, function (tick, axis) {
- return '<div style="position:absolute;top:' + (plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;left:' + (plotOffset.left + plotWidth + options.grid.labelMargin) +'px;width:' + axis.labelWidth + 'px;text-align:left" class="tickLabel">' + tick.label + "</div>";
+ return '<div style="position:absolute;top:' + Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;left:' + (plotOffset.left + plotWidth + margin) +'px;width:' + axis.labelWidth + 'px;text-align:left" class="tickLabel">' + tick.label + "</div>";
});
- html += '</div>';
+ html.push('</div>');
- target.append(html);
+ placeholder.append(html.join(""));
}
function drawSeries(series) {
- if (series.lines.show || (!series.bars.show && !series.points.show))
+ if (series.lines.show)
drawSeriesLines(series);
if (series.bars.show)
drawSeriesBars(series);
@@ -1032,19 +1276,18 @@
}
function drawSeriesLines(series) {
- function plotLine(data, offset, axisx, axisy) {
- var prev, cur = null, drawx = null, drawy = null;
+ function plotLine(datapoints, xoffset, yoffset, axisx, axisy) {
+ var points = datapoints.points,
+ ps = datapoints.pointsize,
+ prevx = null, prevy = null;
ctx.beginPath();
- for (var i = 0; i < data.length; ++i) {
- prev = cur;
- cur = data[i];
-
- if (prev == null || cur == null)
- continue;
+ for (var i = ps; i < points.length; i += ps) {
+ var x1 = points[i - ps], y1 = points[i - ps + 1],
+ x2 = points[i], y2 = points[i + 1];
- var x1 = prev[0], y1 = prev[1],
- x2 = cur[0], y2 = cur[1];
+ if (x1 == null || x2 == null)
+ continue;
// clip with ymin
if (y1 <= y2 && y1 < axisy.min) {
@@ -1103,29 +1346,27 @@
x2 = axisx.max;
}
- if (drawx != axisx.p2c(x1) || drawy != axisy.p2c(y1) + offset)
- ctx.moveTo(axisx.p2c(x1), axisy.p2c(y1) + offset);
+ if (x1 != prevx || y1 != prevy)
+ ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);
- drawx = axisx.p2c(x2);
- drawy = axisy.p2c(y2) + offset;
- ctx.lineTo(drawx, drawy);
+ prevx = x2;
+ prevy = y2;
+ ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset);
}
ctx.stroke();
}
- function plotLineArea(data, axisx, axisy) {
- var prev, cur = null;
-
- var bottom = Math.min(Math.max(0, axisy.min), axisy.max);
- var top, lastX = 0;
-
- var areaOpen = false;
+ function plotLineArea(datapoints, axisx, axisy) {
+ var points = datapoints.points,
+ ps = datapoints.pointsize,
+ bottom = Math.min(Math.max(0, axisy.min), axisy.max),
+ top, lastX = 0, areaOpen = false;
- for (var i = 0; i < data.length; ++i) {
- prev = cur;
- cur = data[i];
-
- if (areaOpen && prev != null && cur == null) {
+ for (var i = ps; i < points.length; i += ps) {
+ var x1 = points[i - ps], y1 = points[i - ps + 1],
+ x2 = points[i], y2 = points[i + 1];
+
+ if (areaOpen && x1 != null && x2 == null) {
// close area
ctx.lineTo(axisx.p2c(lastX), axisy.p2c(bottom));
ctx.fill();
@@ -1133,11 +1374,8 @@
continue;
}
- if (prev == null || cur == null)
+ if (x1 == null || x2 == null)
continue;
-
- var x1 = prev[0], y1 = prev[1],
- x2 = cur[0], y2 = cur[1];
// clip x values
@@ -1180,11 +1418,13 @@
if (y1 >= axisy.max && y2 >= axisy.max) {
ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max));
ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max));
+ lastX = x2;
continue;
}
else if (y1 <= axisy.min && y2 <= axisy.min) {
ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min));
+ lastX = x2;
continue;
}
@@ -1239,8 +1479,8 @@
else
top = axisy.max;
- ctx.lineTo(axisx.p2c(x2old), axisy.p2c(top));
ctx.lineTo(axisx.p2c(x2), axisy.p2c(top));
+ ctx.lineTo(axisx.p2c(x2old), axisy.p2c(top));
}
lastX = Math.max(x2, x2old);
@@ -1256,57 +1496,48 @@
ctx.translate(plotOffset.left, plotOffset.top);
ctx.lineJoin = "round";
- var lw = series.lines.lineWidth;
- var sw = series.shadowSize;
+ var lw = series.lines.lineWidth,
+ sw = series.shadowSize;
// FIXME: consider another form of shadow when filling is turned on
- if (sw > 0) {
- // draw shadow in two steps
- ctx.lineWidth = sw / 2;
+ if (lw > 0 && sw > 0) {
+ // draw shadow as a thick and thin line with transparency
+ ctx.lineWidth = sw;
ctx.strokeStyle = "rgba(0,0,0,0.1)";
- plotLine(series.data, lw/2 + sw/2 + ctx.lineWidth/2, series.xaxis, series.yaxis);
-
- ctx.lineWidth = sw / 2;
- ctx.strokeStyle = "rgba(0,0,0,0.2)";
- plotLine(series.data, lw/2 + ctx.lineWidth/2, series.xaxis, series.yaxis);
+ // position shadow at angle from the mid of line
+ var angle = Math.PI/18;
+ plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2), series.xaxis, series.yaxis);
+ ctx.lineWidth = sw/2;
+ plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4), series.xaxis, series.yaxis);
}
ctx.lineWidth = lw;
ctx.strokeStyle = series.color;
- setFillStyle(series.lines, series.color);
- if (series.lines.fill)
- plotLineArea(series.data, series.xaxis, series.yaxis);
- plotLine(series.data, 0, series.xaxis, series.yaxis);
+ var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight);
+ if (fillStyle) {
+ ctx.fillStyle = fillStyle;
+ plotLineArea(series.datapoints, series.xaxis, series.yaxis);
+ }
+
+ if (lw > 0)
+ plotLine(series.datapoints, 0, 0, series.xaxis, series.yaxis);
ctx.restore();
}
function drawSeriesPoints(series) {
- function plotPoints(data, radius, fill, axisx, axisy) {
- for (var i = 0; i < data.length; ++i) {
- if (data[i] == null)
- continue;
-
- var x = data[i][0], y = data[i][1];
- if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
+ function plotPoints(datapoints, radius, fillStyle, offset, circumference, axisx, axisy) {
+ var points = datapoints.points, ps = datapoints.pointsize;
+
+ for (var i = 0; i < points.length; i += ps) {
+ var x = points[i], y = points[i + 1];
+ if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
continue;
ctx.beginPath();
- ctx.arc(axisx.p2c(x), axisy.p2c(y), radius, 0, 2 * Math.PI, true);
- if (fill)
+ ctx.arc(axisx.p2c(x), axisy.p2c(y) + offset, radius, 0, circumference, false);
+ if (fillStyle) {
+ ctx.fillStyle = fillStyle;
ctx.fill();
- ctx.stroke();
- }
- }
-
- function plotPointShadows(data, offset, radius, axisx, axisy) {
- for (var i = 0; i < data.length; ++i) {
- if (data[i] == null)
- continue;
-
- var x = data[i][0], y = data[i][1];
- if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
- continue;
- ctx.beginPath();
- ctx.arc(axisx.p2c(x), axisy.p2c(y) + offset, radius, 0, Math.PI, false);
+ }
ctx.stroke();
}
}
@@ -1314,43 +1545,70 @@
ctx.save();
ctx.translate(plotOffset.left, plotOffset.top);
- var lw = series.lines.lineWidth;
- var sw = series.shadowSize;
- if (sw > 0) {
+ var lw = series.lines.lineWidth,
+ sw = series.shadowSize,
+ radius = series.points.radius;
+ if (lw > 0 && sw > 0) {
// draw shadow in two steps
- ctx.lineWidth = sw / 2;
+ var w = sw / 2;
+ ctx.lineWidth = w;
ctx.strokeStyle = "rgba(0,0,0,0.1)";
- plotPointShadows(series.data, sw/2 + ctx.lineWidth/2,
- series.points.radius, series.xaxis, series.yaxis);
+ plotPoints(series.datapoints, radius, null, w + w/2, Math.PI,
+ series.xaxis, series.yaxis);
- ctx.lineWidth = sw / 2;
ctx.strokeStyle = "rgba(0,0,0,0.2)";
- plotPointShadows(series.data, ctx.lineWidth/2,
- series.points.radius, series.xaxis, series.yaxis);
+ plotPoints(series.datapoints, radius, null, w/2, Math.PI,
+ series.xaxis, series.yaxis);
}
- ctx.lineWidth = series.points.lineWidth;
+ ctx.lineWidth = lw;
ctx.strokeStyle = series.color;
- setFillStyle(series.points, series.color);
- plotPoints(series.data, series.points.radius, series.points.fill,
+ plotPoints(series.datapoints, radius,
+ getFillStyle(series.points, series.color), 0, 2 * Math.PI,
series.xaxis, series.yaxis);
ctx.restore();
}
- function drawBar(x, y, barLeft, barRight, offset, fill, axisx, axisy, c) {
- var drawLeft = true, drawRight = true,
- drawTop = true, drawBottom = false,
- left = x + barLeft, right = x + barRight,
- bottom = 0, top = y;
-
- // account for negative bars
- if (top < bottom) {
- top = 0;
- bottom = y;
- drawBottom = true;
- drawTop = false;
+ function drawBar(x, y, b, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c, horizontal) {
+ var left, right, bottom, top,
+ drawLeft, drawRight, drawTop, drawBottom,
+ tmp;
+
+ if (horizontal) {
+ drawBottom = drawRight = drawTop = true;
+ drawLeft = false;
+ left = b;
+ right = x;
+ top = y + barLeft;
+ bottom = y + barRight;
+
+ // account for negative bars
+ if (right < left) {
+ tmp = right;
+ right = left;
+ left = tmp;
+ drawLeft = true;
+ drawRight = false;
+ }
}
-
+ else {
+ drawLeft = drawRight = drawTop = true;
+ drawBottom = false;
+ left = x + barLeft;
+ right = x + barRight;
+ bottom = b;
+ top = y;
+
+ // account for negative bars
+ if (top < bottom) {
+ tmp = top;
+ top = bottom;
+ bottom = tmp;
+ drawBottom = true;
+ drawTop = false;
+ }
+ }
+
// clip
if (right < axisx.min || left > axisx.max ||
top < axisy.min || bottom > axisy.max)
@@ -1376,24 +1634,27 @@
drawTop = false;
}
+ left = axisx.p2c(left);
+ bottom = axisy.p2c(bottom);
+ right = axisx.p2c(right);
+ top = axisy.p2c(top);
+
// fill the bar
- if (fill) {
+ if (fillStyleCallback) {
c.beginPath();
- c.moveTo(axisx.p2c(left), axisy.p2c(bottom) + offset);
- c.lineTo(axisx.p2c(left), axisy.p2c(top) + offset);
- c.lineTo(axisx.p2c(right), axisy.p2c(top) + offset);
- c.lineTo(axisx.p2c(right), axisy.p2c(bottom) + offset);
+ c.moveTo(left, bottom);
+ c.lineTo(left, top);
+ c.lineTo(right, top);
+ c.lineTo(right, bottom);
+ c.fillStyle = fillStyleCallback(bottom, top);
c.fill();
}
// draw outline
if (drawLeft || drawRight || drawTop || drawBottom) {
c.beginPath();
- left = axisx.p2c(left);
- bottom = axisy.p2c(bottom);
- right = axisx.p2c(right);
- top = axisy.p2c(top);
-
+
+ // FIXME: inline moveTo is buggy with excanvas
c.moveTo(left, bottom + offset);
if (drawLeft)
c.lineTo(left, top + offset);
@@ -1416,67 +1677,54 @@
}
function drawSeriesBars(series) {
- function plotBars(data, barLeft, barRight, offset, fill, axisx, axisy) {
- for (var i = 0; i < data.length; i++) {
- if (data[i] == null)
+ function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy) {
+ var points = datapoints.points, ps = datapoints.pointsize;
+
+ for (var i = 0; i < points.length; i += ps) {
+ if (points[i] == null)
continue;
- drawBar(data[i][0], data[i][1], barLeft, barRight, offset, fill, axisx, axisy, ctx);
+ drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal);
}
}
ctx.save();
ctx.translate(plotOffset.left, plotOffset.top);
- ctx.lineJoin = "round";
-
- // FIXME: figure out a way to add shadows
- /*
- var bw = series.bars.barWidth;
- var lw = series.bars.lineWidth;
- var sw = series.shadowSize;
- if (sw > 0) {
- // draw shadow in two steps
- ctx.lineWidth = sw / 2;
- ctx.strokeStyle = "rgba(0,0,0,0.1)";
- plotBars(series.data, bw, lw/2 + sw/2 + ctx.lineWidth/2, false);
-
- ctx.lineWidth = sw / 2;
- ctx.strokeStyle = "rgba(0,0,0,0.2)";
- plotBars(series.data, bw, lw/2 + ctx.lineWidth/2, false);
- }*/
+ // FIXME: figure out a way to add shadows (for instance along the right edge)
ctx.lineWidth = series.bars.lineWidth;
ctx.strokeStyle = series.color;
- setFillStyle(series.bars, series.color);
var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2;
- plotBars(series.data, barLeft, barLeft + series.bars.barWidth, 0, series.bars.fill, series.xaxis, series.yaxis);
+ var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null;
+ plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, 0, fillStyleCallback, series.xaxis, series.yaxis);
ctx.restore();
}
- function setFillStyle(obj, seriesColor) {
- var fill = obj.fill;
+ function getFillStyle(filloptions, seriesColor, bottom, top) {
+ var fill = filloptions.fill;
if (!fill)
- return;
+ return null;
+
+ if (filloptions.fillColor)
+ return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor);
- if (obj.fillColor)
- ctx.fillStyle = obj.fillColor;
- else {
- var c = parseColor(seriesColor);
- c.a = typeof fill == "number" ? fill : 0.4;
- c.normalize();
- ctx.fillStyle = c.toString();
- }
+ var c = $.color.parse(seriesColor);
+ c.a = typeof fill == "number" ? fill : 0.4;
+ c.normalize();
+ return c.toString();
}
function insertLegend() {
- target.find(".legend").remove();
+ placeholder.find(".legend").remove();
if (!options.legend.show)
return;
- var fragments = [];
- var rowStarted = false;
+ var fragments = [], rowStarted = false,
+ lf = options.legend.labelFormatter, s, label;
for (i = 0; i < series.length; ++i) {
- if (!series[i].label)
+ s = series[i];
+ label = s.label;
+ if (!label)
continue;
if (i % options.legend.noColumns == 0) {
@@ -1486,12 +1734,11 @@
rowStarted = true;
}
- var label = series[i].label;
- if (options.legend.labelFormatter != null)
- label = options.legend.labelFormatter(label);
+ if (lf)
+ label = lf(label, s);
fragments.push(
- '<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:14px;height:10px;background-color:' + series[i].color + ';overflow:hidden"></div></div></td>' +
+ '<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:4px;height:0;border:5px solid ' + s.color + ';overflow:hidden"></div></div></td>' +
'<td class="legendLabel">' + label + '</td>');
}
if (rowStarted)
@@ -1502,35 +1749,38 @@
var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>';
if (options.legend.container != null)
- options.legend.container.html(table);
+ $(options.legend.container).html(table);
else {
- var pos = "";
- var p = options.legend.position, m = options.legend.margin;
+ var pos = "",
+ p = options.legend.position,
+ m = options.legend.margin;
+ if (m[0] == null)
+ m = [m, m];
if (p.charAt(0) == "n")
- pos += 'top:' + (m + plotOffset.top) + 'px;';
+ pos += 'top:' + (m[1] + plotOffset.top) + 'px;';
else if (p.charAt(0) == "s")
- pos += 'bottom:' + (m + plotOffset.bottom) + 'px;';
+ pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;';
if (p.charAt(1) == "e")
- pos += 'right:' + (m + plotOffset.right) + 'px;';
+ pos += 'right:' + (m[0] + plotOffset.right) + 'px;';
else if (p.charAt(1) == "w")
- pos += 'left:' + (m + plotOffset.left) + 'px;';
- var legend = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(target);
+ pos += 'left:' + (m[0] + plotOffset.left) + 'px;';
+ var legend = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(placeholder);
if (options.legend.backgroundOpacity != 0.0) {
// put in the transparent background
// separately to avoid blended labels and
// label boxes
var c = options.legend.backgroundColor;
if (c == null) {
- var tmp;
- if (options.grid.backgroundColor)
- tmp = options.grid.backgroundColor;
+ c = options.grid.backgroundColor;
+ if (c && typeof c == "string")
+ c = $.color.parse(c);
else
- tmp = extractColor(legend);
- c = parseColor(tmp).adjust(null, null, null, 1).toString();
+ c = $.color.extract(legend, 'background-color');
+ c.a = 1;
+ c = c.toString();
}
var div = legend.children();
$('<div style="position:absolute;width:' + div.width() + 'px;height:' + div.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').prependTo(legend).css('opacity', options.legend.backgroundOpacity);
-
}
}
}
@@ -1538,144 +1788,104 @@
// interactive features
- var lastMousePos = { pageX: null, pageY: null },
- selection = {
- first: { x: -1, y: -1}, second: { x: -1, y: -1},
- show: false, active: false },
- highlights = [],
- clickIsMouseUp = false,
- redrawTimeout = null,
- hoverTimeout = null;
+ var highlights = [],
+ redrawTimeout = null;
- // Returns the data item the mouse is over, or null if none is found
- function findNearbyItem(mouseX, mouseY) {
+ // returns the data item the mouse is over, or null if none is found
+ function findNearbyItem(mouseX, mouseY, seriesFilter) {
var maxDistance = options.grid.mouseActiveRadius,
- lowestDistance = maxDistance * maxDistance + 1,
- item = null, foundPoint = false;
+ smallestDistance = maxDistance * maxDistance + 1,
+ item = null, foundPoint = false, i, j;
- function result(i, j) {
- return { datapoint: series[i].data[j],
- dataIndex: j,
- series: series[i],
- seriesIndex: i };
- }
-
- for (var i = 0; i < series.length; ++i) {
- var data = series[i].data,
- axisx = series[i].xaxis,
- axisy = series[i].yaxis,
+ for (i = 0; i < series.length; ++i) {
+ if (!seriesFilter(series[i]))
+ continue;
- // precompute some stuff to make the loop faster
- mx = axisx.c2p(mouseX),
+ var s = series[i],
+ axisx = s.xaxis,
+ axisy = s.yaxis,
+ points = s.datapoints.points,
+ ps = s.datapoints.pointsize,
+ mx = axisx.c2p(mouseX), // precompute some stuff to make the loop faster
my = axisy.c2p(mouseY),
maxx = maxDistance / axisx.scale,
- maxy = maxDistance / axisy.scale,
- checkbar = series[i].bars.show,
- checkpoint = !(series[i].bars.show && !(series[i].lines.show || series[i].points.show)),
- barLeft = series[i].bars.align == "left" ? 0 : -series[i].bars.barWidth/2,
- barRight = barLeft + series[i].bars.barWidth;
- for (var j = 0; j < data.length; ++j) {
- if (data[j] == null)
- continue;
+ maxy = maxDistance / axisy.scale;
- var x = data[j][0], y = data[j][1];
-
- if (checkbar) {
- // For a bar graph, the cursor must be inside the bar
- // and no other point can be nearby
- if (!foundPoint && mx >= x + barLeft &&
- mx <= x + barRight &&
- my >= Math.min(0, y) && my <= Math.max(0, y))
- item = result(i, j);
- }
-
- if (checkpoint) {
+ if (s.lines.show || s.points.show) {
+ for (j = 0; j < points.length; j += ps) {
+ var x = points[j], y = points[j + 1];
+ if (x == null)
+ continue;
+
// For points and lines, the cursor must be within a
// certain distance to the data point
-
- // check bounding box first
- if ((x - mx > maxx || x - mx < -maxx) ||
- (y - my > maxy || y - my < -maxy))
+ if (x - mx > maxx || x - mx < -maxx ||
+ y - my > maxy || y - my < -maxy)
continue;
// We have to calculate distances in pixels, not in
- // data units, because the scale of the axes may be different
+ // data units, because the scales of the axes may be different
var dx = Math.abs(axisx.p2c(x) - mouseX),
dy = Math.abs(axisy.p2c(y) - mouseY),
- dist = dx * dx + dy * dy;
- if (dist < lowestDistance) {
- lowestDistance = dist;
- foundPoint = true;
- item = result(i, j);
+ dist = dx * dx + dy * dy; // we save the sqrt
+
+ // use <= to ensure last point takes precedence
+ // (last generally means on top of)
+ if (dist <= smallestDistance) {
+ smallestDistance = dist;
+ item = [i, j / ps];
}
}
}
+
+ if (s.bars.show && !item) { // no other point can be nearby
+ var barLeft = s.bars.align == "left" ? 0 : -s.bars.barWidth/2,
+ barRight = barLeft + s.bars.barWidth;
+
+ for (j = 0; j < points.length; j += ps) {
+ var x = points[j], y = points[j + 1], b = points[j + 2];
+ if (x == null)
+ continue;
+
+ // for a bar graph, the cursor must be inside the bar
+ if (series[i].bars.horizontal ?
+ (mx <= Math.max(b, x) && mx >= Math.min(b, x) &&
+ my >= y + barLeft && my <= y + barRight) :
+ (mx >= x + barLeft && mx <= x + barRight &&
+ my >= Math.min(b, y) && my <= Math.max(b, y)))
+ item = [i, j / ps];
+ }
+ }
}
- return item;
- }
-
- function onMouseMove(ev) {
- // FIXME: temp. work-around until jQuery bug 1871 is fixed
- var e = ev || window.event;
- if (e.pageX == null && e.clientX != null) {
- var de = document.documentElement, b = document.body;
- lastMousePos.pageX = e.clientX + (de && de.scrollLeft || b.scrollLeft || 0);
- lastMousePos.pageY = e.clientY + (de && de.scrollTop || b.scrollTop || 0);
- }
- else {
- lastMousePos.pageX = e.pageX;
- lastMousePos.pageY = e.pageY;
+ if (item) {
+ i = item[0];
+ j = item[1];
+ ps = series[i].datapoints.pointsize;
+
+ return { datapoint: series[i].datapoints.points.slice(j * ps, (j + 1) * ps),
+ dataIndex: j,
+ series: series[i],
+ seriesIndex: i };
}
- if (options.grid.hoverable && !hoverTimeout)
- hoverTimeout = setTimeout(onHover, 100);
-
- if (selection.active)
- updateSelection(lastMousePos);
+ return null;
}
-
- function onMouseDown(e) {
- if (e.which != 1) // only accept left-click
- return;
-
- // cancel out any text selections
- document.body.focus();
- // prevent text selection and drag in old-school browsers
- if (document.onselectstart !== undefined && workarounds.onselectstart == null) {
- workarounds.onselectstart = document.onselectstart;
- document.onselectstart = function () { return false; };
- }
- if (document.ondrag !== undefined && workarounds.ondrag == null) {
- workarounds.ondrag = document.ondrag;
- document.ondrag = function () { return false; };
- }
-
- setSelectionPos(selection.first, e);
-
- lastMousePos.pageX = null;
- selection.active = true;
- $(document).one("mouseup", onSelectionMouseUp);
- }
-
- function onClick(e) {
- if (clickIsMouseUp) {
- clickIsMouseUp = false;
- return;
- }
-
- triggerClickHoverEvent("plotclick", e);
+ function onMouseMove(e) {
+ if (options.grid.hoverable)
+ triggerClickHoverEvent("plothover", e,
+ function (s) { return s["hoverable"] != false; });
}
- function onHover() {
- triggerClickHoverEvent("plothover", lastMousePos);
- hoverTimeout = null;
+ function onClick(e) {
+ triggerClickHoverEvent("plotclick", e,
+ function (s) { return s["clickable"] != false; });
}
// trigger click or hover event (they send the same parameters
// so we share their code)
- function triggerClickHoverEvent(eventname, event) {
+ function triggerClickHoverEvent(eventname, event, seriesFilter) {
var offset = eventHolder.offset(),
pos = { pageX: event.pageX, pageY: event.pageY },
canvasX = event.pageX - offset.left - plotOffset.left,
@@ -1690,45 +1900,44 @@
if (axes.y2axis.used)
pos.y2 = axes.y2axis.c2p(canvasY);
- var item = findNearbyItem(canvasX, canvasY);
+ var item = findNearbyItem(canvasX, canvasY, seriesFilter);
if (item) {
// fill in mouse pos for any listeners out there
item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left + plotOffset.left);
item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top + plotOffset.top);
-
-
}
if (options.grid.autoHighlight) {
+ // clear auto-highlights
for (var i = 0; i < highlights.length; ++i) {
var h = highlights[i];
- if (h.auto &&
+ if (h.auto == eventname &&
!(item && h.series == item.series && h.point == item.datapoint))
unhighlight(h.series, h.point);
}
if (item)
- highlight(item.series, item.datapoint, true);
+ highlight(item.series, item.datapoint, eventname);
}
- target.trigger(eventname, [ pos, item ]);
+ placeholder.trigger(eventname, [ pos, item ]);
}
function triggerRedrawOverlay() {
if (!redrawTimeout)
- redrawTimeout = setTimeout(redrawOverlay, 50);
+ redrawTimeout = setTimeout(drawOverlay, 30);
}
- function redrawOverlay() {
+ function drawOverlay() {
redrawTimeout = null;
- // redraw highlights
+ // draw highlights
octx.save();
octx.clearRect(0, 0, canvasWidth, canvasHeight);
octx.translate(plotOffset.left, plotOffset.top);
- var i, hi;
+ var i, hi;
for (i = 0; i < highlights.length; ++i) {
hi = highlights[i];
@@ -1738,22 +1947,8 @@
drawPointHighlight(hi.series, hi.point);
}
octx.restore();
-
- // redraw selection
- if (selection.show && selectionIsSane()) {
- octx.strokeStyle = parseColor(options.selection.color).scale(null, null, null, 0.8).toString();
- octx.lineWidth = 1;
- ctx.lineJoin = "round";
- octx.fillStyle = parseColor(options.selection.color).scale(null, null, null, 0.4).toString();
-
- var x = Math.min(selection.first.x, selection.second.x),
- y = Math.min(selection.first.y, selection.second.y),
- w = Math.abs(selection.second.x - selection.first.x),
- h = Math.abs(selection.second.y - selection.first.y);
-
- octx.fillRect(x + plotOffset.left, y + plotOffset.top, w, h);
- octx.strokeRect(x + plotOffset.left, y + plotOffset.top, w, h);
- }
+
+ executeHooks(hooks.drawOverlay, [octx]);
}
function highlight(s, point, auto) {
@@ -1774,6 +1969,11 @@
}
function unhighlight(s, point) {
+ if (s == null && point == null) {
+ highlights = [];
+ triggerRedrawOverlay();
+ }
+
if (typeof s == "number")
s = series[s];
@@ -1807,151 +2007,49 @@
var pointRadius = series.points.radius + series.points.lineWidth / 2;
octx.lineWidth = pointRadius;
- octx.strokeStyle = parseColor(series.color).scale(1, 1, 1, 0.5).toString();
+ octx.strokeStyle = $.color.parse(series.color).scale('a', 0.5).toString();
var radius = 1.5 * pointRadius;
octx.beginPath();
- octx.arc(axisx.p2c(x), axisy.p2c(y), radius, 0, 2 * Math.PI, true);
+ octx.arc(axisx.p2c(x), axisy.p2c(y), radius, 0, 2 * Math.PI, false);
octx.stroke();
}
function drawBarHighlight(series, point) {
- octx.lineJoin = "round";
octx.lineWidth = series.bars.lineWidth;
- octx.strokeStyle = parseColor(series.color).scale(1, 1, 1, 0.5).toString();
- octx.fillStyle = parseColor(series.color).scale(1, 1, 1, 0.5).toString();
+ octx.strokeStyle = $.color.parse(series.color).scale('a', 0.5).toString();
+ var fillStyle = $.color.parse(series.color).scale('a', 0.5).toString();
var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2;
- drawBar(point[0], point[1], barLeft, barLeft + series.bars.barWidth,
- 0, true, series.xaxis, series.yaxis, octx);
+ drawBar(point[0], point[1], point[2] || 0, barLeft, barLeft + series.bars.barWidth,
+ 0, function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal);
}
-
- function triggerSelectedEvent() {
- var x1 = Math.min(selection.first.x, selection.second.x),
- x2 = Math.max(selection.first.x, selection.second.x),
- y1 = Math.max(selection.first.y, selection.second.y),
- y2 = Math.min(selection.first.y, selection.second.y);
-
- var r = {};
- if (axes.xaxis.used)
- r.xaxis = { from: axes.xaxis.c2p(x1), to: axes.xaxis.c2p(x2) };
- if (axes.x2axis.used)
- r.x2axis = { from: axes.x2axis.c2p(x1), to: axes.x2axis.c2p(x2) };
- if (axes.yaxis.used)
- r.yaxis = { from: axes.yaxis.c2p(y1), to: axes.yaxis.c2p(y2) };
- if (axes.y2axis.used)
- r.yaxis = { from: axes.y2axis.c2p(y1), to: axes.y2axis.c2p(y2) };
-
- target.trigger("plotselected", [ r ]);
- // backwards-compat stuff, to be removed in future
- if (axes.xaxis.used && axes.yaxis.used)
- target.trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
- }
-
- function onSelectionMouseUp(e) {
- // revert drag stuff for old-school browsers
- if (document.onselectstart !== undefined)
- document.onselectstart = workarounds.onselectstart;
- if (document.ondrag !== undefined)
- document.ondrag = workarounds.ondrag;
-
- // no more draggy-dee-drag
- selection.active = false;
- updateSelection(e);
-
- if (selectionIsSane()) {
- triggerSelectedEvent();
- clickIsMouseUp = true;
- }
-
- return false;
- }
-
- function setSelectionPos(pos, e) {
- var offset = eventHolder.offset();
- if (options.selection.mode == "y") {
- if (pos == selection.first)
- pos.x = 0;
- else
- pos.x = plotWidth;
- }
- else {
- pos.x = e.pageX - offset.left - plotOffset.left;
- pos.x = Math.min(Math.max(0, pos.x), plotWidth);
- }
-
- if (options.selection.mode == "x") {
- if (pos == selection.first)
- pos.y = 0;
- else
- pos.y = plotHeight;
- }
- else {
- pos.y = e.pageY - offset.top - plotOffset.top;
- pos.y = Math.min(Math.max(0, pos.y), plotHeight);
- }
- }
-
- function updateSelection(pos) {
- if (pos.pageX == null)
- return;
-
- setSelectionPos(selection.second, pos);
- if (selectionIsSane()) {
- selection.show = true;
- triggerRedrawOverlay();
- }
- else
- clearSelection();
- }
-
- function clearSelection() {
- if (selection.show) {
- selection.show = false;
- triggerRedrawOverlay();
- }
- }
-
- function setSelection(ranges, preventEvent) {
- var range;
-
- if (options.selection.mode == "y") {
- selection.first.x = 0;
- selection.second.x = plotWidth;
- }
+ function getColorOrGradient(spec, bottom, top, defaultColor) {
+ if (typeof spec == "string")
+ return spec;
else {
- range = extractRange(ranges, "x");
+ // assume this is a gradient spec; IE currently only
+ // supports a simple vertical gradient properly, so that's
+ // what we support too
+ var gradient = ctx.createLinearGradient(0, top, 0, bottom);
- selection.first.x = range.axis.p2c(range.from);
- selection.second.x = range.axis.p2c(range.to);
- }
-
- if (options.selection.mode == "x") {
- selection.first.y = 0;
- selection.second.y = plotHeight;
- }
- else {
- range = extractRange(ranges, "y");
+ for (var i = 0, l = spec.colors.length; i < l; ++i) {
+ var c = spec.colors[i];
+ if (typeof c != "string") {
+ c = $.color.parse(defaultColor).scale('rgb', c.brightness);
+ c.a *= c.opacity;
+ c = c.toString();
+ }
+ gradient.addColorStop(i / (l - 1), c);
+ }
- selection.first.y = range.axis.p2c(range.from);
- selection.second.y = range.axis.p2c(range.to);
+ return gradient;
}
-
- selection.show = true;
- triggerRedrawOverlay();
- if (!preventEvent)
- triggerSelectedEvent();
- }
-
- function selectionIsSane() {
- var minSize = 5;
- return Math.abs(selection.second.x - selection.first.x) >= minSize &&
- Math.abs(selection.second.y - selection.first.y) >= minSize;
}
}
-
- $.plot = function(target, data, options) {
- var plot = new Plot(target, data, options);
- /*var t0 = new Date();
+
+ $.plot = function(placeholder, data, options) {
+ var plot = new Plot($(placeholder), data, options, $.plot.plugins);
+ /*var t0 = new Date();
var t1 = new Date();
var tstr = "time used (msecs): " + (t1.getTime() - t0.getTime())
if (window.console)
@@ -1960,177 +2058,62 @@
alert(tstr);*/
return plot;
};
-
- // round to nearby lower multiple of base
- function floorInBase(n, base) {
- return base * Math.floor(n / base);
- }
-
- function clamp(min, value, max) {
- if (value < min)
- return value;
- else if (value > max)
- return max;
- else
- return value;
- }
-
- // color helpers, inspiration from the jquery color animation
- // plugin by John Resig
- function Color (r, g, b, a) {
-
- var rgba = ['r','g','b','a'];
- var x = 4; //rgba.length
-
- while (-1<--x) {
- this[rgba[x]] = arguments[x] || ((x==3) ? 1.0 : 0);
- }
-
- this.toString = function() {
- if (this.a >= 1.0) {
- return "rgb("+[this.r,this.g,this.b].join(",")+")";
- } else {
- return "rgba("+[this.r,this.g,this.b,this.a].join(",")+")";
- }
- };
- this.scale = function(rf, gf, bf, af) {
- x = 4; //rgba.length
- while (-1<--x) {
- if (arguments[x] != null)
- this[rgba[x]] *= arguments[x];
- }
- return this.normalize();
- };
-
- this.adjust = function(rd, gd, bd, ad) {
- x = 4; //rgba.length
- while (-1<--x) {
- if (arguments[x] != null)
- this[rgba[x]] += arguments[x];
- }
- return this.normalize();
- };
+ $.plot.plugins = [];
- this.clone = function() {
- return new Color(this.r, this.b, this.g, this.a);
+ // returns a string with the date d formatted according to fmt
+ $.plot.formatDate = function(d, fmt, monthNames) {
+ var leftPad = function(n) {
+ n = "" + n;
+ return n.length == 1 ? "0" + n : n;
};
-
- var limit = function(val,minVal,maxVal) {
- return Math.max(Math.min(val, maxVal), minVal);
- };
-
- this.normalize = function() {
- this.r = limit(parseInt(this.r), 0, 255);
- this.g = limit(parseInt(this.g), 0, 255);
- this.b = limit(parseInt(this.b), 0, 255);
- this.a = limit(this.a, 0, 1);
- return this;
- };
-
- this.normalize();
- }
-
- var lookupColors = {
- aqua:[0,255,255],
- azure:[240,255,255],
- beige:[245,245,220],
- black:[0,0,0],
- blue:[0,0,255],
- brown:[165,42,42],
- cyan:[0,255,255],
- darkblue:[0,0,139],
- darkcyan:[0,139,139],
- darkgrey:[169,169,169],
- darkgreen:[0,100,0],
- darkkhaki:[189,183,107],
- darkmagenta:[139,0,139],
- darkolivegreen:[85,107,47],
- darkorange:[255,140,0],
- darkorchid:[153,50,204],
- darkred:[139,0,0],
- darksalmon:[233,150,122],
- darkviolet:[148,0,211],
- fuchsia:[255,0,255],
- gold:[255,215,0],
- green:[0,128,0],
- indigo:[75,0,130],
- khaki:[240,230,140],
- lightblue:[173,216,230],
- lightcyan:[224,255,255],
- lightgreen:[144,238,144],
- lightgrey:[211,211,211],
- lightpink:[255,182,193],
- lightyellow:[255,255,224],
- lime:[0,255,0],
- magenta:[255,0,255],
- maroon:[128,0,0],
- navy:[0,0,128],
- olive:[128,128,0],
- orange:[255,165,0],
- pink:[255,192,203],
- purple:[128,0,128],
- violet:[128,0,128],
- red:[255,0,0],
- silver:[192,192,192],
- white:[255,255,255],
- yellow:[255,255,0]
- };
-
- function extractColor(element) {
- var color, elem = element;
- do {
- color = elem.css("background-color").toLowerCase();
- // keep going until we find an element that has color, or
- // we hit the body
- if (color != '' && color != 'transparent')
- break;
- elem = elem.parent();
- } while (!$.nodeName(elem.get(0), "body"));
-
- // catch Safari's way of signalling transparent
- if (color == "rgba(0, 0, 0, 0)")
- return "transparent";
- return color;
- }
-
- // parse string, returns Color
- function parseColor(str) {
- var result;
-
- // Look for rgb(num,num,num)
- if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))
- return new Color(parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10));
-
- // Look for rgba(num,num,num,num)
- if (result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
- return new Color(parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10), parseFloat(result[4]));
+ var r = [];
+ var escape = false;
+ var hours = d.getUTCHours();
+ var isAM = hours < 12;
+ if (monthNames == null)
+ monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+ if (fmt.search(/%p|%P/) != -1) {
+ if (hours > 12) {
+ hours = hours - 12;
+ } else if (hours == 0) {
+ hours = 12;
+ }
+ }
+ for (var i = 0; i < fmt.length; ++i) {
+ var c = fmt.charAt(i);
- // Look for rgb(num%,num%,num%)
- if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))
- return new Color(parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55);
-
- // Look for rgba(num%,num%,num%,num)
- if (result = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
- return new Color(parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55, parseFloat(result[4]));
-
- // Look for #a0b1c2
- if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))
- return new Color(parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16));
-
- // Look for #fff
- if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))
- return new Color(parseInt(result[1]+result[1], 16), parseInt(result[2]+result[2], 16), parseInt(result[3]+result[3], 16));
-
- // Otherwise, we're most likely dealing with a named color
- var name = $.trim(str).toLowerCase();
- if (name == "transparent")
- return new Color(255, 255, 255, 0);
- else {
- result = lookupColors[name];
- return new Color(result[0], result[1], result[2]);
+ if (escape) {
+ switch (c) {
+ case 'h': c = "" + hours; break;
+ case 'H': c = leftPad(hours); break;
+ case 'M': c = leftPad(d.getUTCMinutes()); break;
+ case 'S': c = leftPad(d.getUTCSeconds()); break;
+ case 'd': c = "" + d.getUTCDate(); break;
+ case 'm': c = "" + (d.getUTCMonth() + 1); break;
+ case 'y': c = "" + d.getUTCFullYear(); break;
+ case 'b': c = "" + monthNames[d.getUTCMonth()]; break;
+ case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break;
+ case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break;
+ }
+ r.push(c);
+ escape = false;
+ }
+ else {
+ if (c == "%")
+ escape = true;
+ else
+ r.push(c);
+ }
}
+ return r.join("");
+ };
+
+ // round to nearby lower multiple of base
+ function floorInBase(n, base) {
+ return base * Math.floor(n / base);
}
-
+
})(jQuery);
diff --git a/jquery.flot.navigate.js b/jquery.flot.navigate.js
new file mode 100644
index 0000000..e6f8834
--- /dev/null
+++ b/jquery.flot.navigate.js
@@ -0,0 +1,272 @@
+/*
+Flot plugin for adding panning and zooming capabilities to a plot.
+
+The default behaviour is double click and scrollwheel up/down to zoom
+in, drag to pan. The plugin defines plot.zoom({ center }),
+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: {
+ interactive: false
+ trigger: "dblclick" // or "click" for single click
+ amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
+ }
+
+ pan: {
+ interactive: false
+ }
+
+ xaxis, yaxis, x2axis, y2axis: {
+ zoomRange: null // or [number, number] (min range, max range)
+ 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).
+
+"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.
+
+"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.
+*/
+
+
+// First two dependencies, jquery.event.drag.js and
+// jquery.mousewheel.js, we put them inline here to save people the
+// effort of downloading them.
+
+/*
+jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
+Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
+*/
+(function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return !L?this.trigger("drag"):this.bind("drag",K?K:L)};var A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function H(L){var K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return }}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove mouseup",H,M);G(K,false);F.dragging=null;return false;case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){break}L.target=M.target;J=C(L,"dragstart",K);if(J!==false){F.dragging=K;F.proxy=L.dragProxy=E(J||K)[0]}case"mousemove":if(F.dragging){J=C(L,"drag",K);if(B.drop){B.drop.allowed=(J!==false);B.drop.handler(L)}if(J!==false){break}L.type="mouseup"}case"mouseup":A.remove(document,"mousemove mouseup",H);if(F.dragging){if(B.drop){B.drop.handler(L)}C(L,"dragend",K)}G(K,true);F.dragging=F.proxy=M.elem=false;break}return true}function C(M,K,L){M.type=K;var J=E.event.handle.call(L,M);return J===false?false:J||M.result}function I(J){return Math.pow(J,2)}function D(){return(F.dragging===false)}function G(K,J){if(!K){return }K.unselectable=J?"off":"on";K.onselectstart=function(){return J};if(K.style){K.style.MozUserSelect=J?"":"none"}}})(jQuery);
+
+
+/* jquery.mousewheel.min.js
+ * Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ *
+ * Version: 3.0.2
+ *
+ * Requires: 1.2.2+
+ */
+(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
+
+
+
+
+(function ($) {
+ var options = {
+ xaxis: {
+ zoomRange: null, // or [number, number] (min range, max range)
+ panRange: null // or [number, number] (min, max)
+ },
+ zoom: {
+ interactive: false,
+ trigger: "dblclick", // or "click" for single click
+ amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out)
+ },
+ pan: {
+ interactive: false
+ }
+ };
+
+ function init(plot) {
+ function bindEvents(plot, eventHolder) {
+ var o = plot.getOptions();
+ if (o.zoom.interactive) {
+ function clickHandler(e, zoomOut) {
+ var c = plot.offset();
+ c.left = e.pageX - c.left;
+ c.top = e.pageY - c.top;
+ if (zoomOut)
+ plot.zoomOut({ center: c });
+ else
+ plot.zoom({ center: c });
+ }
+
+ eventHolder[o.zoom.trigger](clickHandler);
+
+ eventHolder.mousewheel(function (e, delta) {
+ clickHandler(e, delta < 0);
+ return false;
+ });
+ }
+ if (o.pan.interactive) {
+ var prevCursor = 'default', pageX = 0, pageY = 0;
+
+ eventHolder.bind("dragstart", { distance: 10 }, function (e) {
+ if (e.which != 1) // only accept left-click
+ return false;
+ eventHolderCursor = eventHolder.css('cursor');
+ eventHolder.css('cursor', 'move');
+ pageX = e.pageX;
+ pageY = e.pageY;
+ });
+ eventHolder.bind("drag", function (e) {
+ // unused at the moment, but we need it here to
+ // trigger the dragstart/dragend events
+ });
+ eventHolder.bind("dragend", function (e) {
+ eventHolder.css('cursor', prevCursor);
+ plot.pan({ left: pageX - e.pageX,
+ top: pageY - e.pageY });
+ });
+ }
+ }
+
+ plot.zoomOut = function (args) {
+ if (!args)
+ args = {};
+
+ if (!args.amount)
+ args.amount = plot.getOptions().zoom.amount
+
+ args.amount = 1 / args.amount;
+ plot.zoom(args);
+ }
+
+ plot.zoom = function (args) {
+ if (!args)
+ args = {};
+
+ var axes = plot.getAxes(),
+ options = plot.getOptions(),
+ c = args.center,
+ amount = args.amount ? args.amount : options.zoom.amount,
+ w = plot.width(), h = plot.height();
+
+ if (!c)
+ c = { left: w / 2, top: h / 2 };
+
+ var xf = c.left / w,
+ x1 = c.left - xf * w / amount,
+ x2 = c.left + (1 - xf) * w / amount,
+ yf = c.top / h,
+ y1 = c.top - yf * h / amount,
+ y2 = c.top + (1 - yf) * h / amount;
+
+ function scaleAxis(min, max, name) {
+ var axis = axes[name],
+ axisOptions = options[name];
+
+ if (!axis.used)
+ return;
+
+ min = axis.c2p(min);
+ max = axis.c2p(max);
+ if (max < min) { // make sure min < max
+ var tmp = min
+ min = max;
+ max = tmp;
+ }
+
+ var range = max - min, zr = axisOptions.zoomRange;
+ if (zr &&
+ ((zr[0] != null && range < zr[0]) ||
+ (zr[1] != null && range > zr[1])))
+ return;
+
+ axisOptions.min = min;
+ axisOptions.max = max;
+ }
+
+ scaleAxis(x1, x2, 'xaxis');
+ scaleAxis(x1, x2, 'x2axis');
+ scaleAxis(y1, y2, 'yaxis');
+ scaleAxis(y1, y2, 'y2axis');
+
+ plot.setupGrid();
+ plot.draw();
+
+ if (!args.preventEvent)
+ plot.getPlaceholder().trigger("plotzoom", [ plot ]);
+ }
+
+ plot.pan = function (args) {
+ var l = +args.left, t = +args.top,
+ axes = plot.getAxes(), options = plot.getOptions();
+
+ if (isNaN(l))
+ l = 0;
+ if (isNaN(t))
+ t = 0;
+
+ function panAxis(delta, name) {
+ var axis = axes[name],
+ axisOptions = options[name],
+ min, max;
+
+ if (!axis.used)
+ return;
+
+ min = axis.c2p(axis.p2c(axis.min) + delta),
+ max = axis.c2p(axis.p2c(axis.max) + delta);
+
+ var pr = axisOptions.panRange;
+ if (pr) {
+ // check whether we hit the wall
+ if (pr[0] != null && pr[0] > min) {
+ delta = pr[0] - min;
+ min += delta;
+ max += delta;
+ }
+
+ if (pr[1] != null && pr[1] < max) {
+ delta = pr[1] - max;
+ min += delta;
+ max += delta;
+ }
+ }
+
+ axisOptions.min = min;
+ axisOptions.max = max;
+ }
+
+ panAxis(l, 'xaxis');
+ panAxis(l, 'x2axis');
+ panAxis(t, 'yaxis');
+ panAxis(t, 'y2axis');
+
+ plot.setupGrid();
+ plot.draw();
+
+ if (!args.preventEvent)
+ plot.getPlaceholder().trigger("plotpan", [ plot ]);
+ }
+
+ plot.hooks.bindEvents.push(bindEvents);
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'navigate',
+ version: '1.1'
+ });
+})(jQuery);
diff --git a/jquery.flot.pack.js b/jquery.flot.pack.js
deleted file mode 100644
index a5714f1..0000000
--- a/jquery.flot.pack.js
+++ /dev/null
@@ -1 +0,0 @@
-(function(F){function D(AO,e,f){var W=[],o={colors:["#edc240","#afd8f8","#cb4b4b","#4da74d","#9440ed"],legend:{show:true,noColumns:1,labelFormatter:null,labelBoxBorderColor:"#ccc",container:null,position:"ne",margin:5,backgroundColor:null,backgroundOpacity:0.85},xaxis:{mode:null,min:null,max:null,autoscaleMargin:null,ticks:null,tickFormatter:null,labelWidth:null,labelHeight:null,tickDecimals:null,tickSize:null,minTickSize:null,monthNames:null,timeformat:null},yaxis:{autoscaleMargin:0.02},x2axis:{autoscaleMargin:null},y2axis:{autoscaleMargin:0.02},points:{show:false,radius:3,lineWidth:2,fill:true,fillColor:"#ffffff"},lines:{show:false,lineWidth:2,fill:false,fillColor:null},bars:{show:false,lineWidth:2,barWidth:1,fill:true,fillColor:null,align:"left"},grid:{color:"#545454",backgroundColor:null,tickColor:"#dddddd",labelMargin:5,borderWidth:2,markings:null,markingsColor:"#f4f4f4",markingsLineWidth:2,clickable:false,hoverable:false,autoHighlight:true,mouseActiveRadius:10},selection:{mode:null,color:"#e8cfac"},shadowSize:4},X=null,AP=null,AQ=null,g=null,AX=null,K=AO,AA={xaxis:{},yaxis:{},x2axis:{},y2axis:{}},m={left:0,right:0,top:0,bottom:0},AI=0,Z=0,N=0,AB=0,S={};this.setData=n;this.setupGrid=s;this.draw=AU;this.clearSelection=I;this.setSelection=AC;this.getCanvas=function(){return X};this.getPlotOffset=function(){return m};this.getData=function(){return W};this.getAxes=function(){return AA};this.highlight=AS;this.unhighlight=AH;y(f);n(e);j();s();AU();function n(AY){W=U(AY);c();t()}function U(Ac){var Aa=[];for(var AZ=0;AZ<Ac.length;++AZ){var Ab;if(Ac[AZ].data){Ab={};for(var AY in Ac[AZ]){Ab[AY]=Ac[AZ][AY]}}else{Ab={data:Ac[AZ]}}Aa.push(Ab)}return Aa}function y(AY){F.extend(true,o,AY);if(o.xaxis.noTicks&&o.xaxis.ticks==null){o.xaxis.ticks=o.xaxis.noTicks}if(o.yaxis.noTicks&&o.yaxis.ticks==null){o.yaxis.ticks=o.yaxis.noTicks}if(o.grid.coloredAreas){o.grid.markings=o.grid.coloredAreas}if(o.grid.coloredAreasColor){o.grid.markingsColor=o.grid.coloredAreasColor}}function c(){var Ad;var Ai=W.length,AY=[],Ab=[];for(Ad=0;Ad<W.length;++Ad){var Ah=W[Ad].color;if(Ah!=null){--Ai;if(typeof Ah=="number"){Ab.push(Ah)}else{AY.push(E(W[Ad].color))}}}for(Ad=0;Ad<Ab.length;++Ad){Ai=Math.max(Ai,Ab[Ad]+1)}var AZ=[],Ac=0;Ad=0;while(AZ.length<Ai){var Ag;if(o.colors.length==Ad){Ag=new G(100,100,100)}else{Ag=E(o.colors[Ad])}var Aa=Ac%2==1?-1:1;var Af=1+Aa*Math.ceil(Ac/2)*0.2;Ag.scale(Af,Af,Af);AZ.push(Ag);++Ad;if(Ad>=o.colors.length){Ad=0;++Ac}}var Ae=0,Aj;for(Ad=0;Ad<W.length;++Ad){Aj=W[Ad];if(Aj.color==null){Aj.color=AZ[Ae].toString();++Ae}else{if(typeof Aj.color=="number"){Aj.color=AZ[Aj.color].toString()}}Aj.lines=F.extend(true,{},o.lines,Aj.lines);Aj.points=F.extend(true,{},o.points,Aj.points);Aj.bars=F.extend(true,{},o.bars,Aj.bars);if(Aj.shadowSize==null){Aj.shadowSize=o.shadowSize}if(Aj.xaxis&&Aj.xaxis==2){Aj.xaxis=AA.x2axis}else{Aj.xaxis=AA.xaxis}if(Aj.yaxis&&Aj.yaxis==2){Aj.yaxis=AA.y2axis}else{Aj.yaxis=AA.yaxis}}}function t(){var Aa=Number.POSITIVE_INFINITY,AZ=Number.NEGATIVE_INFINITY,Ab;for(Ab in AA){AA[Ab].datamin=Aa;AA[Ab].datamax=AZ;AA[Ab].used=false}for(var Ae=0;Ae<W.length;++Ae){var Ad=W[Ae].data,Aj=W[Ae].xaxis,Ai=W[Ae].yaxis,AY=0,Ah=0;if(W[Ae].bars.show){AY=W[Ae].bars.align=="left"?0:-W[Ae].bars.barWidth/2;Ah=AY+W[Ae].bars.barWidth}Aj.used=Ai.used=true;for(var Ac=0;Ac<Ad.length;++Ac){if(Ad[Ac]==null){continue}var Ag=Ad[Ac][0],Af=Ad[Ac][1];if(Ag!=null&&!isNaN(Ag=+Ag)){if(Ag+AY<Aj.datamin){Aj.datamin=Ag+AY}if(Ag+Ah>Aj.datamax){Aj.datamax=Ag+Ah}}if(Af!=null&&!isNaN(Af=+Af)){if(Af<Ai.datamin){Ai.datamin=Af}if(Af>Ai.datamax){Ai.datamax=Af}}if(Ag==null||Af==null||isNaN(Ag)||isNaN(Af)){Ad[Ac]=null}}}for(Ab in AA){if(AA[Ab].datamin==Aa){AA[Ab].datamin=0}if(AA[Ab].datamax==AZ){AA[Ab].datamax=1}}}function j(){AI=K.width();Z=K.height();K.html("");K.css("position","relative");if(AI<=0||Z<=0){throw"Invalid dimensions for plot, width = "+AI+", height = "+Z}X=F('<canvas width="'+AI+'" height="'+Z+'"></canvas>').appendTo(K).get(0);if(F.browser.msie){X=window.G_vmlCanvasManager.initElement(X)}g=X.getContext("2d");AP=F('<canvas style="position:absolute;left:0px;top:0px;" width="'+AI+'" height="'+Z+'"></canvas>').appendTo(K).get(0);if(F.browser.msie){AP=window.G_vmlCanvasManager.initElement(AP)}AX=AP.getContext("2d");AQ=F([AP,X]);if(o.selection.mode!=null||o.grid.hoverable){AQ.each(function(){this.onmousemove=J});if(o.selection.mode!=null){AQ.mousedown(AN)}}if(o.grid.clickable){AQ.click(k)}}function s(){function AY(Ab,Aa){Q(Ab,Aa);L(Ab,Aa);w(Ab,Aa);if(Ab==AA.xaxis||Ab==AA.x2axis){Ab.p2c=function(Ac){return(Ac-Ab.min)*Ab.scale};Ab.c2p=function(Ac){return Ab.min+Ac/Ab.scale}}else{Ab.p2c=function(Ac){return(Ab.max-Ac)*Ab.scale};Ab.c2p=function(Ac){return Ab.max-Ac/Ab.scale}}}for(var AZ in AA){AY(AA[AZ],o[AZ])}AW();p();AV()}function Q(Ab,Ad){var Aa=Ad.min!=null?Ad.min:Ab.datamin;var AY=Ad.max!=null?Ad.max:Ab.datamax;if(AY-Aa==0){var AZ;if(AY==0){AZ=1}else{AZ=0.01}Aa-=AZ;AY+=AZ}else{var Ac=Ad.autoscaleMargin;if(Ac!=null){if(Ad.min==null){Aa-=(AY-Aa)*Ac;if(Aa<0&&Ab.datamin>=0){Aa=0}}if(Ad.max==null){AY+=(AY-Aa)*Ac;if(AY>0&&Ab.datamax<=0){AY=0}}}}Ab.min=Aa;Ab.max=AY}function L(Ad,Ag){var Ac;if(typeof Ag.ticks=="number"&&Ag.ticks>0){Ac=Ag.ticks}else{if(Ad==AA.xaxis||Ad==AA.x2axis){Ac=AI/100}else{Ac=Z/60}}var Al=(Ad.max-Ad.min)/Ac;var Ao,Ah,Aj,Ak,Af,Aa,AZ;if(Ag.mode=="time"){function An(Av,Ap,Ar){var Aq=function(Ax){Ax=""+Ax;return Ax.length==1?"0"+Ax:Ax};var Au=[];var At=false;if(Ar==null){Ar=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}for(var As=0;As<Ap.length;++As){var Aw=Ap.charAt(As);if(At){switch(Aw){case"h":Aw=""+Av.getUTCHours();break;case"H":Aw=Aq(Av.getUTCHours());break;case"M":Aw=Aq(Av.getUTCMinutes());break;case"S":Aw=Aq(Av.getUTCSeconds());break;case"d":Aw=""+Av.getUTCDate();break;case"m":Aw=""+(Av.getUTCMonth()+1);break;case"y":Aw=""+Av.getUTCFullYear();break;case"b":Aw=""+Ar[Av.getUTCMonth()];break}Au.push(Aw);At=false}else{if(Aw=="%"){At=true}else{Au.push(Aw)}}}return Au.join("")}var Ai={second:1000,minute:60*1000,hour:60*60*1000,day:24*60*60*1000,month:30*24*60*60*1000,year:365.2425*24*60*60*1000};var Am=[[1,"second"],[2,"second"],[5,"second"],[10,"second"],[30,"second"],[1,"minute"],[2,"minute"],[5,"minute"],[10,"minute"],[30,"minute"],[1,"hour"],[2,"hour"],[4,"hour"],[8,"hour"],[12,"hour"],[1,"day"],[2,"day"],[3,"day"],[0.25,"month"],[0.5,"month"],[1,"month"],[2,"month"],[3,"month"],[6,"month"],[1,"year"]];var Ab=0;if(Ag.minTickSize!=null){if(typeof Ag.tickSize=="number"){Ab=Ag.tickSize}else{Ab=Ag.minTickSize[0]*Ai[Ag.minTickSize[1]]}}for(Af=0;Af<Am.length-1;++Af){if(Al<(Am[Af][0]*Ai[Am[Af][1]]+Am[Af+1][0]*Ai[Am[Af+1][1]])/2&&Am[Af][0]*Ai[Am[Af][1]]>=Ab){break}}Ao=Am[Af][0];Aj=Am[Af][1];if(Aj=="year"){Aa=Math.pow(10,Math.floor(Math.log(Al/Ai.year)/Math.LN10));AZ=(Al/Ai.year)/Aa;if(AZ<1.5){Ao=1}else{if(AZ<3){Ao=2}else{if(AZ<7.5){Ao=5}else{Ao=10}}}Ao*=Aa}if(Ag.tickSize){Ao=Ag.tickSize[0];Aj=Ag.tickSize[1]}Ah=function(Ar){var Aw=[],Au=Ar.tickSize[0],Ax=Ar.tickSize[1],Av=new Date(Ar.min);var Aq=Au*Ai[Ax];if(Ax=="second"){Av.setUTCSeconds(C(Av.getUTCSeconds(),Au))}if(Ax=="minute"){Av.setUTCMinutes(C(Av.getUTCMinutes(),Au))}if(Ax=="hour"){Av.setUTCHours(C(Av.getUTCHours(),Au))}if(Ax=="month"){Av.setUTCMonth(C(Av.getUTCMonth(),Au))}if(Ax=="year"){Av.setUTCFullYear(C(Av.getUTCFullYear(),Au))}Av.setUTCMilliseconds(0);if(Aq>=Ai.minute){Av.setUTCSeconds(0)}if(Aq>=Ai.hour){Av.setUTCMinutes(0)}if(Aq>=Ai.day){Av.setUTCHours(0)}if(Aq>=Ai.day*4){Av.setUTCDate(1)}if(Aq>=Ai.year){Av.setUTCMonth(0)}var Az=0,Ay=Number.NaN,As;do{As=Ay;Ay=Av.getTime();Aw.push({v:Ay,label:Ar.tickFormatter(Ay,Ar)});if(Ax=="month"){if(Au<1){Av.setUTCDate(1);var Ap=Av.getTime();Av.setUTCMonth(Av.getUTCMonth()+1);var At=Av.getTime();Av.setTime(Ay+Az*Ai.hour+(At-Ap)*Au);Az=Av.getUTCHours();Av.setUTCHours(0)}else{Av.setUTCMonth(Av.getUTCMonth()+Au)}}else{if(Ax=="year"){Av.setUTCFullYear(Av.getUTCFullYear()+Au)}else{Av.setTime(Ay+Aq)}}}while(Ay<Ar.max&&Ay!=As);return Aw};Ak=function(Ap,As){var At=new Date(Ap);if(Ag.timeformat!=null){return An(At,Ag.timeformat,Ag.monthNames)}var Aq=As.tickSize[0]*Ai[As.tickSize[1]];var Ar=As.max-As.min;if(Aq<Ai.minute){fmt="%h:%M:%S"}else{if(Aq<Ai.day){if(Ar<2*Ai.day){fmt="%h:%M"}else{fmt="%b %d %h:%M"}}else{if(Aq<Ai.month){fmt="%b %d"}else{if(Aq<Ai.year){if(Ar<Ai.year){fmt="%b"}else{fmt="%b %y"}}else{fmt="%y"}}}}return An(At,fmt,Ag.monthNames)}}else{var AY=Ag.tickDecimals;var Ae=-Math.floor(Math.log(Al)/Math.LN10);if(AY!=null&&Ae>AY){Ae=AY}Aa=Math.pow(10,-Ae);AZ=Al/Aa;if(AZ<1.5){Ao=1}else{if(AZ<3){Ao=2;if(AZ>2.25&&(AY==null||Ae+1<=AY)){Ao=2.5;++Ae}}else{if(AZ<7.5){Ao=5}else{Ao=10}}}Ao*=Aa;if(Ag.minTickSize!=null&&Ao<Ag.minTickSize){Ao=Ag.minTickSize}if(Ag.tickSize!=null){Ao=Ag.tickSize}Ad.tickDecimals=Math.max(0,(AY!=null)?AY:Ae);Ah=function(Ar){var At=[];var Au=C(Ar.min,Ar.tickSize),Aq=0,Ap=Number.NaN,As;do{As=Ap;Ap=Au+Aq*Ar.tickSize;At.push({v:Ap,label:Ar.tickFormatter(Ap,Ar)});++Aq}while(Ap<Ar.max&&Ap!=As);return At};Ak=function(Ap,Aq){return Ap.toFixed(Aq.tickDecimals)}}Ad.tickSize=Aj?[Ao,Aj]:Ao;Ad.tickGenerator=Ah;if(F.isFunction(Ag.tickFormatter)){Ad.tickFormatter=function(Ap,Aq){return""+Ag.tickFormatter(Ap,Aq)}}else{Ad.tickFormatter=Ak}if(Ag.labelWidth!=null){Ad.labelWidth=Ag.labelWidth}if(Ag.labelHeight!=null){Ad.labelHeight=Ag.labelHeight}}function w(Ac,Ae){Ac.ticks=[];if(!Ac.used){return }if(Ae.ticks==null){Ac.ticks=Ac.tickGenerator(Ac)}else{if(typeof Ae.ticks=="number"){if(Ae.ticks>0){Ac.ticks=Ac.tickGenerator(Ac)}}else{if(Ae.ticks){var Ad=Ae.ticks;if(F.isFunction(Ad)){Ad=Ad({min:Ac.min,max:Ac.max})}var Ab,AY;for(Ab=0;Ab<Ad.length;++Ab){var AZ=null;var Aa=Ad[Ab];if(typeof Aa=="object"){AY=Aa[0];if(Aa.length>1){AZ=Aa[1]}}else{AY=Aa}if(AZ==null){AZ=Ac.tickFormatter(AY,Ac)}Ac.ticks[Ab]={v:AY,label:AZ}}}}}if(Ae.autoscaleMargin!=null&&Ac.ticks.length>0){if(Ae.min==null){Ac.min=Math.min(Ac.min,Ac.ticks[0].v)}if(Ae.max==null&&Ac.ticks.length>1){Ac.max=Math.min(Ac.max,Ac.ticks[Ac.ticks.length-1].v)}}}function AW(){function AZ(Ac){if(Ac.labelWidth==null){Ac.labelWidth=AI/6}if(Ac.labelHeight==null){labels=[];for(i=0;i<Ac.ticks.length;++i){l=Ac.ticks[i].label;if(l){labels.push('<div class="tickLabel" style="float:left;width:'+Ac.labelWidth+'px">'+l+"</div>")}}Ac.labelHeight=0;if(labels.length>0){var Ab=F('<div style="position:absolute;top:-10000px;width:10000px;font-size:smaller">'+labels.join("")+'<div style="clear:left"></div></div>').appendTo(K);Ac.labelHeight=Ab.height();Ab.remove()}}}function AY(Ae){if(Ae.labelWidth==null||Ae.labelHeight==null){var Ad,Af=[],Ac;for(Ad=0;Ad<Ae.ticks.length;++Ad){Ac=Ae.ticks[Ad].label;if(Ac){Af.push('<div class="tickLabel">'+Ac+"</div>")}}if(Af.length>0){var Ab=F('<div style="position:absolute;top:-10000px;font-size:smaller">'+Af.join("")+"</div>").appendTo(K);if(Ae.labelWidth==null){Ae.labelWidth=Ab.width()}if(Ae.labelHeight==null){Ae.labelHeight=Ab.find("div").height()}Ab.remove()}if(Ae.labelWidth==null){Ae.labelWidth=0}if(Ae.labelHeight==null){Ae.labelHeight=0}}}AZ(AA.xaxis);AY(AA.yaxis);AZ(AA.x2axis);AY(AA.y2axis);var Aa=o.grid.borderWidth/2;for(i=0;i<W.length;++i){Aa=Math.max(Aa,2*(W[i].points.radius+W[i].points.lineWidth/2))}m.left=m.right=m.top=m.bottom=Aa;if(AA.xaxis.labelHeight>0){m.bottom=Math.max(Aa,AA.xaxis.labelHeight+o.grid.labelMargin)}if(AA.yaxis.labelWidth>0){m.left=Math.max(Aa,AA.yaxis.labelWidth+o.grid.labelMargin)}if(AA.x2axis.labelHeight>0){m.top=Math.max(Aa,AA.x2axis.labelHeight+o.grid.labelMargin)}if(AA.y2axis.labelWidth>0){m.right=Math.max(Aa,AA.y2axis.labelWidth+o.grid.labelMargin)}N=AI-m.left-m.right;AB=Z-m.bottom-m.top;AA.xaxis.scale=N/(AA.xaxis.max-AA.xaxis.min);AA.yaxis.scale=AB/(AA.yaxis.max-AA.yaxis.min);AA.x2axis.scale=N/(AA.x2axis.max-AA.x2axis.min);AA.y2axis.scale=AB/(AA.y2axis.max-AA.y2axis.min)}function AU(){a();for(var AY=0;AY<W.length;AY++){AK(W[AY])}}function V(AZ,Af){var Ac=Af+"axis",AY=Af+"2axis",Ab,Ae,Ad,Aa;if(AZ[Ac]){Ab=AA[Ac];Ae=AZ[Ac].from;Ad=AZ[Ac].to}else{if(AZ[AY]){Ab=AA[AY];Ae=AZ[AY].from;Ad=AZ[AY].to}else{Ab=AA[Ac];Ae=AZ[Af+"1"];Ad=AZ[Af+"2"]}}if(Ae!=null&&Ad!=null&&Ae>Ad){return{from:Ad,to:Ae,axis:Ab}}return{from:Ae,to:Ad,axis:Ab}}function a(){var Ac;g.save();g.clearRect(0,0,AI,Z);g.translate(m.left,m.top);if(o.grid.backgroundColor){g.fillStyle=o.grid.backgroundColor;g.fillRect(0,0,N,AB)}if(o.grid.markings){var AZ=o.grid.markings;if(F.isFunction(AZ)){AZ=AZ({xmin:AA.xaxis.min,xmax:AA.xaxis.max,ymin:AA.yaxis.min,ymax:AA.yaxis.max,xaxis:AA.xaxis,yaxis:AA.yaxis,x2axis:AA.x2axis,y2axis:AA.y2axis})}for(Ac=0;Ac<AZ.length;++Ac){var AY=AZ[Ac],Ae=V(AY,"x"),Ab=V(AY,"y");if(Ae.from==null){Ae.from=Ae.axis.min}if(Ae.to==null){Ae.to=Ae.axis.max}if(Ab.from==null){Ab.from=Ab.axis.min}if(Ab.to==null){Ab.to=Ab.axis.max}if(Ae.to<Ae.axis.min||Ae.from>Ae.axis.max||Ab.to<Ab.axis.min||Ab.from>Ab.axis.max){continue}Ae.from=Math.max(Ae.from,Ae.axis.min);Ae.to=Math.min(Ae.to,Ae.axis.max);Ab.from=Math.max(Ab.from,Ab.axis.min);Ab.to=Math.min(Ab.to,Ab.axis.max);if(Ae.from==Ae.to&&Ab.from==Ab.to){continue}Ae.from=Ae.axis.p2c(Ae.from);Ae.to=Ae.axis.p2c(Ae.to);Ab.from=Ab.axis.p2c(Ab.from);Ab.to=Ab.axis.p2c(Ab.to);if(Ae.from==Ae.to||Ab.from==Ab.to){g.strokeStyle=AY.color||o.grid.markingsColor;g.lineWidth=AY.lineWidth||o.grid.markingsLineWidth;g.moveTo(Math.floor(Ae.from),Math.floor(Ab.from));g.lineTo(Math.floor(Ae.to),Math.floor(Ab.to));g.stroke()}else{g.fillStyle=AY.color||o.grid.markingsColor;g.fillRect(Math.floor(Ae.from),Math.floor(Ab.to),Math.floor(Ae.to-Ae.from),Math.floor(Ab.from-Ab.to))}}}g.lineWidth=1;g.strokeStyle=o.grid.tickColor;g.beginPath();var Aa,Ad=AA.xaxis;for(Ac=0;Ac<Ad.ticks.length;++Ac){Aa=Ad.ticks[Ac].v;if(Aa<=Ad.min||Aa>=AA.xaxis.max){continue}g.moveTo(Math.floor(Ad.p2c(Aa))+g.lineWidth/2,0);g.lineTo(Math.floor(Ad.p2c(Aa))+g.lineWidth/2,AB)}Ad=AA.yaxis;for(Ac=0;Ac<Ad.ticks.length;++Ac){Aa=Ad.ticks[Ac].v;if(Aa<=Ad.min||Aa>=Ad.max){continue}g.moveTo(0,Math.floor(Ad.p2c(Aa))+g.lineWidth/2);g.lineTo(N,Math.floor(Ad.p2c(Aa))+g.lineWidth/2)}Ad=AA.x2axis;for(Ac=0;Ac<Ad.ticks.length;++Ac){Aa=Ad.ticks[Ac].v;if(Aa<=Ad.min||Aa>=Ad.max){continue}g.moveTo(Math.floor(Ad.p2c(Aa))+g.lineWidth/2,-5);g.lineTo(Math.floor(Ad.p2c(Aa))+g.lineWidth/2,5)}Ad=AA.y2axis;for(Ac=0;Ac<Ad.ticks.length;++Ac){Aa=Ad.ticks[Ac].v;if(Aa<=Ad.min||Aa>=Ad.max){continue}g.moveTo(N-5,Math.floor(Ad.p2c(Aa))+g.lineWidth/2);g.lineTo(N+5,Math.floor(Ad.p2c(Aa))+g.lineWidth/2)}g.stroke();if(o.grid.borderWidth){g.lineWidth=o.grid.borderWidth;g.strokeStyle=o.grid.color;g.lineJoin="round";g.strokeRect(0,0,N,AB)}g.restore()}function p(){K.find(".tickLabels").remove();var AY='<div class="tickLabels" style="font-size:smaller;color:'+o.grid.color+'">';function AZ(Ac,Ad){for(var Ab=0;Ab<Ac.ticks.length;++Ab){var Aa=Ac.ticks[Ab];if(!Aa.label||Aa.v<Ac.min||Aa.v>Ac.max){continue}AY+=Ad(Aa,Ac)}}AZ(AA.xaxis,function(Aa,Ab){return'<div style="position:absolute;top:'+(m.top+AB+o.grid.labelMargin)+"px;left:"+(m.left+Ab.p2c(Aa.v)-Ab.labelWidth/2)+"px;width:"+Ab.labelWidth+'px;text-align:center" class="tickLabel">'+Aa.label+"</div>"});AZ(AA.yaxis,function(Aa,Ab){return'<div style="position:absolute;top:'+(m.top+Ab.p2c(Aa.v)-Ab.labelHeight/2)+"px;right:"+(m.right+N+o.grid.labelMargin)+"px;width:"+Ab.labelWidth+'px;text-align:right" class="tickLabel">'+Aa.label+"</div>"});AZ(AA.x2axis,function(Aa,Ab){return'<div style="position:absolute;bottom:'+(m.bottom+AB+o.grid.labelMargin)+"px;left:"+(m.left+Ab.p2c(Aa.v)-Ab.labelWidth/2)+"px;width:"+Ab.labelWidth+'px;text-align:center" class="tickLabel">'+Aa.label+"</div>"});AZ(AA.y2axis,function(Aa,Ab){return'<div style="position:absolute;top:'+(m.top+Ab.p2c(Aa.v)-Ab.labelHeight/2)+"px;left:"+(m.left+N+o.grid.labelMargin)+"px;width:"+Ab.labelWidth+'px;text-align:left" class="tickLabel">'+Aa.label+"</div>"});AY+="</div>";K.append(AY)}function AK(AY){if(AY.lines.show||(!AY.bars.show&&!AY.points.show)){h(AY)}if(AY.bars.show){u(AY)}if(AY.points.show){v(AY)}}function h(Aa){function AZ(Aj,Ah,An,Am){var Ag,Ao=null,Ad=null,Ap=null;g.beginPath();for(var Ai=0;Ai<Aj.length;++Ai){Ag=Ao;Ao=Aj[Ai];if(Ag==null||Ao==null){continue}var Af=Ag[0],Al=Ag[1],Ae=Ao[0],Ak=Ao[1];if(Al<=Ak&&Al<Am.min){if(Ak<Am.min){continue}Af=(Am.min-Al)/(Ak-Al)*(Ae-Af)+Af;Al=Am.min}else{if(Ak<=Al&&Ak<Am.min){if(Al<Am.min){continue}Ae=(Am.min-Al)/(Ak-Al)*(Ae-Af)+Af;Ak=Am.min}}if(Al>=Ak&&Al>Am.max){if(Ak>Am.max){continue}Af=(Am.max-Al)/(Ak-Al)*(Ae-Af)+Af;Al=Am.max}else{if(Ak>=Al&&Ak>Am.max){if(Al>Am.max){continue}Ae=(Am.max-Al)/(Ak-Al)*(Ae-Af)+Af;Ak=Am.max}}if(Af<=Ae&&Af<An.min){if(Ae<An.min){continue}Al=(An.min-Af)/(Ae-Af)*(Ak-Al)+Al;Af=An.min}else{if(Ae<=Af&&Ae<An.min){if(Af<An.min){continue}Ak=(An.min-Af)/(Ae-Af)*(Ak-Al)+Al;Ae=An.min}}if(Af>=Ae&&Af>An.max){if(Ae>An.max){continue}Al=(An.max-Af)/(Ae-Af)*(Ak-Al)+Al;Af=An.max}else{if(Ae>=Af&&Ae>An.max){if(Af>An.max){continue}Ak=(An.max-Af)/(Ae-Af)*(Ak-Al)+Al;Ae=An.max}}if(Ad!=An.p2c(Af)||Ap!=Am.p2c(Al)+Ah){g.moveTo(An.p2c(Af),Am.p2c(Al)+Ah)}Ad=An.p2c(Ae);Ap=Am.p2c(Ak)+Ah;g.lineTo(Ad,Ap)}g.stroke()}function Ab(Aj,Aq,Ao){var Ah,Ar=null;var Ad=Math.min(Math.max(0,Ao.min),Ao.max);var Am,Ag=0;var Ap=false;for(var Ai=0;Ai<Aj.length;++Ai){Ah=Ar;Ar=Aj[Ai];if(Ap&&Ah!=null&&Ar==null){g.lineTo(Aq.p2c(Ag),Ao.p2c(Ad));g.fill();Ap=false;continue}if(Ah==null||Ar==null){continue}var Af=Ah[0],An=Ah[1],Ae=Ar[0],Al=Ar[1];if(Af<=Ae&&Af<Aq.min){if(Ae<Aq.min){continue}An=(Aq.min-Af)/(Ae-Af)*(Al-An)+An;Af=Aq.min}else{if(Ae<=Af&&Ae<Aq.min){if(Af<Aq.min){continue}Al=(Aq.min-Af)/(Ae-Af)*(Al-An)+An;Ae=Aq.min}}if(Af>=Ae&&Af>Aq.max){if(Ae>Aq.max){continue}An=(Aq.max-Af)/(Ae-Af)*(Al-An)+An;Af=Aq.max}else{if(Ae>=Af&&Ae>Aq.max){if(Af>Aq.max){continue}Al=(Aq.max-Af)/(Ae-Af)*(Al-An)+An;Ae=Aq.max}}if(!Ap){g.beginPath();g.moveTo(Aq.p2c(Af),Ao.p2c(Ad));Ap=true}if(An>=Ao.max&&Al>=Ao.max){g.lineTo(Aq.p2c(Af),Ao.p2c(Ao.max));g.lineTo(Aq.p2c(Ae),Ao.p2c(Ao.max));continue}else{if(An<=Ao.min&&Al<=Ao.min){g.lineTo(Aq.p2c(Af),Ao.p2c(Ao.min));g.lineTo(Aq.p2c(Ae),Ao.p2c(Ao.min));continue}}var As=Af,Ak=Ae;if(An<=Al&&An<Ao.min&&Al>=Ao.min){Af=(Ao.min-An)/(Al-An)*(Ae-Af)+Af;An=Ao.min}else{if(Al<=An&&Al<Ao.min&&An>=Ao.min){Ae=(Ao.min-An)/(Al-An)*(Ae-Af)+Af;Al=Ao.min}}if(An>=Al&&An>Ao.max&&Al<=Ao.max){Af=(Ao.max-An)/(Al-An)*(Ae-Af)+Af;An=Ao.max}else{if(Al>=An&&Al>Ao.max&&An<=Ao.max){Ae=(Ao.max-An)/(Al-An)*(Ae-Af)+Af;Al=Ao.max}}if(Af!=As){if(An<=Ao.min){Am=Ao.min}else{Am=Ao.max}g.lineTo(Aq.p2c(As),Ao.p2c(Am));g.lineTo(Aq.p2c(Af),Ao.p2c(Am))}g.lineTo(Aq.p2c(Af),Ao.p2c(An));g.lineTo(Aq.p2c(Ae),Ao.p2c(Al));if(Ae!=Ak){if(Al<=Ao.min){Am=Ao.min}else{Am=Ao.max}g.lineTo(Aq.p2c(Ak),Ao.p2c(Am));g.lineTo(Aq.p2c(Ae),Ao.p2c(Am))}Ag=Math.max(Ae,Ak)}if(Ap){g.lineTo(Aq.p2c(Ag),Ao.p2c(Ad));g.fill()}}g.save();g.translate(m.left,m.top);g.lineJoin="round";var Ac=Aa.lines.lineWidth;var AY=Aa.shadowSize;if(AY>0){g.lineWidth=AY/2;g.strokeStyle="rgba(0,0,0,0.1)";AZ(Aa.data,Ac/2+AY/2+g.lineWidth/2,Aa.xaxis,Aa.yaxis);g.lineWidth=AY/2;g.strokeStyle="rgba(0,0,0,0.2)";AZ(Aa.data,Ac/2+g.lineWidth/2,Aa.xaxis,Aa.yaxis)}g.lineWidth=Ac;g.strokeStyle=Aa.color;AD(Aa.lines,Aa.color);if(Aa.lines.fill){Ab(Aa.data,Aa.xaxis,Aa.yaxis)}AZ(Aa.data,0,Aa.xaxis,Aa.yaxis);g.restore()}function v(AZ){function Ac(Ag,Ae,Ah,Ak,Ai){for(var Af=0;Af<Ag.length;++Af){if(Ag[Af]==null){continue}var Ad=Ag[Af][0],Aj=Ag[Af][1];if(Ad<Ak.min||Ad>Ak.max||Aj<Ai.min||Aj>Ai.max){continue}g.beginPath();g.arc(Ak.p2c(Ad),Ai.p2c(Aj),Ae,0,2*Math.PI,true);if(Ah){g.fill()}g.stroke()}}function Ab(Ag,Ai,Ae,Ak,Ah){for(var Af=0;Af<Ag.length;++Af){if(Ag[Af]==null){continue}var Ad=Ag[Af][0],Aj=Ag[Af][1];if(Ad<Ak.min||Ad>Ak.max||Aj<Ah.min||Aj>Ah.max){continue}g.beginPath();g.arc(Ak.p2c(Ad),Ah.p2c(Aj)+Ai,Ae,0,Math.PI,false);g.stroke()}}g.save();g.translate(m.left,m.top);var Aa=AZ.lines.lineWidth;var AY=AZ.shadowSize;if(AY>0){g.lineWidth=AY/2;g.strokeStyle="rgba(0,0,0,0.1)";Ab(AZ.data,AY/2+g.lineWidth/2,AZ.points.radius,AZ.xaxis,AZ.yaxis);g.lineWidth=AY/2;g.strokeStyle="rgba(0,0,0,0.2)";Ab(AZ.data,g.lineWidth/2,AZ.points.radius,AZ.xaxis,AZ.yaxis)}g.lineWidth=AZ.points.lineWidth;g.strokeStyle=AZ.color;AD(AZ.points,AZ.color);Ac(AZ.data,AZ.points.radius,AZ.points.fill,AZ.xaxis,AZ.yaxis);g.restore()}function AM(Aj,Ah,Ac,Ai,Aa,Ao,An,Ak,Af){var Am=true,Ae=true,Ab=true,Ad=false,AZ=Aj+Ac,Al=Aj+Ai,AY=0,Ag=Ah;if(Ag<AY){Ag=0;AY=Ah;Ad=true;Ab=false}if(Al<An.min||AZ>An.max||Ag<Ak.min||AY>Ak.max){return }if(AZ<An.min){AZ=An.min;Am=false}if(Al>An.max){Al=An.max;Ae=false}if(AY<Ak.min){AY=Ak.min;Ad=false}if(Ag>Ak.max){Ag=Ak.max;Ab=false}if(Ao){Af.beginPath();Af.moveTo(An.p2c(AZ),Ak.p2c(AY)+Aa);Af.lineTo(An.p2c(AZ),Ak.p2c(Ag)+Aa);Af.lineTo(An.p2c(Al),Ak.p2c(Ag)+Aa);Af.lineTo(An.p2c(Al),Ak.p2c(AY)+Aa);Af.fill()}if(Am||Ae||Ab||Ad){Af.beginPath();AZ=An.p2c(AZ);AY=Ak.p2c(AY);Al=An.p2c(Al);Ag=Ak.p2c(Ag);Af.moveTo(AZ,AY+Aa);if(Am){Af.lineTo(AZ,Ag+Aa)}else{Af.moveTo(AZ,Ag+Aa)}if(Ab){Af.lineTo(Al,Ag+Aa)}else{Af.moveTo(Al,Ag+Aa)}if(Ae){Af.lineTo(Al,AY+Aa)}else{Af.moveTo(Al,AY+Aa)}if(Ad){Af.lineTo(AZ,AY+Aa)}else{Af.moveTo(AZ,AY+Aa)}Af.stroke()}}function u(Aa){function AZ(Ae,Ab,Ad,Ah,Af,Ai,Ag){for(var Ac=0;Ac<Ae.length;Ac++){if(Ae[Ac]==null){continue}AM(Ae[Ac][0],Ae[Ac][1],Ab,Ad,Ah,Af,Ai,Ag,g)}}g.save();g.translate(m.left,m.top);g.lineJoin="round";g.lineWidth=Aa.bars.lineWidth;g.strokeStyle=Aa.color;AD(Aa.bars,Aa.color);var AY=Aa.bars.align=="left"?0:-Aa.bars.barWidth/2;AZ(Aa.data,AY,AY+Aa.bars.barWidth,0,Aa.bars.fill,Aa.xaxis,Aa.yaxis);g.restore()}function AD(Aa,AY){var AZ=Aa.fill;if(!AZ){return }if(Aa.fillColor){g.fillStyle=Aa.fillColor}else{var Ab=E(AY);Ab.a=typeof AZ=="number"?AZ:0.4;Ab.normalize();g.fillStyle=Ab.toString()}}function AV(){K.find(".legend").remove();if(!o.legend.show){return }var Ae=[];var Ac=false;for(i=0;i<W.length;++i){if(!W[i].label){continue}if(i%o.legend.noColumns==0){if(Ac){Ae.push("</tr>")}Ae.push("<tr>");Ac=true}var Ag=W[i].label;if(o.legend.labelFormatter!=null){Ag=o.legend.labelFormatter(Ag)}Ae.push('<td class="legendColorBox"><div style="border:1px solid '+o.legend.labelBoxBorderColor+';padding:1px"><div style="width:14px;height:10px;background-color:'+W[i].color+';overflow:hidden"></div></div></td><td class="legendLabel">'+Ag+"</td>")}if(Ac){Ae.push("</tr>")}if(Ae.length==0){return }var Ai='<table style="font-size:smaller;color:'+o.grid.color+'">'+Ae.join("")+"</table>";if(o.legend.container!=null){o.legend.container.html(Ai)}else{var Af="";var AZ=o.legend.position,Aa=o.legend.margin;if(AZ.charAt(0)=="n"){Af+="top:"+(Aa+m.top)+"px;"}else{if(AZ.charAt(0)=="s"){Af+="bottom:"+(Aa+m.bottom)+"px;"}}if(AZ.charAt(1)=="e"){Af+="right:"+(Aa+m.right)+"px;"}else{if(AZ.charAt(1)=="w"){Af+="left:"+(Aa+m.left)+"px;"}}var Ah=F('<div class="legend">'+Ai.replace('style="','style="position:absolute;'+Af+";")+"</div>").appendTo(K);if(o.legend.backgroundOpacity!=0){var Ad=o.legend.backgroundColor;if(Ad==null){var Ab;if(o.grid.backgroundColor){Ab=o.grid.backgroundColor}else{Ab=A(Ah)}Ad=E(Ab).adjust(null,null,null,1).toString()}var AY=Ah.children();F('<div style="position:absolute;width:'+AY.width()+"px;height:"+AY.height()+"px;"+Af+"background-color:"+Ad+';"> </div>').prependTo(Ah).css("opacity",o.legend.backgroundOpacity)}}}var AG={pageX:null,pageY:null},d={first:{x:-1,y:-1},second:{x:-1,y:-1},show:false,active:false},AF=[],P=false,O=null,z=null;function AT(Ae,Ac){var Al=o.grid.mouseActiveRadius,Ar=Al*Al+1,At=null,An=false;function Ai(Ay,Ax){return{datapoint:W[Ay].data[Ax],dataIndex:Ax,series:W[Ay],seriesIndex:Ay}}for(var Aq=0;Aq<W.length;++Aq){var Aw=W[Aq].data,Ad=W[Aq].xaxis,Ab=W[Aq].yaxis,Am=Ad.c2p(Ae),Ak=Ab.c2p(Ac),AZ=Al/Ad.scale,AY=Al/Ab.scale,Av=W[Aq].bars.show,Au=!(W[Aq].bars.show&&!(W[Aq].lines.show||W[Aq].points.show)),Aa=W[Aq].bars.align=="left"?0:-W[Aq].bars.barWidth/2,As=Aa+W[Aq].bars.barWidth;for(var Ap=0;Ap<Aw.length;++Ap){if(Aw[Ap]==null){continue}var Ag=Aw[Ap][0],Af=Aw[Ap][1];if(Av){if(!An&&Am>=Ag+Aa&&Am<=Ag+As&&Ak>=Math.min(0,Af)&&Ak<=Math.max(0,Af)){At=Ai(Aq,Ap)}}if(Au){if((Ag-Am>AZ||Ag-Am<-AZ)||(Af-Ak>AY||Af-Ak<-AY)){continue}var Aj=Math.abs(Ad.p2c(Ag)-Ae),Ah=Math.abs(Ab.p2c(Af)-Ac),Ao=Aj*Aj+Ah*Ah;if(Ao<Ar){Ar=Ao;An=true;At=Ai(Aq,Ap)}}}}return At}function J(AZ){var Aa=AZ||window.event;if(Aa.pageX==null&&Aa.clientX!=null){var Ab=document.documentElement,AY=document.body;AG.pageX=Aa.clientX+(Ab&&Ab.scrollLeft||AY.scrollLeft||0);AG.pageY=Aa.clientY+(Ab&&Ab.scrollTop||AY.scrollTop||0)}else{AG.pageX=Aa.pageX;AG.pageY=Aa.pageY}if(o.grid.hoverable&&!z){z=setTimeout(R,100)}if(d.active){AL(AG)}}function AN(AY){if(AY.which!=1){return }document.body.focus();if(document.onselectstart!==undefined&&S.onselectstart==null){S.onselectstart=document.onselectstart;document.onselectstart=function(){return false}}if(document.ondrag!==undefined&&S.ondrag==null){S.ondrag=document.ondrag;document.ondrag=function(){return false}}AR(d.first,AY);AG.pageX=null;d.active=true;F(document).one("mouseup",Y)}function k(AY){if(P){P=false;return }M("plotclick",AY)}function R(){M("plothover",AG);z=null}function M(AZ,AY){var Aa=AQ.offset(),Af={pageX:AY.pageX,pageY:AY.pageY},Ad=AY.pageX-Aa.left-m.left,Ab=AY.pageY-Aa.top-m.top;if(AA.xaxis.used){Af.x=AA.xaxis.c2p(Ad)}if(AA.yaxis.used){Af.y=AA.yaxis.c2p(Ab)}if(AA.x2axis.used){Af.x2=AA.x2axis.c2p(Ad)}if(AA.y2axis.used){Af.y2=AA.y2axis.c2p(Ab)}var Ag=AT(Ad,Ab);if(Ag){Ag.pageX=parseInt(Ag.series.xaxis.p2c(Ag.datapoint[0])+Aa.left+m.left);Ag.pageY=parseInt(Ag.series.yaxis.p2c(Ag.datapoint[1])+Aa.top+m.top)}if(o.grid.autoHighlight){for(var Ac=0;Ac<AF.length;++Ac){var Ae=AF[Ac];if(Ae.auto&&!(Ag&&Ae.series==Ag.series&&Ae.point==Ag.datapoint)){AH(Ae.series,Ae.point)}}if(Ag){AS(Ag.series,Ag.datapoint,true)}}K.trigger(AZ,[Af,Ag])}function x(){if(!O){O=setTimeout(T,50)}}function T(){O=null;AX.save();AX.clearRect(0,0,AI,Z);AX.translate(m.left,m.top);var Ab,Aa;for(Ab=0;Ab<AF.length;++Ab){Aa=AF[Ab];if(Aa.series.bars.show){AJ(Aa.series,Aa.point)}else{AE(Aa.series,Aa.point)}}AX.restore();if(d.show&&b()){AX.strokeStyle=E(o.selection.color).scale(null,null,null,0.8).toString();AX.lineWidth=1;g.lineJoin="round";AX.fillStyle=E(o.selection.color).scale(null,null,null,0.4).toString();var AY=Math.min(d.first.x,d.second.x),Ad=Math.min(d.first.y,d.second.y),AZ=Math.abs(d.second.x-d.first.x),Ac=Math.abs(d.second.y-d.first.y);AX.fillRect(AY+m.left,Ad+m.top,AZ,Ac);AX.strokeRect(AY+m.left,Ad+m.top,AZ,Ac)}}function AS(Aa,AY,Ab){if(typeof Aa=="number"){Aa=W[Aa]}if(typeof AY=="number"){AY=Aa.data[AY]}var AZ=q(Aa,AY);if(AZ==-1){AF.push({series:Aa,point:AY,auto:Ab});x()}else{if(!Ab){AF[AZ].auto=false}}}function AH(Aa,AY){if(typeof Aa=="number"){Aa=W[Aa]}if(typeof AY=="number"){AY=Aa.data[AY]}var AZ=q(Aa,AY);if(AZ!=-1){AF.splice(AZ,1);x()}}function q(Aa,Ab){for(var AY=0;AY<AF.length;++AY){var AZ=AF[AY];if(AZ.series==Aa&&AZ.point[0]==Ab[0]&&AZ.point[1]==Ab[1]){return AY}}return -1}function AE(Ab,Aa){var AZ=Aa[0],Af=Aa[1],Ae=Ab.xaxis,Ad=Ab.yaxis;if(AZ<Ae.min||AZ>Ae.max||Af<Ad.min||Af>Ad.max){return }var Ac=Ab.points.radius+Ab.points.lineWidth/2;AX.lineWidth=Ac;AX.strokeStyle=E(Ab.color).scale(1,1,1,0.5).toString();var AY=1.5*Ac;AX.beginPath();AX.arc(Ae.p2c(AZ),Ad.p2c(Af),AY,0,2*Math.PI,true);AX.stroke()}function AJ(Aa,AY){AX.lineJoin="round";AX.lineWidth=Aa.bars.lineWidth;AX.strokeStyle=E(Aa.color).scale(1,1,1,0.5).toString();AX.fillStyle=E(Aa.color).scale(1,1,1,0.5).toString();var AZ=Aa.bars.align=="left"?0:-Aa.bars.barWidth/2;AM(AY[0],AY[1],AZ,AZ+Aa.bars.barWidth,0,true,Aa.xaxis,Aa.yaxis,AX)}function r(){var AZ=Math.min(d.first.x,d.second.x),AY=Math.max(d.first.x,d.second.x),Ab=Math.max(d.first.y,d.second.y),Aa=Math.min(d.first.y,d.second.y);var Ac={};if(AA.xaxis.used){Ac.xaxis={from:AA.xaxis.c2p(AZ),to:AA.xaxis.c2p(AY)}}if(AA.x2axis.used){Ac.x2axis={from:AA.x2axis.c2p(AZ),to:AA.x2axis.c2p(AY)}}if(AA.yaxis.used){Ac.yaxis={from:AA.yaxis.c2p(Ab),to:AA.yaxis.c2p(Aa)}}if(AA.y2axis.used){Ac.yaxis={from:AA.y2axis.c2p(Ab),to:AA.y2axis.c2p(Aa)}}K.trigger("plotselected",[Ac]);if(AA.xaxis.used&&AA.yaxis.used){K.trigger("selected",[{x1:Ac.xaxis.from,y1:Ac.yaxis.from,x2:Ac.xaxis.to,y2:Ac.yaxis.to}])}}function Y(AY){if(document.onselectstart!==undefined){document.onselectstart=S.onselectstart}if(document.ondrag!==undefined){document.ondrag=S.ondrag}d.active=false;AL(AY);if(b()){r();P=true}return false}function AR(Aa,AY){var AZ=AQ.offset();if(o.selection.mode=="y"){if(Aa==d.first){Aa.x=0}else{Aa.x=N}}else{Aa.x=AY.pageX-AZ.left-m.left;Aa.x=Math.min(Math.max(0,Aa.x),N)}if(o.selection.mode=="x"){if(Aa==d.first){Aa.y=0}else{Aa.y=AB}}else{Aa.y=AY.pageY-AZ.top-m.top;Aa.y=Math.min(Math.max(0,Aa.y),AB)}}function AL(AY){if(AY.pageX==null){return }AR(d.second,AY);if(b()){d.show=true;x()}else{I()}}function I(){if(d.show){d.show=false;x()}}function AC(AZ,AY){var Aa;if(o.selection.mode=="y"){d.first.x=0;d.second.x=N}else{Aa=V(AZ,"x");d.first.x=Aa.axis.p2c(Aa.from);d.second.x=Aa.axis.p2c(Aa.to)}if(o.selection.mode=="x"){d.first.y=0;d.second.y=AB}else{Aa=V(AZ,"y");d.first.y=Aa.axis.p2c(Aa.from);d.second.y=Aa.axis.p2c(Aa.to)}d.show=true;x();if(!AY){r()}}function b(){var AY=5;return Math.abs(d.second.x-d.first.x)>=AY&&Math.abs(d.second.y-d.first.y)>=AY}}F.plot=function(L,J,I){var K=new D(L,J,I);return K};function C(J,I){return I*Math.floor(J/I)}function H(J,K,I){if(K<J){return K}else{if(K>I){return I}else{return K}}}function G(O,N,J,L){var M=["r","g","b","a"];var I=4;while(-1<--I){this[M[I]]=arguments[I]||((I==3)?1:0)}this.toString=function(){if(this.a>=1){return"rgb("+[this.r,this.g,this.b].join(",")+")"}else{return"rgba("+[this.r,this.g,this.b,this.a].join(",")+")"}};this.scale=function(R,Q,S,P){I=4;while(-1<--I){if(arguments[I]!=null){this[M[I]]*=arguments[I]}}return this.normalize()};this.adjust=function(R,Q,S,P){I=4;while(-1<--I){if(arguments[I]!=null){this[M[I]]+=arguments[I]}}return this.normalize()};this.clone=function(){return new G(this.r,this.b,this.g,this.a)};var K=function(Q,P,R){return Math.max(Math.min(Q,R),P)};this.normalize=function(){this.r=K(parseInt(this.r),0,255);this.g=K(parseInt(this.g),0,255);this.b=K(parseInt(this.b),0,255);this.a=K(this.a,0,1);return this};this.normalize()}var B={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]};function A(J){var I,K=J;do{I=K.css("background-color").toLowerCase();if(I!=""&&I!="transparent"){break}K=K.parent()}while(!F.nodeName(K.get(0),"body"));if(I=="rgba(0, 0, 0, 0)"){return"transparent"}return I}function E(K){var I;if(I=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(K)){return new G(parseInt(I[1],10),parseInt(I[2],10),parseInt(I[3],10))}if(I=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(K)){return new G(parseInt(I[1],10),parseInt(I[2],10),parseInt(I[3],10),parseFloat(I[4]))}if(I=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(K)){return new G(parseFloat(I[1])*2.55,parseFloat(I[2])*2.55,parseFloat(I[3])*2.55)}if(I=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(K)){return new G(parseFloat(I[1])*2.55,parseFloat(I[2])*2.55,parseFloat(I[3])*2.55,parseFloat(I[4]))}if(I=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(K)){return new G(parseInt(I[1],16),parseInt(I[2],16),parseInt(I[3],16))}if(I=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(K)){return new G(parseInt(I[1]+I[1],16),parseInt(I[2]+I[2],16),parseInt(I[3]+I[3],16))}var J=F.trim(K).toLowerCase();if(J=="transparent"){return new G(255,255,255,0)}else{I=B[J];return new G(I[0],I[1],I[2])}}})(jQuery);
\ No newline at end of file
diff --git a/jquery.flot.selection.js b/jquery.flot.selection.js
new file mode 100644
index 0000000..da81c92
--- /dev/null
+++ b/jquery.flot.selection.js
@@ -0,0 +1,299 @@
+/*
+Flot plugin for selecting regions.
+
+The plugin defines the following options:
+
+ 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.
+
+The plugin allso adds the following methods to the plot object:
+
+- 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, the
+ function returns null.
+
+*/
+
+(function ($) {
+ function init(plot) {
+ var selection = {
+ first: { x: -1, y: -1}, second: { x: -1, y: -1},
+ show: false,
+ active: false
+ };
+
+ // FIXME: The drag handling implemented here should be
+ // abstracted out, there's some similar code from a library in
+ // the navigation plugin, this should be massaged a bit to fit
+ // the Flot cases here better and reused. Doing this would
+ // make this plugin much slimmer.
+ var savedhandlers = {};
+
+ function onMouseMove(e) {
+ if (selection.active) {
+ plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
+
+ updateSelection(e);
+ }
+ }
+
+ function onMouseDown(e) {
+ if (e.which != 1) // only accept left-click
+ return;
+
+ // cancel out any text selections
+ document.body.focus();
+
+ // prevent text selection and drag in old-school browsers
+ if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
+ savedhandlers.onselectstart = document.onselectstart;
+ document.onselectstart = function () { return false; };
+ }
+ if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
+ savedhandlers.ondrag = document.ondrag;
+ document.ondrag = function () { return false; };
+ }
+
+ setSelectionPos(selection.first, e);
+
+ selection.active = true;
+
+ $(document).one("mouseup", onMouseUp);
+ }
+
+ function onMouseUp(e) {
+ // revert drag stuff for old-school browsers
+ if (document.onselectstart !== undefined)
+ document.onselectstart = savedhandlers.onselectstart;
+ if (document.ondrag !== undefined)
+ document.ondrag = savedhandlers.ondrag;
+
+ // no more draggy-dee-drag
+ selection.active = false;
+ updateSelection(e);
+
+ if (selectionIsSane())
+ triggerSelectedEvent();
+ else {
+ // this counts as a clear
+ plot.getPlaceholder().trigger("plotunselected", [ ]);
+ plot.getPlaceholder().trigger("plotselecting", [ null ]);
+ }
+
+ return false;
+ }
+
+ function getSelection() {
+ if (!selectionIsSane())
+ return null;
+
+ var x1 = Math.min(selection.first.x, selection.second.x),
+ x2 = Math.max(selection.first.x, selection.second.x),
+ y1 = Math.max(selection.first.y, selection.second.y),
+ y2 = Math.min(selection.first.y, selection.second.y);
+
+ var r = {};
+ var axes = plot.getAxes();
+ if (axes.xaxis.used)
+ r.xaxis = { from: axes.xaxis.c2p(x1), to: axes.xaxis.c2p(x2) };
+ if (axes.x2axis.used)
+ r.x2axis = { from: axes.x2axis.c2p(x1), to: axes.x2axis.c2p(x2) };
+ if (axes.yaxis.used)
+ r.yaxis = { from: axes.yaxis.c2p(y1), to: axes.yaxis.c2p(y2) };
+ if (axes.y2axis.used)
+ r.y2axis = { from: axes.y2axis.c2p(y1), to: axes.y2axis.c2p(y2) };
+ return r;
+ }
+
+ function triggerSelectedEvent() {
+ var r = getSelection();
+
+ plot.getPlaceholder().trigger("plotselected", [ r ]);
+
+ // backwards-compat stuff, to be removed in future
+ var axes = plot.getAxes();
+ if (axes.xaxis.used && axes.yaxis.used)
+ plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
+ }
+
+ function clamp(min, value, max) {
+ return value < min? min: (value > max? max: value);
+ }
+
+ function setSelectionPos(pos, e) {
+ var o = plot.getOptions();
+ var offset = plot.getPlaceholder().offset();
+ var plotOffset = plot.getPlotOffset();
+ pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
+ pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
+
+ if (o.selection.mode == "y")
+ pos.x = pos == selection.first? 0: plot.width();
+
+ if (o.selection.mode == "x")
+ pos.y = pos == selection.first? 0: plot.height();
+ }
+
+ function updateSelection(pos) {
+ if (pos.pageX == null)
+ return;
+
+ setSelectionPos(selection.second, pos);
+ if (selectionIsSane()) {
+ selection.show = true;
+ plot.triggerRedrawOverlay();
+ }
+ else
+ clearSelection(true);
+ }
+
+ function clearSelection(preventEvent) {
+ if (selection.show) {
+ selection.show = false;
+ plot.triggerRedrawOverlay();
+ if (!preventEvent)
+ plot.getPlaceholder().trigger("plotunselected", [ ]);
+ }
+ }
+
+ function setSelection(ranges, preventEvent) {
+ var axis, range, axes = plot.getAxes();
+ var o = plot.getOptions();
+
+ if (o.selection.mode == "y") {
+ selection.first.x = 0;
+ selection.second.x = plot.width();
+ }
+ else {
+ axis = ranges["xaxis"]? axes["xaxis"]: (ranges["x2axis"]? axes["x2axis"]: axes["xaxis"]);
+ range = ranges["xaxis"] || ranges["x2axis"] || { from:ranges["x1"], to:ranges["x2"] }
+ selection.first.x = axis.p2c(Math.min(range.from, range.to));
+ selection.second.x = axis.p2c(Math.max(range.from, range.to));
+ }
+
+ if (o.selection.mode == "x") {
+ selection.first.y = 0;
+ selection.second.y = plot.height();
+ }
+ else {
+ axis = ranges["yaxis"]? axes["yaxis"]: (ranges["y2axis"]? axes["y2axis"]: axes["yaxis"]);
+ range = ranges["yaxis"] || ranges["y2axis"] || { from:ranges["y1"], to:ranges["y2"] }
+ selection.first.y = axis.p2c(Math.min(range.from, range.to));
+ selection.second.y = axis.p2c(Math.max(range.from, range.to));
+ }
+
+ selection.show = true;
+ plot.triggerRedrawOverlay();
+ if (!preventEvent)
+ triggerSelectedEvent();
+ }
+
+ function selectionIsSane() {
+ var minSize = 5;
+ return Math.abs(selection.second.x - selection.first.x) >= minSize &&
+ Math.abs(selection.second.y - selection.first.y) >= minSize;
+ }
+
+ plot.clearSelection = clearSelection;
+ plot.setSelection = setSelection;
+ plot.getSelection = getSelection;
+
+ plot.hooks.bindEvents.push(function(plot, eventHolder) {
+ var o = plot.getOptions();
+ if (o.selection.mode != null)
+ eventHolder.mousemove(onMouseMove);
+
+ if (o.selection.mode != null)
+ eventHolder.mousedown(onMouseDown);
+ });
+
+
+ plot.hooks.drawOverlay.push(function (plot, ctx) {
+ // draw selection
+ if (selection.show && selectionIsSane()) {
+ var plotOffset = plot.getPlotOffset();
+ var o = plot.getOptions();
+
+ ctx.save();
+ ctx.translate(plotOffset.left, plotOffset.top);
+
+ var c = $.color.parse(o.selection.color);
+
+ ctx.strokeStyle = c.scale('a', 0.8).toString();
+ ctx.lineWidth = 1;
+ ctx.lineJoin = "round";
+ ctx.fillStyle = c.scale('a', 0.4).toString();
+
+ var x = Math.min(selection.first.x, selection.second.x),
+ y = Math.min(selection.first.y, selection.second.y),
+ w = Math.abs(selection.second.x - selection.first.x),
+ h = Math.abs(selection.second.y - selection.first.y);
+
+ ctx.fillRect(x, y, w, h);
+ ctx.strokeRect(x, y, w, h);
+
+ ctx.restore();
+ }
+ });
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: {
+ selection: {
+ mode: null, // one of null, "x", "y" or "xy"
+ color: "#e8cfac"
+ }
+ },
+ name: 'selection',
+ version: '1.0'
+ });
+})(jQuery);
diff --git a/jquery.flot.stack.js b/jquery.flot.stack.js
new file mode 100644
index 0000000..4dbd29f
--- /dev/null
+++ b/jquery.flot.stack.js
@@ -0,0 +1,152 @@
+/*
+Flot plugin for stacking data sets, i.e. putting them on top of each
+other, for accumulative graphs. Note that the plugin assumes the data
+is sorted on x. Also note that stacking a mix of positive and negative
+values in most instances doesn't make sense (so it looks weird).
+
+Two or more series are stacked when their "stack" attribute is set to
+the same key (which can be any number or string or just "true"). To
+specify the default stack, you can set
+
+ series: {
+ stack: null or true or key (number/string)
+ }
+
+or specify it for a specific series
+
+ $.plot($("#placeholder"), [{ data: [ ... ], stack: true ])
+
+The stacking order is determined by the order of the data series in
+the array (later series end up on top of the previous).
+
+Internally, the plugin modifies the datapoints in each series, adding
+an offset to the y value. For line series, extra data points are
+inserted through interpolation. For bar charts, the second y value is
+also adjusted.
+*/
+
+(function ($) {
+ var options = {
+ series: { stack: null } // or number/string
+ };
+
+ function init(plot) {
+ function findMatchingSeries(s, allseries) {
+ var res = null
+ for (var i = 0; i < allseries.length; ++i) {
+ if (s == allseries[i])
+ break;
+
+ if (allseries[i].stack == s.stack)
+ res = allseries[i];
+ }
+
+ return res;
+ }
+
+ function stackData(plot, s, datapoints) {
+ if (s.stack == null)
+ return;
+
+ var other = findMatchingSeries(s, plot.getData());
+ if (!other)
+ return;
+
+ var ps = datapoints.pointsize,
+ points = datapoints.points,
+ otherps = other.datapoints.pointsize,
+ otherpoints = other.datapoints.points,
+ newpoints = [],
+ px, py, intery, qx, qy, bottom,
+ withlines = s.lines.show, withbars = s.bars.show,
+ withsteps = withlines && s.lines.steps,
+ i = 0, j = 0, l;
+
+ while (true) {
+ if (i >= points.length)
+ break;
+
+ l = newpoints.length;
+
+ if (j >= otherpoints.length
+ || otherpoints[j] == null
+ || points[i] == null) {
+ // degenerate cases
+ for (m = 0; m < ps; ++m)
+ newpoints.push(points[i + m]);
+ i += ps;
+ }
+ else {
+ // cases where we actually got two points
+ px = points[i];
+ py = points[i + 1];
+ qx = otherpoints[j];
+ qy = otherpoints[j + 1];
+ bottom = 0;
+
+ if (px == qx) {
+ for (m = 0; m < ps; ++m)
+ newpoints.push(points[i + m]);
+
+ newpoints[l + 1] += qy;
+ bottom = qy;
+
+ i += ps;
+ j += otherps;
+ }
+ else if (px > qx) {
+ // we got past point below, might need to
+ // insert interpolated extra point
+ if (withlines && i > 0 && points[i - ps] != null) {
+ intery = py + (points[i - ps + 1] - py) * (qx - px) / (points[i - ps] - px);
+ newpoints.push(qx);
+ newpoints.push(intery + qy)
+ for (m = 2; m < ps; ++m)
+ newpoints.push(points[i + m]);
+ bottom = qy;
+ }
+
+ j += otherps;
+ }
+ else {
+ for (m = 0; m < ps; ++m)
+ newpoints.push(points[i + m]);
+
+ // we might be able to interpolate a point below,
+ // this can give us a better y
+ if (withlines && j > 0 && otherpoints[j - ps] != null)
+ bottom = qy + (otherpoints[j - ps + 1] - qy) * (px - qx) / (otherpoints[j - ps] - qx);
+
+ newpoints[l + 1] += bottom;
+
+ i += ps;
+ }
+
+ if (l != newpoints.length && withbars)
+ newpoints[l + 2] += bottom;
+ }
+
+ // maintain the line steps invariant
+ if (withsteps && l != newpoints.length && l > 0
+ && newpoints[l] != null
+ && newpoints[l] != newpoints[l - ps]
+ && newpoints[l + 1] != newpoints[l - ps + 1]) {
+ for (m = 0; m < ps; ++m)
+ newpoints[l + ps + m] = newpoints[l + m];
+ newpoints[l + 1] = newpoints[l - ps + 1];
+ }
+ }
+
+ datapoints.points = newpoints;
+ }
+
+ plot.hooks.processDatapoints.push(stackData);
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'stack',
+ version: '1.0'
+ });
+})(jQuery);
diff --git a/jquery.flot.threshold.js b/jquery.flot.threshold.js
new file mode 100644
index 0000000..0b2e7ac
--- /dev/null
+++ b/jquery.flot.threshold.js
@@ -0,0 +1,103 @@
+/*
+Flot plugin for thresholding data. Controlled through the option
+"threshold" in either the global series options
+
+ series: {
+ threshold: {
+ below: number
+ color: colorspec
+ }
+ }
+
+or in a specific series
+
+ $.plot($("#placeholder"), [{ data: [ ... ], threshold: { ... }}])
+
+The data points below "below" are drawn with the specified color. This
+makes it easy to mark points below 0, e.g. for budget data.
+
+Internally, the plugin works by splitting the data into two series,
+above and below the threshold. The extra series below the threshold
+will have its label cleared and the special "originSeries" attribute
+set to the original series. You may need to check for this in hover
+events.
+*/
+
+(function ($) {
+ var options = {
+ series: { threshold: null } // or { below: number, color: color spec}
+ };
+
+ function init(plot) {
+ function thresholdData(plot, s, datapoints) {
+ if (!s.threshold)
+ return;
+
+ var ps = datapoints.pointsize, i, x, y, p, prevp,
+ thresholded = $.extend({}, s); // note: shallow copy
+
+ thresholded.datapoints = { points: [], pointsize: ps };
+ thresholded.label = null;
+ thresholded.color = s.threshold.color;
+ thresholded.threshold = null;
+ thresholded.originSeries = s;
+ thresholded.data = [];
+
+ var below = s.threshold.below,
+ origpoints = datapoints.points,
+ addCrossingPoints = s.lines.show;
+
+ threspoints = [];
+ newpoints = [];
+
+ for (i = 0; i < origpoints.length; i += ps) {
+ x = origpoints[i]
+ y = origpoints[i + 1];
+
+ prevp = p;
+ if (y < below)
+ p = threspoints;
+ else
+ p = newpoints;
+
+ if (addCrossingPoints && prevp != p && x != null
+ && i > 0 && origpoints[i - ps] != null) {
+ var interx = (x - origpoints[i - ps]) / (y - origpoints[i - ps + 1]) * (below - y) + x;
+ prevp.push(interx);
+ prevp.push(below);
+ for (m = 2; m < ps; ++m)
+ prevp.push(origpoints[i + m]);
+
+ p.push(null); // start new segment
+ p.push(null);
+ for (m = 2; m < ps; ++m)
+ p.push(origpoints[i + m]);
+ p.push(interx);
+ p.push(below);
+ for (m = 2; m < ps; ++m)
+ p.push(origpoints[i + m]);
+ }
+
+ p.push(x);
+ p.push(y);
+ }
+
+ datapoints.points = newpoints;
+ thresholded.datapoints.points = threspoints;
+
+ if (thresholded.datapoints.points.length > 0)
+ plot.getData().push(thresholded);
+
+ // FIXME: there are probably some edge cases left in bars
+ }
+
+ plot.hooks.processDatapoints.push(thresholdData);
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'threshold',
+ version: '1.0'
+ });
+})(jQuery);
--
flot
More information about the Pkg-javascript-commits
mailing list