| 1 |
Flot Reference |
| 2 |
-------------- |
| 3 |
|
| 4 |
Consider a call to the plot function: |
| 5 |
|
| 6 |
var plot = $.plot(placeholder, data, options) |
| 7 |
|
| 8 |
The placeholder is a jQuery object or DOM element or jQuery expression |
| 9 |
that the plot will be put into. This placeholder needs to have its |
| 10 |
width and height set as explained in the README (go read that now if |
| 11 |
you haven't, it's short). The plot will modify some properties of the |
| 12 |
placeholder so it's recommended you simply pass in a div that you |
| 13 |
don't use for anything else. Make sure you check any fancy styling |
| 14 |
you apply to the div, e.g. background images have been reported to be a |
| 15 |
problem on IE 7. |
| 16 |
|
| 17 |
The format of the data is documented below, as is the available |
| 18 |
options. The plot object returned from the call has some methods you |
| 19 |
can call. These are documented separately below. |
| 20 |
|
| 21 |
Note that in general Flot gives no guarantees if you change any of the |
| 22 |
objects you pass in to the plot function or get out of it since |
| 23 |
they're not necessarily deep-copied. |
| 24 |
|
| 25 |
|
| 26 |
Data Format |
| 27 |
----------- |
| 28 |
|
| 29 |
The data is an array of data series: |
| 30 |
|
| 31 |
[ series1, series2, ... ] |
| 32 |
|
| 33 |
A series can either be raw data or an object with properties. The raw |
| 34 |
data format is an array of points: |
| 35 |
|
| 36 |
[ [x1, y1], [x2, y2], ... ] |
| 37 |
|
| 38 |
E.g. |
| 39 |
|
| 40 |
[ [1, 3], [2, 14.01], [3.5, 3.14] ] |
| 41 |
|
| 42 |
Note that to simplify the internal logic in Flot both the x and y |
| 43 |
values must be numbers (even if specifying time series, see below for |
| 44 |
how to do this). This is a common problem because you might retrieve |
| 45 |
data from the database and serialize them directly to JSON without |
| 46 |
noticing the wrong type. If you're getting mysterious errors, double |
| 47 |
check that you're inputting numbers and not strings. |
| 48 |
|
| 49 |
If a null is specified as a point or if one of the coordinates is null |
| 50 |
or couldn't be converted to a number, the point is ignored when |
| 51 |
drawing. As a special case, a null value for lines is interpreted as a |
| 52 |
line segment end, i.e. the points before and after the null value are |
| 53 |
not connected. |
| 54 |
|
| 55 |
Lines and points take two coordinates. For filled lines and bars, you |
| 56 |
can specify a third coordinate which is the bottom of the filled |
| 57 |
area/bar (defaults to 0). |
| 58 |
|
| 59 |
The format of a single series object is as follows: |
| 60 |
|
| 61 |
{ |
| 62 |
color: color or number |
| 63 |
data: rawdata |
| 64 |
label: string |
| 65 |
lines: specific lines options |
| 66 |
bars: specific bars options |
| 67 |
points: specific points options |
| 68 |
xaxis: number |
| 69 |
yaxis: number |
| 70 |
clickable: boolean |
| 71 |
hoverable: boolean |
| 72 |
shadowSize: number |
| 73 |
} |
| 74 |
|
| 75 |
You don't have to specify any of them except the data, the rest are |
| 76 |
options that will get default values. Typically you'd only specify |
| 77 |
label and data, like this: |
| 78 |
|
| 79 |
{ |
| 80 |
label: "y = 3", |
| 81 |
data: [[0, 3], [10, 3]] |
| 82 |
} |
| 83 |
|
| 84 |
The label is used for the legend, if you don't specify one, the series |
| 85 |
will not show up in the legend. |
| 86 |
|
| 87 |
If you don't specify color, the series will get a color from the |
| 88 |
auto-generated colors. The color is either a CSS color specification |
| 89 |
(like "rgb(255, 100, 123)") or an integer that specifies which of |
| 90 |
auto-generated colors to select, e.g. 0 will get color no. 0, etc. |
| 91 |
|
| 92 |
The latter is mostly useful if you let the user add and remove series, |
| 93 |
in which case you can hard-code the color index to prevent the colors |
| 94 |
from jumping around between the series. |
| 95 |
|
| 96 |
The "xaxis" and "yaxis" options specify which axis to use. The axes |
| 97 |
are numbered from 1 (default), so { yaxis: 2} means that the series |
| 98 |
should be plotted against the second y axis. |
| 99 |
|
| 100 |
"clickable" and "hoverable" can be set to false to disable |
| 101 |
interactivity for specific series if interactivity is turned on in |
| 102 |
the plot, see below. |
| 103 |
|
| 104 |
The rest of the options are all documented below as they are the same |
| 105 |
as the default options passed in via the options parameter in the plot |
| 106 |
commmand. When you specify them for a specific data series, they will |
| 107 |
override the default options for the plot for that data series. |
| 108 |
|
| 109 |
Here's a complete example of a simple data specification: |
| 110 |
|
| 111 |
[ { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] }, |
| 112 |
{ label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] } ] |
| 113 |
|
| 114 |
|
| 115 |
Plot Options |
| 116 |
------------ |
| 117 |
|
| 118 |
All options are completely optional. They are documented individually |
| 119 |
below, to change them you just specify them in an object, e.g. |
| 120 |
|
| 121 |
var options = { |
| 122 |
series: { |
| 123 |
lines: { show: true }, |
| 124 |
points: { show: true } |
| 125 |
} |
| 126 |
}; |
| 127 |
|
| 128 |
$.plot(placeholder, data, options); |
| 129 |
|
| 130 |
|
| 131 |
Customizing the legend |
| 132 |
====================== |
| 133 |
|
| 134 |
legend: { |
| 135 |
show: boolean |
| 136 |
labelFormatter: null or (fn: string, series object -> string) |
| 137 |
labelBoxBorderColor: color |
| 138 |
noColumns: number |
| 139 |
position: "ne" or "nw" or "se" or "sw" |
| 140 |
margin: number of pixels or [x margin, y margin] |
| 141 |
backgroundColor: null or color |
| 142 |
backgroundOpacity: number between 0 and 1 |
| 143 |
container: null or jQuery object/DOM element/jQuery expression |
| 144 |
} |
| 145 |
|
| 146 |
The legend is generated as a table with the data series labels and |
| 147 |
small label boxes with the color of the series. If you want to format |
| 148 |
the labels in some way, e.g. make them to links, you can pass in a |
| 149 |
function for "labelFormatter". Here's an example that makes them |
| 150 |
clickable: |
| 151 |
|
| 152 |
labelFormatter: function(label, series) { |
| 153 |
// series is the series object for the label |
| 154 |
return '<a href="#' + label + '">' + label + '</a>'; |
| 155 |
} |
| 156 |
|
| 157 |
"noColumns" is the number of columns to divide the legend table into. |
| 158 |
"position" specifies the overall placement of the legend within the |
| 159 |
plot (top-right, top-left, etc.) and margin the distance to the plot |
| 160 |
edge (this can be either a number or an array of two numbers like [x, |
| 161 |
y]). "backgroundColor" and "backgroundOpacity" specifies the |
| 162 |
background. The default is a partly transparent auto-detected |
| 163 |
background. |
| 164 |
|
| 165 |
If you want the legend to appear somewhere else in the DOM, you can |
| 166 |
specify "container" as a jQuery object/expression to put the legend |
| 167 |
table into. The "position" and "margin" etc. options will then be |
| 168 |
ignored. Note that Flot will overwrite the contents of the container. |
| 169 |
|
| 170 |
|
| 171 |
Customizing the axes |
| 172 |
==================== |
| 173 |
|
| 174 |
xaxis, yaxis: { |
| 175 |
show: null or true/false |
| 176 |
position: "bottom" or "top" or "left" or "right" |
| 177 |
mode: null or "time" |
| 178 |
|
| 179 |
color: null or color spec |
| 180 |
tickColor: null or color spec |
| 181 |
|
| 182 |
min: null or number |
| 183 |
max: null or number |
| 184 |
autoscaleMargin: null or number |
| 185 |
|
| 186 |
transform: null or fn: number -> number |
| 187 |
inverseTransform: null or fn: number -> number |
| 188 |
|
| 189 |
ticks: null or number or ticks array or (fn: range -> ticks array) |
| 190 |
tickSize: number or array |
| 191 |
minTickSize: number or array |
| 192 |
tickFormatter: (fn: number, object -> string) or string |
| 193 |
tickDecimals: null or number |
| 194 |
|
| 195 |
labelWidth: null or number |
| 196 |
labelHeight: null or number |
| 197 |
reserveSpace: null or true |
| 198 |
|
| 199 |
tickLength: null or number |
| 200 |
|
| 201 |
alignTicksWithAxis: null or number |
| 202 |
} |
| 203 |
|
| 204 |
All axes have the same kind of options. The following describes how to |
| 205 |
configure one axis, see below for what to do if you've got more than |
| 206 |
one x axis or y axis. |
| 207 |
|
| 208 |
If you don't set the "show" option (i.e. it is null), visibility is |
| 209 |
auto-detected, i.e. the axis will show up if there's data associated |
| 210 |
with it. You can override this by setting the "show" option to true or |
| 211 |
false. |
| 212 |
|
| 213 |
The "position" option specifies where the axis is placed, bottom or |
| 214 |
top for x axes, left or right for y axes. The "mode" option determines |
| 215 |
how the data is interpreted, the default of null means as decimal |
| 216 |
numbers. Use "time" for time series data, see the time series data |
| 217 |
section. |
| 218 |
|
| 219 |
The "color" option determines the color of the labels and ticks for |
| 220 |
the axis (default is the grid color). For more fine-grained control |
| 221 |
you can also set the color of the ticks separately with "tickColor" |
| 222 |
(otherwise it's autogenerated as the base color with some |
| 223 |
transparency). |
| 224 |
|
| 225 |
The options "min"/"max" are the precise minimum/maximum value on the |
| 226 |
scale. If you don't specify either of them, a value will automatically |
| 227 |
be chosen based on the minimum/maximum data values. Note that Flot |
| 228 |
always examines all the data values you feed to it, even if a |
| 229 |
restriction on another axis may make some of them invisible (this |
| 230 |
makes interactive use more stable). |
| 231 |
|
| 232 |
The "autoscaleMargin" is a bit esoteric: it's the fraction of margin |
| 233 |
that the scaling algorithm will add to avoid that the outermost points |
| 234 |
ends up on the grid border. Note that this margin is only applied when |
| 235 |
a min or max value is not explicitly set. If a margin is specified, |
| 236 |
the plot will furthermore extend the axis end-point to the nearest |
| 237 |
whole tick. The default value is "null" for the x axes and 0.02 for y |
| 238 |
axes which seems appropriate for most cases. |
| 239 |
|
| 240 |
"transform" and "inverseTransform" are callbacks you can put in to |
| 241 |
change the way the data is drawn. You can design a function to |
| 242 |
compress or expand certain parts of the axis non-linearly, e.g. |
| 243 |
suppress weekends or compress far away points with a logarithm or some |
| 244 |
other means. When Flot draws the plot, each value is first put through |
| 245 |
the transform function. Here's an example, the x axis can be turned |
| 246 |
into a natural logarithm axis with the following code: |
| 247 |
|
| 248 |
xaxis: { |
| 249 |
transform: function (v) { return Math.log(v); }, |
| 250 |
inverseTransform: function (v) { return Math.exp(v); } |
| 251 |
} |
| 252 |
|
| 253 |
Similarly, for reversing the y axis so the values appear in inverse |
| 254 |
order: |
| 255 |
|
| 256 |
yaxis: { |
| 257 |
transform: function (v) { return -v; }, |
| 258 |
inverseTransform: function (v) { return -v; } |
| 259 |
} |
| 260 |
|
| 261 |
Note that for finding extrema, Flot assumes that the transform |
| 262 |
function does not reorder values (it should be monotone). |
| 263 |
|
| 264 |
The inverseTransform is simply the inverse of the transform function |
| 265 |
(so v == inverseTransform(transform(v)) for all relevant v). It is |
| 266 |
required for converting from canvas coordinates to data coordinates, |
| 267 |
e.g. for a mouse interaction where a certain pixel is clicked. If you |
| 268 |
don't use any interactive features of Flot, you may not need it. |
| 269 |
|
| 270 |
|
| 271 |
The rest of the options deal with the ticks. |
| 272 |
|
| 273 |
If you don't specify any ticks, a tick generator algorithm will make |
| 274 |
some for you. The algorithm has two passes. It first estimates how |
| 275 |
many ticks would be reasonable and uses this number to compute a nice |
| 276 |
round tick interval size. Then it generates the ticks. |
| 277 |
|
| 278 |
You can specify how many ticks the algorithm aims for by setting |
| 279 |
"ticks" to a number. The algorithm always tries to generate reasonably |
| 280 |
round tick values so even if you ask for three ticks, you might get |
| 281 |
five if that fits better with the rounding. If you don't want any |
| 282 |
ticks at all, set "ticks" to 0 or an empty array. |
| 283 |
|
| 284 |
Another option is to skip the rounding part and directly set the tick |
| 285 |
interval size with "tickSize". If you set it to 2, you'll get ticks at |
| 286 |
2, 4, 6, etc. Alternatively, you can specify that you just don't want |
| 287 |
ticks at a size less than a specific tick size with "minTickSize". |
| 288 |
Note that for time series, the format is an array like [2, "month"], |
| 289 |
see the next section. |
| 290 |
|
| 291 |
If you want to completely override the tick algorithm, you can specify |
| 292 |
an array for "ticks", either like this: |
| 293 |
|
| 294 |
ticks: [0, 1.2, 2.4] |
| 295 |
|
| 296 |
Or like this where the labels are also customized: |
| 297 |
|
| 298 |
ticks: [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]] |
| 299 |
|
| 300 |
You can mix the two if you like. |
| 301 |
|
| 302 |
For extra flexibility you can specify a function as the "ticks" |
| 303 |
parameter. The function will be called with an object with the axis |
| 304 |
min and max and should return a ticks array. Here's a simplistic tick |
| 305 |
generator that spits out intervals of pi, suitable for use on the x |
| 306 |
axis for trigonometric functions: |
| 307 |
|
| 308 |
function piTickGenerator(axis) { |
| 309 |
var res = [], i = Math.floor(axis.min / Math.PI); |
| 310 |
do { |
| 311 |
var v = i * Math.PI; |
| 312 |
res.push([v, i + "\u03c0"]); |
| 313 |
++i; |
| 314 |
} while (v < axis.max); |
| 315 |
|
| 316 |
return res; |
| 317 |
} |
| 318 |
|
| 319 |
You can control how the ticks look like with "tickDecimals", the |
| 320 |
number of decimals to display (default is auto-detected). |
| 321 |
|
| 322 |
Alternatively, for ultimate control over how ticks are formatted you can |
| 323 |
provide a function to "tickFormatter". The function is passed two |
| 324 |
parameters, the tick value and an axis object with information, and |
| 325 |
should return a string. The default formatter looks like this: |
| 326 |
|
| 327 |
function formatter(val, axis) { |
| 328 |
return val.toFixed(axis.tickDecimals); |
| 329 |
} |
| 330 |
|
| 331 |
The axis object has "min" and "max" with the range of the axis, |
| 332 |
"tickDecimals" with the number of decimals to round the value to and |
| 333 |
"tickSize" with the size of the interval between ticks as calculated |
| 334 |
by the automatic axis scaling algorithm (or specified by you). Here's |
| 335 |
an example of a custom formatter: |
| 336 |
|
| 337 |
function suffixFormatter(val, axis) { |
| 338 |
if (val > 1000000) |
| 339 |
return (val / 1000000).toFixed(axis.tickDecimals) + " MB"; |
| 340 |
else if (val > 1000) |
| 341 |
return (val / 1000).toFixed(axis.tickDecimals) + " kB"; |
| 342 |
else |
| 343 |
return val.toFixed(axis.tickDecimals) + " B"; |
| 344 |
} |
| 345 |
|
| 346 |
"labelWidth" and "labelHeight" specifies a fixed size of the tick |
| 347 |
labels in pixels. They're useful in case you need to align several |
| 348 |
plots. "reserveSpace" means that even if an axis isn't shown, Flot |
| 349 |
should reserve space for it - it is useful in combination with |
| 350 |
labelWidth and labelHeight for aligning multi-axis charts. |
| 351 |
|
| 352 |
"tickLength" is the length of the tick lines in pixels. By default, the |
| 353 |
innermost axes will have ticks that extend all across the plot, while |
| 354 |
any extra axes use small ticks. A value of null means use the default, |
| 355 |
while a number means small ticks of that length - set it to 0 to hide |
| 356 |
the lines completely. |
| 357 |
|
| 358 |
If you set "alignTicksWithAxis" to the number of another axis, e.g. |
| 359 |
alignTicksWithAxis: 1, Flot will ensure that the autogenerated ticks |
| 360 |
of this axis are aligned with the ticks of the other axis. This may |
| 361 |
improve the looks, e.g. if you have one y axis to the left and one to |
| 362 |
the right, because the grid lines will then match the ticks in both |
| 363 |
ends. The trade-off is that the forced ticks won't necessarily be at |
| 364 |
natural places. |
| 365 |
|
| 366 |
|
| 367 |
Multiple axes |
| 368 |
============= |
| 369 |
|
| 370 |
If you need more than one x axis or y axis, you need to specify for |
| 371 |
each data series which axis they are to use, as described under the |
| 372 |
format of the data series, e.g. { data: [...], yaxis: 2 } specifies |
| 373 |
that a series should be plotted against the second y axis. |
| 374 |
|
| 375 |
To actually configure that axis, you can't use the xaxis/yaxis options |
| 376 |
directly - instead there are two arrays in the options: |
| 377 |
|
| 378 |
xaxes: [] |
| 379 |
yaxes: [] |
| 380 |
|
| 381 |
Here's an example of configuring a single x axis and two y axes (we |
| 382 |
can leave options of the first y axis empty as the defaults are fine): |
| 383 |
|
| 384 |
{ |
| 385 |
xaxes: [ { position: "top" } ], |
| 386 |
yaxes: [ { }, { position: "right", min: 20 } ] |
| 387 |
} |
| 388 |
|
| 389 |
The arrays get their default values from the xaxis/yaxis settings, so |
| 390 |
say you want to have all y axes start at zero, you can simply specify |
| 391 |
yaxis: { min: 0 } instead of adding a min parameter to all the axes. |
| 392 |
|
| 393 |
Generally, the various interfaces in Flot dealing with data points |
| 394 |
either accept an xaxis/yaxis parameter to specify which axis number to |
| 395 |
use (starting from 1), or lets you specify the coordinate directly as |
| 396 |
x2/x3/... or x2axis/x3axis/... instead of "x" or "xaxis". |
| 397 |
|
| 398 |
|
| 399 |
Time series data |
| 400 |
================ |
| 401 |
|
| 402 |
Time series are a bit more difficult than scalar data because |
| 403 |
calendars don't follow a simple base 10 system. For many cases, Flot |
| 404 |
abstracts most of this away, but it can still be a bit difficult to |
| 405 |
get the data into Flot. So we'll first discuss the data format. |
| 406 |
|
| 407 |
The time series support in Flot is based on Javascript timestamps, |
| 408 |
i.e. everywhere a time value is expected or handed over, a Javascript |
| 409 |
timestamp number is used. This is a number, not a Date object. A |
| 410 |
Javascript timestamp is the number of milliseconds since January 1, |
| 411 |
1970 00:00:00 UTC. This is almost the same as Unix timestamps, except it's |
| 412 |
in milliseconds, so remember to multiply by 1000! |
| 413 |
|
| 414 |
You can see a timestamp like this |
| 415 |
|
| 416 |
alert((new Date()).getTime()) |
| 417 |
|
| 418 |
Normally you want the timestamps to be displayed according to a |
| 419 |
certain time zone, usually the time zone in which the data has been |
| 420 |
produced. However, Flot always displays timestamps according to UTC. |
| 421 |
It has to as the only alternative with core Javascript is to interpret |
| 422 |
the timestamps according to the time zone that the visitor is in, |
| 423 |
which means that the ticks will shift unpredictably with the time zone |
| 424 |
and daylight savings of each visitor. |
| 425 |
|
| 426 |
So given that there's no good support for custom time zones in |
| 427 |
Javascript, you'll have to take care of this server-side. |
| 428 |
|
| 429 |
The easiest way to think about it is to pretend that the data |
| 430 |
production time zone is UTC, even if it isn't. So if you have a |
| 431 |
datapoint at 2002-02-20 08:00, you can generate a timestamp for eight |
| 432 |
o'clock UTC even if it really happened eight o'clock UTC+0200. |
| 433 |
|
| 434 |
In PHP you can get an appropriate timestamp with |
| 435 |
'strtotime("2002-02-20 UTC") * 1000', in Python with |
| 436 |
'calendar.timegm(datetime_object.timetuple()) * 1000', in .NET with |
| 437 |
something like: |
| 438 |
|
| 439 |
public static int GetJavascriptTimestamp(System.DateTime input) |
| 440 |
{ |
| 441 |
System.TimeSpan span = new System.TimeSpan(System.DateTime.Parse("1/1/1970").Ticks); |
| 442 |
System.DateTime time = input.Subtract(span); |
| 443 |
return (long)(time.Ticks / 10000); |
| 444 |
} |
| 445 |
|
| 446 |
Javascript also has some support for parsing date strings, so it is |
| 447 |
possible to generate the timestamps manually client-side. |
| 448 |
|
| 449 |
If you've already got the real UTC timestamp, it's too late to use the |
| 450 |
pretend trick described above. But you can fix up the timestamps by |
| 451 |
adding the time zone offset, e.g. for UTC+0200 you would add 2 hours |
| 452 |
to the UTC timestamp you got. Then it'll look right on the plot. Most |
| 453 |
programming environments have some means of getting the timezone |
| 454 |
offset for a specific date (note that you need to get the offset for |
| 455 |
each individual timestamp to account for daylight savings). |
| 456 |
|
| 457 |
Once you've gotten the timestamps into the data and specified "time" |
| 458 |
as the axis mode, Flot will automatically generate relevant ticks and |
| 459 |
format them. As always, you can tweak the ticks via the "ticks" option |
| 460 |
- just remember that the values should be timestamps (numbers), not |
| 461 |
Date objects. |
| 462 |
|
| 463 |
Tick generation and formatting can also be controlled separately |
| 464 |
through the following axis options: |
| 465 |
|
| 466 |
minTickSize: array |
| 467 |
timeformat: null or format string |
| 468 |
monthNames: null or array of size 12 of strings |
| 469 |
twelveHourClock: boolean |
| 470 |
|
| 471 |
Here "timeformat" is a format string to use. You might use it like |
| 472 |
this: |
| 473 |
|
| 474 |
xaxis: { |
| 475 |
mode: "time" |
| 476 |
timeformat: "%y/%m/%d" |
| 477 |
} |
| 478 |
|
| 479 |
This will result in tick labels like "2000/12/24". The following |
| 480 |
specifiers are supported |
| 481 |
|
| 482 |
%h: hours |
| 483 |
%H: hours (left-padded with a zero) |
| 484 |
%M: minutes (left-padded with a zero) |
| 485 |
%S: seconds (left-padded with a zero) |
| 486 |
%d: day of month (1-31), use %0d for zero-padding |
| 487 |
%m: month (1-12), use %0m for zero-padding |
| 488 |
%y: year (four digits) |
| 489 |
%b: month name (customizable) |
| 490 |
%p: am/pm, additionally switches %h/%H to 12 hour instead of 24 |
| 491 |
%P: AM/PM (uppercase version of %p) |
| 492 |
|
| 493 |
Inserting a zero like %0m or %0d means that the specifier will be |
| 494 |
left-padded with a zero if it's only single-digit. So %y-%0m-%0d |
| 495 |
results in unambigious ISO timestamps like 2007-05-10 (for May 10th). |
| 496 |
|
| 497 |
You can customize the month names with the "monthNames" option. For |
| 498 |
instance, for Danish you might specify: |
| 499 |
|
| 500 |
monthNames: ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"] |
| 501 |
|
| 502 |
If you set "twelveHourClock" to true, the autogenerated timestamps |
| 503 |
will use 12 hour AM/PM timestamps instead of 24 hour. |
| 504 |
|
| 505 |
The format string and month names are used by a very simple built-in |
| 506 |
format function that takes a date object, a format string (and |
| 507 |
optionally an array of month names) and returns the formatted string. |
| 508 |
If needed, you can access it as $.plot.formatDate(date, formatstring, |
| 509 |
monthNames) or even replace it with another more advanced function |
| 510 |
from a date library if you're feeling adventurous. |
| 511 |
|
| 512 |
If everything else fails, you can control the formatting by specifying |
| 513 |
a custom tick formatter function as usual. Here's a simple example |
| 514 |
which will format December 24 as 24/12: |
| 515 |
|
| 516 |
tickFormatter: function (val, axis) { |
| 517 |
var d = new Date(val); |
| 518 |
return d.getUTCDate() + "/" + (d.getUTCMonth() + 1); |
| 519 |
} |
| 520 |
|
| 521 |
Note that for the time mode "tickSize" and "minTickSize" are a bit |
| 522 |
special in that they are arrays on the form "[value, unit]" where unit |
| 523 |
is one of "second", "minute", "hour", "day", "month" and "year". So |
| 524 |
you can specify |
| 525 |
|
| 526 |
minTickSize: [1, "month"] |
| 527 |
|
| 528 |
to get a tick interval size of at least 1 month and correspondingly, |
| 529 |
if axis.tickSize is [2, "day"] in the tick formatter, the ticks have |
| 530 |
been produced with two days in-between. |
| 531 |
|
| 532 |
|
| 533 |
|
| 534 |
Customizing the data series |
| 535 |
=========================== |
| 536 |
|
| 537 |
series: { |
| 538 |
lines, points, bars: { |
| 539 |
show: boolean |
| 540 |
lineWidth: number |
| 541 |
fill: boolean or number |
| 542 |
fillColor: null or color/gradient |
| 543 |
} |
| 544 |
|
| 545 |
points: { |
| 546 |
radius: number |
| 547 |
symbol: "circle" or function |
| 548 |
} |
| 549 |
|
| 550 |
bars: { |
| 551 |
barWidth: number |
| 552 |
align: "left" or "center" |
| 553 |
horizontal: boolean |
| 554 |
} |
| 555 |
|
| 556 |
lines: { |
| 557 |
steps: boolean |
| 558 |
} |
| 559 |
|
| 560 |
shadowSize: number |
| 561 |
} |
| 562 |
|
| 563 |
colors: [ color1, color2, ... ] |
| 564 |
|
| 565 |
The options inside "series: {}" are copied to each of the series. So |
| 566 |
you can specify that all series should have bars by putting it in the |
| 567 |
global options, or override it for individual series by specifying |
| 568 |
bars in a particular the series object in the array of data. |
| 569 |
|
| 570 |
The most important options are "lines", "points" and "bars" that |
| 571 |
specify whether and how lines, points and bars should be shown for |
| 572 |
each data series. In case you don't specify anything at all, Flot will |
| 573 |
default to showing lines (you can turn this off with |
| 574 |
lines: { show: false }). You can specify the various types |
| 575 |
independently of each other, and Flot will happily draw each of them |
| 576 |
in turn (this is probably only useful for lines and points), e.g. |
| 577 |
|
| 578 |
var options = { |
| 579 |
series: { |
| 580 |
lines: { show: true, fill: true, fillColor: "rgba(255, 255, 255, 0.8)" }, |
| 581 |
points: { show: true, fill: false } |
| 582 |
} |
| 583 |
}; |
| 584 |
|
| 585 |
"lineWidth" is the thickness of the line or outline in pixels. You can |
| 586 |
set it to 0 to prevent a line or outline from being drawn; this will |
| 587 |
also hide the shadow. |
| 588 |
|
| 589 |
"fill" is whether the shape should be filled. For lines, this produces |
| 590 |
area graphs. You can use "fillColor" to specify the color of the fill. |
| 591 |
If "fillColor" evaluates to false (default for everything except |
| 592 |
points which are filled with white), the fill color is auto-set to the |
| 593 |
color of the data series. You can adjust the opacity of the fill by |
| 594 |
setting fill to a number between 0 (fully transparent) and 1 (fully |
| 595 |
opaque). |
| 596 |
|
| 597 |
For bars, fillColor can be a gradient, see the gradient documentation |
| 598 |
below. "barWidth" is the width of the bars in units of the x axis (or |
| 599 |
the y axis if "horizontal" is true), contrary to most other measures |
| 600 |
that are specified in pixels. For instance, for time series the unit |
| 601 |
is milliseconds so 24 * 60 * 60 * 1000 produces bars with the width of |
| 602 |
a day. "align" specifies whether a bar should be left-aligned |
| 603 |
(default) or centered on top of the value it represents. When |
| 604 |
"horizontal" is on, the bars are drawn horizontally, i.e. from the y |
| 605 |
axis instead of the x axis; note that the bar end points are still |
| 606 |
defined in the same way so you'll probably want to swap the |
| 607 |
coordinates if you've been plotting vertical bars first. |
| 608 |
|
| 609 |
For lines, "steps" specifies whether two adjacent data points are |
| 610 |
connected with a straight (possibly diagonal) line or with first a |
| 611 |
horizontal and then a vertical line. Note that this transforms the |
| 612 |
data by adding extra points. |
| 613 |
|
| 614 |
For points, you can specify the radius and the symbol. The only |
| 615 |
built-in symbol type is circles, for other types you can use a plugin |
| 616 |
or define them yourself by specifying a callback: |
| 617 |
|
| 618 |
function cross(ctx, x, y, radius, shadow) { |
| 619 |
var size = radius * Math.sqrt(Math.PI) / 2; |
| 620 |
ctx.moveTo(x - size, y - size); |
| 621 |
ctx.lineTo(x + size, y + size); |
| 622 |
ctx.moveTo(x - size, y + size); |
| 623 |
ctx.lineTo(x + size, y - size); |
| 624 |
} |
| 625 |
|
| 626 |
The parameters are the drawing context, x and y coordinates of the |
| 627 |
center of the point, a radius which corresponds to what the circle |
| 628 |
would have used and whether the call is to draw a shadow (due to |
| 629 |
limited canvas support, shadows are currently faked through extra |
| 630 |
draws). It's good practice to ensure that the area covered by the |
| 631 |
symbol is the same as for the circle with the given radius, this |
| 632 |
ensures that all symbols have approximately the same visual weight. |
| 633 |
|
| 634 |
"shadowSize" is the default size of shadows in pixels. Set it to 0 to |
| 635 |
remove shadows. |
| 636 |
|
| 637 |
The "colors" array specifies a default color theme to get colors for |
| 638 |
the data series from. You can specify as many colors as you like, like |
| 639 |
this: |
| 640 |
|
| 641 |
colors: ["#d18b2c", "#dba255", "#919733"] |
| 642 |
|
| 643 |
If there are more data series than colors, Flot will try to generate |
| 644 |
extra colors by lightening and darkening colors in the theme. |
| 645 |
|
| 646 |
|
| 647 |
Customizing the grid |
| 648 |
==================== |
| 649 |
|
| 650 |
grid: { |
| 651 |
show: boolean |
| 652 |
aboveData: boolean |
| 653 |
color: color |
| 654 |
backgroundColor: color/gradient or null |
| 655 |
labelMargin: number |
| 656 |
axisMargin: number |
| 657 |
markings: array of markings or (fn: axes -> array of markings) |
| 658 |
borderWidth: number |
| 659 |
borderColor: color or null |
| 660 |
minBorderMargin: number or null |
| 661 |
clickable: boolean |
| 662 |
hoverable: boolean |
| 663 |
autoHighlight: boolean |
| 664 |
mouseActiveRadius: number |
| 665 |
} |
| 666 |
|
| 667 |
The grid is the thing with the axes and a number of ticks. Many of the |
| 668 |
things in the grid are configured under the individual axes, but not |
| 669 |
all. "color" is the color of the grid itself whereas "backgroundColor" |
| 670 |
specifies the background color inside the grid area, here null means |
| 671 |
that the background is transparent. You can also set a gradient, see |
| 672 |
the gradient documentation below. |
| 673 |
|
| 674 |
You can turn off the whole grid including tick labels by setting |
| 675 |
"show" to false. "aboveData" determines whether the grid is drawn |
| 676 |
above the data or below (below is default). |
| 677 |
|
| 678 |
"labelMargin" is the space in pixels between tick labels and axis |
| 679 |
line, and "axisMargin" is the space in pixels between axes when there |
| 680 |
are two next to each other. Note that you can style the tick labels |
| 681 |
with CSS, e.g. to change the color. They have class "tickLabel". |
| 682 |
|
| 683 |
"borderWidth" is the width of the border around the plot. Set it to 0 |
| 684 |
to disable the border. You can also set "borderColor" if you want the |
| 685 |
border to have a different color than the grid lines. |
| 686 |
"minBorderMargin" controls the default minimum margin around the |
| 687 |
border - it's used to make sure that points aren't accidentally |
| 688 |
clipped by the canvas edge so by default the value is computed from |
| 689 |
the point radius. |
| 690 |
|
| 691 |
"markings" is used to draw simple lines and rectangular areas in the |
| 692 |
background of the plot. You can either specify an array of ranges on |
| 693 |
the form { xaxis: { from, to }, yaxis: { from, to } } (with multiple |
| 694 |
axes, you can specify coordinates for other axes instead, e.g. as |
| 695 |
x2axis/x3axis/...) or with a function that returns such an array given |
| 696 |
the axes for the plot in an object as the first parameter. |
| 697 |
|
| 698 |
You can set the color of markings by specifying "color" in the ranges |
| 699 |
object. Here's an example array: |
| 700 |
|
| 701 |
markings: [ { xaxis: { from: 0, to: 2 }, yaxis: { from: 10, to: 10 }, color: "#bb0000" }, ... ] |
| 702 |
|
| 703 |
If you leave out one of the values, that value is assumed to go to the |
| 704 |
border of the plot. So for example if you only specify { xaxis: { |
| 705 |
from: 0, to: 2 } } it means an area that extends from the top to the |
| 706 |
bottom of the plot in the x range 0-2. |
| 707 |
|
| 708 |
A line is drawn if from and to are the same, e.g. |
| 709 |
|
| 710 |
markings: [ { yaxis: { from: 1, to: 1 } }, ... ] |
| 711 |
|
| 712 |
would draw a line parallel to the x axis at y = 1. You can control the |
| 713 |
line width with "lineWidth" in the range object. |
| 714 |
|
| 715 |
An example function that makes vertical stripes might look like this: |
| 716 |
|
| 717 |
markings: function (axes) { |
| 718 |
var markings = []; |
| 719 |
for (var x = Math.floor(axes.xaxis.min); x < axes.xaxis.max; x += 2) |
| 720 |
markings.push({ xaxis: { from: x, to: x + 1 } }); |
| 721 |
return markings; |
| 722 |
} |
| 723 |
|
| 724 |
|
| 725 |
If you set "clickable" to true, the plot will listen for click events |
| 726 |
on the plot area and fire a "plotclick" event on the placeholder with |
| 727 |
a position and a nearby data item object as parameters. The coordinates |
| 728 |
are available both in the unit of the axes (not in pixels) and in |
| 729 |
global screen coordinates. |
| 730 |
|
| 731 |
Likewise, if you set "hoverable" to true, the plot will listen for |
| 732 |
mouse move events on the plot area and fire a "plothover" event with |
| 733 |
the same parameters as the "plotclick" event. If "autoHighlight" is |
| 734 |
true (the default), nearby data items are highlighted automatically. |
| 735 |
If needed, you can disable highlighting and control it yourself with |
| 736 |
the highlight/unhighlight plot methods described elsewhere. |
| 737 |
|
| 738 |
You can use "plotclick" and "plothover" events like this: |
| 739 |
|
| 740 |
$.plot($("#placeholder"), [ d ], { grid: { clickable: true } }); |
| 741 |
|
| 742 |
$("#placeholder").bind("plotclick", function (event, pos, item) { |
| 743 |
alert("You clicked at " + pos.x + ", " + pos.y); |
| 744 |
// axis coordinates for other axes, if present, are in pos.x2, pos.x3, ... |
| 745 |
// if you need global screen coordinates, they are pos.pageX, pos.pageY |
| 746 |
|
| 747 |
if (item) { |
| 748 |
highlight(item.series, item.datapoint); |
| 749 |
alert("You clicked a point!"); |
| 750 |
} |
| 751 |
}); |
| 752 |
|
| 753 |
The item object in this example is either null or a nearby object on the form: |
| 754 |
|
| 755 |
item: { |
| 756 |
datapoint: the point, e.g. [0, 2] |
| 757 |
dataIndex: the index of the point in the data array |
| 758 |
series: the series object |
| 759 |
seriesIndex: the index of the series |
| 760 |
pageX, pageY: the global screen coordinates of the point |
| 761 |
} |
| 762 |
|
| 763 |
For instance, if you have specified the data like this |
| 764 |
|
| 765 |
$.plot($("#placeholder"), [ { label: "Foo", data: [[0, 10], [7, 3]] } ], ...); |
| 766 |
|
| 767 |
and the mouse is near the point (7, 3), "datapoint" is [7, 3], |
| 768 |
"dataIndex" will be 1, "series" is a normalized series object with |
| 769 |
among other things the "Foo" label in series.label and the color in |
| 770 |
series.color, and "seriesIndex" is 0. Note that plugins and options |
| 771 |
that transform the data can shift the indexes from what you specified |
| 772 |
in the original data array. |
| 773 |
|
| 774 |
If you use the above events to update some other information and want |
| 775 |
to clear out that info in case the mouse goes away, you'll probably |
| 776 |
also need to listen to "mouseout" events on the placeholder div. |
| 777 |
|
| 778 |
"mouseActiveRadius" specifies how far the mouse can be from an item |
| 779 |
and still activate it. If there are two or more points within this |
| 780 |
radius, Flot chooses the closest item. For bars, the top-most bar |
| 781 |
(from the latest specified data series) is chosen. |
| 782 |
|
| 783 |
If you want to disable interactivity for a specific data series, you |
| 784 |
can set "hoverable" and "clickable" to false in the options for that |
| 785 |
series, like this { data: [...], label: "Foo", clickable: false }. |
| 786 |
|
| 787 |
|
| 788 |
Specifying gradients |
| 789 |
==================== |
| 790 |
|
| 791 |
A gradient is specified like this: |
| 792 |
|
| 793 |
{ colors: [ color1, color2, ... ] } |
| 794 |
|
| 795 |
For instance, you might specify a background on the grid going from |
| 796 |
black to gray like this: |
| 797 |
|
| 798 |
grid: { |
| 799 |
backgroundColor: { colors: ["#000", "#999"] } |
| 800 |
} |
| 801 |
|
| 802 |
For the series you can specify the gradient as an object that |
| 803 |
specifies the scaling of the brightness and the opacity of the series |
| 804 |
color, e.g. |
| 805 |
|
| 806 |
{ colors: [{ opacity: 0.8 }, { brightness: 0.6, opacity: 0.8 } ] } |
| 807 |
|
| 808 |
where the first color simply has its alpha scaled, whereas the second |
| 809 |
is also darkened. For instance, for bars the following makes the bars |
| 810 |
gradually disappear, without outline: |
| 811 |
|
| 812 |
bars: { |
| 813 |
show: true, |
| 814 |
lineWidth: 0, |
| 815 |
fill: true, |
| 816 |
fillColor: { colors: [ { opacity: 0.8 }, { opacity: 0.1 } ] } |
| 817 |
} |
| 818 |
|
| 819 |
Flot currently only supports vertical gradients drawn from top to |
| 820 |
bottom because that's what works with IE. |
| 821 |
|
| 822 |
|
| 823 |
Plot Methods |
| 824 |
------------ |
| 825 |
|
| 826 |
The Plot object returned from the plot function has some methods you |
| 827 |
can call: |
| 828 |
|
| 829 |
- highlight(series, datapoint) |
| 830 |
|
| 831 |
Highlight a specific datapoint in the data series. You can either |
| 832 |
specify the actual objects, e.g. if you got them from a |
| 833 |
"plotclick" event, or you can specify the indices, e.g. |
| 834 |
highlight(1, 3) to highlight the fourth point in the second series |
| 835 |
(remember, zero-based indexing). |
| 836 |
|
| 837 |
|
| 838 |
- unhighlight(series, datapoint) or unhighlight() |
| 839 |
|
| 840 |
Remove the highlighting of the point, same parameters as |
| 841 |
highlight. |
| 842 |
|
| 843 |
If you call unhighlight with no parameters, e.g. as |
| 844 |
plot.unhighlight(), all current highlights are removed. |
| 845 |
|
| 846 |
|
| 847 |
- setData(data) |
| 848 |
|
| 849 |
You can use this to reset the data used. Note that axis scaling, |
| 850 |
ticks, legend etc. will not be recomputed (use setupGrid() to do |
| 851 |
that). You'll probably want to call draw() afterwards. |
| 852 |
|
| 853 |
You can use this function to speed up redrawing a small plot if |
| 854 |
you know that the axes won't change. Put in the new data with |
| 855 |
setData(newdata), call draw(), and you're good to go. Note that |
| 856 |
for large datasets, almost all the time is consumed in draw() |
| 857 |
plotting the data so in this case don't bother. |
| 858 |
|
| 859 |
|
| 860 |
- setupGrid() |
| 861 |
|
| 862 |
Recalculate and set axis scaling, ticks, legend etc. |
| 863 |
|
| 864 |
Note that because of the drawing model of the canvas, this |
| 865 |
function will immediately redraw (actually reinsert in the DOM) |
| 866 |
the labels and the legend, but not the actual tick lines because |
| 867 |
they're drawn on the canvas. You need to call draw() to get the |
| 868 |
canvas redrawn. |
| 869 |
|
| 870 |
- draw() |
| 871 |
|
| 872 |
Redraws the plot canvas. |
| 873 |
|
| 874 |
- triggerRedrawOverlay() |
| 875 |
|
| 876 |
Schedules an update of an overlay canvas used for drawing |
| 877 |
interactive things like a selection and point highlights. This |
| 878 |
is mostly useful for writing plugins. The redraw doesn't happen |
| 879 |
immediately, instead a timer is set to catch multiple successive |
| 880 |
redraws (e.g. from a mousemove). You can get to the overlay by |
| 881 |
setting up a drawOverlay hook. |
| 882 |
|
| 883 |
- width()/height() |
| 884 |
|
| 885 |
Gets the width and height of the plotting area inside the grid. |
| 886 |
This is smaller than the canvas or placeholder dimensions as some |
| 887 |
extra space is needed (e.g. for labels). |
| 888 |
|
| 889 |
- offset() |
| 890 |
|
| 891 |
Returns the offset of the plotting area inside the grid relative |
| 892 |
to the document, useful for instance for calculating mouse |
| 893 |
positions (event.pageX/Y minus this offset is the pixel position |
| 894 |
inside the plot). |
| 895 |
|
| 896 |
- pointOffset({ x: xpos, y: ypos }) |
| 897 |
|
| 898 |
Returns the calculated offset of the data point at (x, y) in data |
| 899 |
space within the placeholder div. If you are working with multiple axes, you |
| 900 |
can specify the x and y axis references, e.g. |
| 901 |
|
| 902 |
o = pointOffset({ x: xpos, y: ypos, xaxis: 2, yaxis: 3 }) |
| 903 |
// o.left and o.top now contains the offset within the div |
| 904 |
|
| 905 |
- resize() |
| 906 |
|
| 907 |
Tells Flot to resize the drawing canvas to the size of the |
| 908 |
placeholder. You need to run setupGrid() and draw() afterwards as |
| 909 |
canvas resizing is a destructive operation. This is used |
| 910 |
internally by the resize plugin. |
| 911 |
|
| 912 |
- shutdown() |
| 913 |
|
| 914 |
Cleans up any event handlers Flot has currently registered. This |
| 915 |
is used internally. |
| 916 |
|
| 917 |
|
| 918 |
There are also some members that let you peek inside the internal |
| 919 |
workings of Flot which is useful in some cases. Note that if you change |
| 920 |
something in the objects returned, you're changing the objects used by |
| 921 |
Flot to keep track of its state, so be careful. |
| 922 |
|
| 923 |
- getData() |
| 924 |
|
| 925 |
Returns an array of the data series currently used in normalized |
| 926 |
form with missing settings filled in according to the global |
| 927 |
options. So for instance to find out what color Flot has assigned |
| 928 |
to the data series, you could do this: |
| 929 |
|
| 930 |
var series = plot.getData(); |
| 931 |
for (var i = 0; i < series.length; ++i) |
| 932 |
alert(series[i].color); |
| 933 |
|
| 934 |
A notable other interesting field besides color is datapoints |
| 935 |
which has a field "points" with the normalized data points in a |
| 936 |
flat array (the field "pointsize" is the increment in the flat |
| 937 |
array to get to the next point so for a dataset consisting only of |
| 938 |
(x,y) pairs it would be 2). |
| 939 |
|
| 940 |
- getAxes() |
| 941 |
|
| 942 |
Gets an object with the axes. The axes are returned as the |
| 943 |
attributes of the object, so for instance getAxes().xaxis is the |
| 944 |
x axis. |
| 945 |
|
| 946 |
Various things are stuffed inside an axis object, e.g. you could |
| 947 |
use getAxes().xaxis.ticks to find out what the ticks are for the |
| 948 |
xaxis. Two other useful attributes are p2c and c2p, functions for |
| 949 |
transforming from data point space to the canvas plot space and |
| 950 |
back. Both returns values that are offset with the plot offset. |
| 951 |
Check the Flot source code for the complete set of attributes (or |
| 952 |
output an axis with console.log() and inspect it). |
| 953 |
|
| 954 |
With multiple axes, the extra axes are returned as x2axis, x3axis, |
| 955 |
etc., e.g. getAxes().y2axis is the second y axis. You can check |
| 956 |
y2axis.used to see whether the axis is associated with any data |
| 957 |
points and y2axis.show to see if it is currently shown. |
| 958 |
|
| 959 |
- getPlaceholder() |
| 960 |
|
| 961 |
Returns placeholder that the plot was put into. This can be useful |
| 962 |
for plugins for adding DOM elements or firing events. |
| 963 |
|
| 964 |
- getCanvas() |
| 965 |
|
| 966 |
Returns the canvas used for drawing in case you need to hack on it |
| 967 |
yourself. You'll probably need to get the plot offset too. |
| 968 |
|
| 969 |
- getPlotOffset() |
| 970 |
|
| 971 |
Gets the offset that the grid has within the canvas as an object |
| 972 |
with distances from the canvas edges as "left", "right", "top", |
| 973 |
"bottom". I.e., if you draw a circle on the canvas with the center |
| 974 |
placed at (left, top), its center will be at the top-most, left |
| 975 |
corner of the grid. |
| 976 |
|
| 977 |
- getOptions() |
| 978 |
|
| 979 |
Gets the options for the plot, normalized, with default values |
| 980 |
filled in. You get a reference to actual values used by Flot, so |
| 981 |
if you modify the values in here, Flot will use the new values. |
| 982 |
If you change something, you probably have to call draw() or |
| 983 |
setupGrid() or triggerRedrawOverlay() to see the change. |
| 984 |
|
| 985 |
|
| 986 |
Hooks |
| 987 |
===== |
| 988 |
|
| 989 |
In addition to the public methods, the Plot object also has some hooks |
| 990 |
that can be used to modify the plotting process. You can install a |
| 991 |
callback function at various points in the process, the function then |
| 992 |
gets access to the internal data structures in Flot. |
| 993 |
|
| 994 |
Here's an overview of the phases Flot goes through: |
| 995 |
|
| 996 |
1. Plugin initialization, parsing options |
| 997 |
|
| 998 |
2. Constructing the canvases used for drawing |
| 999 |
|
| 1000 |
3. Set data: parsing data specification, calculating colors, |
| 1001 |
copying raw data points into internal format, |
| 1002 |
normalizing them, finding max/min for axis auto-scaling |
| 1003 |
|
| 1004 |
4. Grid setup: calculating axis spacing, ticks, inserting tick |
| 1005 |
labels, the legend |
| 1006 |
|
| 1007 |
5. Draw: drawing the grid, drawing each of the series in turn |
| 1008 |
|
| 1009 |
6. Setting up event handling for interactive features |
| 1010 |
|
| 1011 |
7. Responding to events, if any |
| 1012 |
|
| 1013 |
8. Shutdown: this mostly happens in case a plot is overwritten |
| 1014 |
|
| 1015 |
Each hook is simply a function which is put in the appropriate array. |
| 1016 |
You can add them through the "hooks" option, and they are also available |
| 1017 |
after the plot is constructed as the "hooks" attribute on the returned |
| 1018 |
plot object, e.g. |
| 1019 |
|
| 1020 |
// define a simple draw hook |
| 1021 |
function hellohook(plot, canvascontext) { alert("hello!"); }; |
| 1022 |
|
| 1023 |
// pass it in, in an array since we might want to specify several |
| 1024 |
var plot = $.plot(placeholder, data, { hooks: { draw: [hellohook] } }); |
| 1025 |
|
| 1026 |
// we can now find it again in plot.hooks.draw[0] unless a plugin |
| 1027 |
// has added other hooks |
| 1028 |
|
| 1029 |
The available hooks are described below. All hook callbacks get the |
| 1030 |
plot object as first parameter. You can find some examples of defined |
| 1031 |
hooks in the plugins bundled with Flot. |
| 1032 |
|
| 1033 |
- processOptions [phase 1] |
| 1034 |
|
| 1035 |
function(plot, options) |
| 1036 |
|
| 1037 |
Called after Flot has parsed and merged options. Useful in the |
| 1038 |
instance where customizations beyond simple merging of default |
| 1039 |
values is needed. A plugin might use it to detect that it has been |
| 1040 |
enabled and then turn on or off other options. |
| 1041 |
|
| 1042 |
|
| 1043 |
- processRawData [phase 3] |
| 1044 |
|
| 1045 |
function(plot, series, data, datapoints) |
| 1046 |
|
| 1047 |
Called before Flot copies and normalizes the raw data for the given |
| 1048 |
series. If the function fills in datapoints.points with normalized |
| 1049 |
points and sets datapoints.pointsize to the size of the points, |
| 1050 |
Flot will skip the copying/normalization step for this series. |
| 1051 |
|
| 1052 |
In any case, you might be interested in setting datapoints.format, |
| 1053 |
an array of objects for specifying how a point is normalized and |
| 1054 |
how it interferes with axis scaling. |
| 1055 |
|
| 1056 |
The default format array for points is something along the lines of: |
| 1057 |
|
| 1058 |
[ |
| 1059 |
{ x: true, number: true, required: true }, |
| 1060 |
{ y: true, number: true, required: true } |
| 1061 |
] |
| 1062 |
|
| 1063 |
The first object means that for the first coordinate it should be |
| 1064 |
taken into account when scaling the x axis, that it must be a |
| 1065 |
number, and that it is required - so if it is null or cannot be |
| 1066 |
converted to a number, the whole point will be zeroed out with |
| 1067 |
nulls. Beyond these you can also specify "defaultValue", a value to |
| 1068 |
use if the coordinate is null. This is for instance handy for bars |
| 1069 |
where one can omit the third coordinate (the bottom of the bar) |
| 1070 |
which then defaults to 0. |
| 1071 |
|
| 1072 |
|
| 1073 |
- processDatapoints [phase 3] |
| 1074 |
|
| 1075 |
function(plot, series, datapoints) |
| 1076 |
|
| 1077 |
Called after normalization of the given series but before finding |
| 1078 |
min/max of the data points. This hook is useful for implementing data |
| 1079 |
transformations. "datapoints" contains the normalized data points in |
| 1080 |
a flat array as datapoints.points with the size of a single point |
| 1081 |
given in datapoints.pointsize. Here's a simple transform that |
| 1082 |
multiplies all y coordinates by 2: |
| 1083 |
|
| 1084 |
function multiply(plot, series, datapoints) { |
| 1085 |
var points = datapoints.points, ps = datapoints.pointsize; |
| 1086 |
for (var i = 0; i < points.length; i += ps) |
| 1087 |
points[i + 1] *= 2; |
| 1088 |
} |
| 1089 |
|
| 1090 |
Note that you must leave datapoints in a good condition as Flot |
| 1091 |
doesn't check it or do any normalization on it afterwards. |
| 1092 |
|
| 1093 |
|
| 1094 |
- drawSeries [phase 5] |
| 1095 |
|
| 1096 |
function(plot, canvascontext, series) |
| 1097 |
|
| 1098 |
Hook for custom drawing of a single series. Called just before the |
| 1099 |
standard drawing routine has been called in the loop that draws |
| 1100 |
each series. |
| 1101 |
|
| 1102 |
|
| 1103 |
- draw [phase 5] |
| 1104 |
|
| 1105 |
function(plot, canvascontext) |
| 1106 |
|
| 1107 |
Hook for drawing on the canvas. Called after the grid is drawn |
| 1108 |
(unless it's disabled or grid.aboveData is set) and the series have |
| 1109 |
been plotted (in case any points, lines or bars have been turned |
| 1110 |
on). For examples of how to draw things, look at the source code. |
| 1111 |
|
| 1112 |
|
| 1113 |
- bindEvents [phase 6] |
| 1114 |
|
| 1115 |
function(plot, eventHolder) |
| 1116 |
|
| 1117 |
Called after Flot has setup its event handlers. Should set any |
| 1118 |
necessary event handlers on eventHolder, a jQuery object with the |
| 1119 |
canvas, e.g. |
| 1120 |
|
| 1121 |
function (plot, eventHolder) { |
| 1122 |
eventHolder.mousedown(function (e) { |
| 1123 |
alert("You pressed the mouse at " + e.pageX + " " + e.pageY); |
| 1124 |
}); |
| 1125 |
} |
| 1126 |
|
| 1127 |
Interesting events include click, mousemove, mouseup/down. You can |
| 1128 |
use all jQuery events. Usually, the event handlers will update the |
| 1129 |
state by drawing something (add a drawOverlay hook and call |
| 1130 |
triggerRedrawOverlay) or firing an externally visible event for |
| 1131 |
user code. See the crosshair plugin for an example. |
| 1132 |
|
| 1133 |
Currently, eventHolder actually contains both the static canvas |
| 1134 |
used for the plot itself and the overlay canvas used for |
| 1135 |
interactive features because some versions of IE get the stacking |
| 1136 |
order wrong. The hook only gets one event, though (either for the |
| 1137 |
overlay or for the static canvas). |
| 1138 |
|
| 1139 |
Note that custom plot events generated by Flot are not generated on |
| 1140 |
eventHolder, but on the div placeholder supplied as the first |
| 1141 |
argument to the plot call. You can get that with |
| 1142 |
plot.getPlaceholder() - that's probably also the one you should use |
| 1143 |
if you need to fire a custom event. |
| 1144 |
|
| 1145 |
|
| 1146 |
- drawOverlay [phase 7] |
| 1147 |
|
| 1148 |
function (plot, canvascontext) |
| 1149 |
|
| 1150 |
The drawOverlay hook is used for interactive things that need a |
| 1151 |
canvas to draw on. The model currently used by Flot works the way |
| 1152 |
that an extra overlay canvas is positioned on top of the static |
| 1153 |
canvas. This overlay is cleared and then completely redrawn |
| 1154 |
whenever something interesting happens. This hook is called when |
| 1155 |
the overlay canvas is to be redrawn. |
| 1156 |
|
| 1157 |
"canvascontext" is the 2D context of the overlay canvas. You can |
| 1158 |
use this to draw things. You'll most likely need some of the |
| 1159 |
metrics computed by Flot, e.g. plot.width()/plot.height(). See the |
| 1160 |
crosshair plugin for an example. |
| 1161 |
|
| 1162 |
|
| 1163 |
- shutdown [phase 8] |
| 1164 |
|
| 1165 |
function (plot, eventHolder) |
| 1166 |
|
| 1167 |
Run when plot.shutdown() is called, which usually only happens in |
| 1168 |
case a plot is overwritten by a new plot. If you're writing a |
| 1169 |
plugin that adds extra DOM elements or event handlers, you should |
| 1170 |
add a callback to clean up after you. Take a look at the section in |
| 1171 |
PLUGINS.txt for more info. |
| 1172 |
|
| 1173 |
|
| 1174 |
Plugins |
| 1175 |
------- |
| 1176 |
|
| 1177 |
Plugins extend the functionality of Flot. To use a plugin, simply |
| 1178 |
include its Javascript file after Flot in the HTML page. |
| 1179 |
|
| 1180 |
If you're worried about download size/latency, you can concatenate all |
| 1181 |
the plugins you use, and Flot itself for that matter, into one big file |
| 1182 |
(make sure you get the order right), then optionally run it through a |
| 1183 |
Javascript minifier such as YUI Compressor. |
| 1184 |
|
| 1185 |
Here's a brief explanation of how the plugin plumbings work: |
| 1186 |
|
| 1187 |
Each plugin registers itself in the global array $.plot.plugins. When |
| 1188 |
you make a new plot object with $.plot, Flot goes through this array |
| 1189 |
calling the "init" function of each plugin and merging default options |
| 1190 |
from the "option" attribute of the plugin. The init function gets a |
| 1191 |
reference to the plot object created and uses this to register hooks |
| 1192 |
and add new public methods if needed. |
| 1193 |
|
| 1194 |
See the PLUGINS.txt file for details on how to write a plugin. As the |
| 1195 |
above description hints, it's actually pretty easy. |
| 1196 |
|
| 1197 |
|
| 1198 |
Version number |
| 1199 |
-------------- |
| 1200 |
|
| 1201 |
The version number of Flot is available in $.plot.version. |
| 1202 |
|
