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