You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.4 KiB
Plaintext
118 lines
3.4 KiB
Plaintext
Flot Reference
|
|
--------------
|
|
|
|
Consider a call to the plot function:
|
|
|
|
var plot = $.plot(placeholder, data, options)
|
|
|
|
The placeholder is a jQuery object that the plot will be put into.
|
|
This placeholder needs to have its width and height set as explained
|
|
in the README. The plot will modify some properties of the placeholder
|
|
so it's recommended you simply pass in a div that you don't use it for
|
|
anything else.
|
|
|
|
The format of the data is documented below, as is the available
|
|
options. The "plot" object returned has some members you can call.
|
|
These are documented separately below.
|
|
|
|
Note that in general there are no guarantees if you change any of the
|
|
objects you pass in to the plot function or get out of it as the
|
|
objects may not be deep-copied.
|
|
|
|
|
|
Data Format
|
|
-----------
|
|
|
|
The data is an array of data series:
|
|
|
|
[ series1, series2, ... ]
|
|
|
|
A series can either be raw data or an object with properties. The raw
|
|
data format is an array of points:
|
|
|
|
[ [x1, y1], [x2, y2], ... ]
|
|
|
|
E.g.
|
|
|
|
[ [1, 3], [2, 14.01], [3.5, 3.14] ]
|
|
|
|
The format of a single series object is as follows:
|
|
|
|
{
|
|
color: colorspec or number,
|
|
data: rawdata,
|
|
label: string,
|
|
lines: specific lines options,
|
|
bars: specific bars options,
|
|
points: specific points options,
|
|
shadowSize: number
|
|
}
|
|
|
|
You don't have to specify any of them except the data, the rest are
|
|
options that will get default values. Typically you'd only specify
|
|
label and data, like this:
|
|
|
|
{
|
|
label: "y = 3",
|
|
data: [[0, 3], [10, 3]]
|
|
}
|
|
|
|
The label is used for the legend, if you don't specify one, the series
|
|
will not show up in the legend.
|
|
|
|
If you don't specify color, the series will get a color from the
|
|
auto-generated colors. The color is either a CSS color specification
|
|
(like "rgb(255, 100, 123)") or an integer that specifies which of
|
|
auto-generated colors to select, e.g. 0 will get color no. 0, etc.
|
|
|
|
The latter is mostly useful if you let the user add and remove series,
|
|
in which case you can hard-code the color index to prevent the colors
|
|
from jumping around between the series.
|
|
|
|
The rest of the options are all documented below as they are the same
|
|
as the default options passed in via the options parameter in the plot
|
|
commmand. When you specify them for a specific data series, they will
|
|
override the default options for the plot for that data series.
|
|
|
|
|
|
Plot Options
|
|
------------
|
|
|
|
|
|
|
|
|
|
Plot Members
|
|
------------
|
|
|
|
The Plot object returned from the plot function has the following
|
|
members:
|
|
|
|
- clearSelection()
|
|
|
|
Clear the selection rectangle.
|
|
|
|
- setSelection(area)
|
|
|
|
Set the selection rectangle. The passed in area should have the
|
|
members x1 and x2 if the selection mode is "x" and y1 and y2 if
|
|
the selection mode is "y" and both x1, x2 and y1, y2 if the
|
|
selection mode is "xy", like this:
|
|
|
|
setSelection({ x1: 0, x2: 10, y1: 40, y2: 60});
|
|
|
|
setSelection will trigger the "selected" event when called so you
|
|
may have to do a bit of shortcircuiting to prevent an eternal loop
|
|
if you invoke the method inside the "selected" handler.
|
|
|
|
- getCanvas()
|
|
|
|
Returns the canvas used for drawing if you need to hack on it
|
|
yourself.
|
|
|
|
- getPlotOffset()
|
|
|
|
Gets the offset that grid has within the canvas as an object with
|
|
the members left, right, top, bottom. I.e., if you draw a circle
|
|
on the canvas with the center placed at (left, top), its center
|
|
will be at the top-most, left corner of the grid.
|