Flot User Manual)

Recently, jquery flot is being used for drawing. However, there is little help in this aspect. Just translate the English document directly.
The method for calling the plot function is as follows:
VaR plot = $. Plot (placeholder, Data, options)
Here, placeholder can be a jquery object, Dom element or jquery expression. You need to place the completed graph to this position. Placeholder must have width and height. Because plot will modify some attributes of placeholder, we recommend that you use a simple Div. do not set any attributes except the height and width.
Data structure:
Data should be an array of data series:
[Series1, series2,...]
A series can be raw data or an object with attributes. The raw data is a two-dimensional array:
[[X1, Y1], [X2, y2],...]
To simplify the logical relationship of flot content, numbers must be used for values on the X and Y axes. (Of course, if you have special requirements, flot can also support a time axis, ). In most cases, we extract data directly from the database and convert the data to the JSON format, but we are not concerned about the data type. If a strange phenomenon occurs, check whether the data format is correct.
If the data of a vertex is null, the vertex is ignored during the painting process. The line containing this point is broken. Before and after this point cannot be connected.
The line and point are related. For bars, you can set the third Association value (0 by default ).
A single sequence object structure is:
{
Color: color or number
Data: rawdata
Label: String
Lines: specific lines options
Bars: Specific bars options
Points: specific points options
Xaxis: 1 or 2
Yaxis: 1 or 2
Clickable: Boolean
Hoverable: Boolean
Shadowsize: Number
}
Except data, other attributes do not need to be explicitly specified, because they use default values in most cases. Generally, you only specify tags and data:
{
Label: "Y = 3 ",
Data: [[0, 3], [10, 3]
}
Label indicates the meaning of a data sequence. If there is only one sequence, you do not need to set this attribute. If there are multiple sequences, you need to set a label to distinguish the meaning of the sequence in the graph.
If color is not set, a color is automatically generated for display.
If you want users to add or delete data sequences, the remaining attributes will be very useful.
The xaxis and yaxis options are used to set the dimension. The default value is 1. If the value is set to 2, the second dimension is used (the X axis is above and the Y axis is on the right ).
Clickable and hoverable can be set to false. When the entire chart is set to interactive, this option can prevent users from interacting with this specific data sequence.
Attributes that are not described are described in detail later. In most cases, the default value is used. If you want to use a defined value, the default value will be overwritten.
This is a complicated data sequence definition:
[{Label: "foo", data: [[10, 1], [17,-14], [30, 5]},
{Label: "bar", data: [[11, 13], [19, 11], [30,-7]}]
Meaning of options:
All options are completely optional. If you want to modify it, You can treat it as an object:
VaR Options = {
Series :{
Lines: {Show: true },
Points: {Show: true}
}
};
User settings in the description section can be customized:
Legend :{
Show: Boolean
Labelformatter: null or (FN: String, Series object-> string)
Labelboxbordercolor: Color
Nocolumns: Number
Position: "ne" or "nw" or "se" or "SW"
Margin: number of pixels or [x margin, y margin]
Backgroundcolor: null or color
Backgroundopacity: number between 0 and 1
Container: null or jquery object/DOM element/jquery expression
}
The description can be viewed as a table consisting of two parts: one is the label of all data sequences, and the other is the color. If you want to display the label in other formats, you can use the lavelformatter function:

View plaincopy to clipboardprint?

1. Labelformatter: function (Label, Series ){
2. // Series is the series object for the label
3. Return '<a href = "#' + label + '" mce_href = "#' + label + '">' + label + '</a> ';
4. }

Nocolums divides this description into several columns. Position refers to the position (top-right, top-left, etc.) of the chart and the distance between the chart and other charts. Backgroundcolor and backgroundopacity are used to set the background color and transparency.
If you want to take this description from the chart and place it into an element in the Dom, you can set the container attribute, which can be a jquery object or expression. Some attributes such as psition and margin will be ignored, and the content of this element will be overwritten.
About axis user settings:

xaxis, yaxis: {    show: null or true/false    position: "bottom" or "top" or "left" or "right"    mode: null or "time"    color: null or color spec    tickColor: null or color spec        min: null or number    max: null or number    autoscaleMargin: null or number        transform: null or fn: number -> number    inverseTransform: null or fn: number -> number        ticks: null or number or ticks array or (fn: range -> ticks array)    tickSize: number or array    minTickSize: number or array    tickFormatter: (fn: number, object -> string) or string    tickDecimals: null or number    labelWidth: null or number    labelHeight: null or number    reserveSpace: null or true        tickLength: null or number    alignTicksWithAxis: null or number  }

All contain the same attributes. The following describes the meaning of each attribute in detail.

Show: If this attribute is not set, flot will automatically choose. For example, if the data is related to the axis, the axis will be displayed. Of course, the more flexible method is still used.

True or false to set this attribute.

Position: used to define the position of the Axis text display, whether it is at the top or bottom of the X axis, whether it is at the left or right of the Y axis.

Mode: the data type of the axis. The default value is the value type. If it is set to the time type, the time can be used as an axis.

Color: defines the color of the Axis identifier text and coordinates. If this parameter is not set, the grid color is the same as that in the chart. You can also set the color by yourself.

You can define the color of coordinates separately.

MIN/MAX: specifies the maximum and minimum values of the axis. If this parameter is not set, the flot is automatically calculated and a range is generated for display.

Autoscalemargin: this is a bit hard to understand. When the flot automatically calculates the min/max range, a value is added to prevent some vertices from being placed on the edge of the graph. This attribute can only be

It can be used without setting max/min. If a margin is set, flot will extend the end point of the axis to form a complete coordinate. Default

The X axis has no margin, and the Y axis has 0.02 margin. The default settings can be used by most users.

"Transform", "inversetransform": You can perform some special calculations on the original data before plotting. For example, you can use this method to draw some non-linear

. For example:

Xaxis :{

Transform: function (v) {return math. Log (v );},

Inversetransform: function (v) {return math. exp (V );}

}

Similarly, if you want to reverse the Y axis, you can:

Yaxis :{

Transform: function (v) {return-V ;},

Inversetransform: function (v) {return-V ;}

}

The data in flot is monotonous, that is to say, the original data cannot appear in disorder. Inversetransform is the inverse function of transform.

Raw data can be obtained from the displayed data. If the chart has no interaction process, you do not need to set this attribute.

The remaining options are for processing the scale. If you do not set the scale, the coordinate generation function automatically calculates the scale. The algorithm first estimates the number of scales and then calculates the interval between two scales to generate a complete scale. You can set the number of scales ("ticks") for the algorithm. The algorithm returns a value closest to the number of scales you set based on the range of the original data, that is to say, if you set 3, it is normal to return the five coordinates, because the algorithm thinks that the five scales are more suitable. If you do not set the scale, set "ticks" to 0 or an empty array. You can also set "ticksize" to define the difference between two scales. If it is set to 2, the scale will be 2, 4, 6. you can use "minticksize" to set the minimum value of the difference between two scales. For the time scale, we can set an array to complete: [2, "month"].

The most embarrassing method is to directly ignore the built-in flot algorithm and completely use the scale defined by the array:

Ticks: [0, 1.2, 2.4]

The following methods are more customizable:

Ticks: [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]

Flot also supports better scalability, that is, a function can be called to form the value of each scale. In a function, you need to calculate an array by the minimum, maximum, and the interval set by yourself, as each scale:

Function pitickgenerator (axis ){

VaR res = [], I = math. Floor (axis. min/Math. Pi );

Do {

VaR v = I * Math. Pi;

Res. Push ([V, I + "\ u03c0"]);

++ I;

} While (v <axis. max );

Return res;

}

You can also set "tickdecimals" to specify the accuracy of the scale display.

To define "tickformatter", a function can also flexibly format the display of a scale. The function has two parameters: the value of a scale and the maximum and minimum values on the axis, the return value must be of the string type:

Function formatter (Val, axis ){

Return Val. tofixed (axis. tickdecimals );

}

For an axis object, there are two attributes: min and max, and "tickdecimals" is the accuracy of coordinate display, "ticksize" is the difference between two scales, with so many attributes, you can customize the display content of the scale:

Function suffixformatter (Val, axis ){

If (Val & gt; 1000000)

Return (Val/1000000). tofixed (axis. tickdecimals) + "MB ";

Else if (Val & gt; 1000)

Return (Val/1000). tofixed (axis. tickdecimals) + "kb ";

Else

Return Val. tofixed (axis. tickdecimals) + "B ";

}

"Labelwidth" and "labelheight" define the scale display area. "Reservespace" means that even if you do not define an axis, flot will use this attribute to reserve space occupied by the axis. When creating a single-row multi-axis chart, you can use it with "labelwidth" and "labelheight.

"Ticklength" defines the length of the coordinate scale. null is the default value, that is, a small scale. If it is set to 0, the scale is not displayed on the axis.

"Aligntickswithaxis": if it is set to a number of another axis, flot will be aligned with the scale on other axes when the scale is automatically generated. This will be more beautiful, especially when the figure has a grid and Multiple Axes, It is very practical.

Draw Multiple Axes:

If you need to draw Multiple Axes, the data sequence is given in the following format. {data: [...], yaxis: 2} indicates that the sequence uses the second Y axis. To set the axis display format, you cannot directly use the xaxis/yaxis option. Instead, you must have two Arrays:

{

Xaxes: [{position: "TOP"}],

Yaxes: [{}, {position: "right", Min: 20}]

}

If you want to set all y axes to the same value, use yaxis: {min: 0.

Time data sequence:

Time series is a little more difficult than data series. Because the time series are not arranged in the 10th order, flot needs to convert the time to a value before processing. Flot supports time series through timestamps in JavaScript. Timestamp is the number of milliseconds from 00:00:00, January 1, January 1, 1970. It is similar to the timestamps used in Unix systems, except that the unit of JavaScript is millisecond and the unit of UNIX is second. You can obtain the browser's timestamp through the following:

Alert (new date (). gettime ())

In general, everyone wants to display the local time on the webpage, but flot can only convert the timestamp to the UTC time for display, so the only way is to get the current timestamp of the current browser, and time zone, and then calculate the value of Timestamp to obtain the UTC timestamp when the UTC time is equal to the current time. Then, the converted value is provided to flot for plotting.

In this case, the converted Timestamp can be used to construct the original data and define the axis type as "time". Flot can automatically calculate the scales and format them. Of course, you can also define the scale by yourself, but you must use a numeric parameter, not an object type. You can also customize the scale generation and formatting through the axis options:

Minticksize: Array

Timeformat: null or Format String

Monthnames: null or array of size 12 of strings

Twelvehourclock: Boolean

"Timeformat": Time Display format:

Xaxis :{

Mode: "Time"

Timeformat: "% Y/% m/% d"

}

The time scale is displayed as "2000/12/24". For the specific format definition, refer to the following:

% H: hour

% H: hour (0 on the left)

% M: minute (0 on the left)

% S: Second (0 on the left)

% D: Day. % 0d is used to add 0 to the left.

% M: month. % 0 m is used to fill 0 on the left.

% Y: Year (4 digits)

% B: name of the month (English name)

% P: 12-hour cast display (AM/PM), % H/% H

% P: 12-hour cast display (AM/pm)

The month name can be customized:

Monthnames: ["Jan", "FEB", "Mar", "APR", "Maj", "Jun", "Jul", "Aug", "Sep ", "OKT", "Nov", "dec"]

When "twelvehourclock" is set to true, the time is displayed in 12-hour format.