Flot chart learning notes, flotchart learning notes

Flot chart learning notes, flotchart learning notes
Background and related descriptions

Drawing data display is required in the latest BS new project. The open-source Flot is decided only after adequate selection. Flot is a jQuery Drawing Library. It is mainly used to draw charts. It has attractive rendering appearance and interoperability features. It works normally in Internet Explorer 6 +, Chrome, Firefox 2 +, Safari 3 + and Opera 9.5 + browsers. The current version is Version0.8.3. The examples on the official website show examples that flot can be drawn, and I think the source code of these examples may be the fastest way for everyone to learn flot. Hey. Note: In this document, plot is used to replace Flot. The author gives an instant speechless answer.

 

What's with the name?

 

First: it's pronounced with a short o, like "plot". Not like "flawed ".

 

So "Flot" rhymes with "plot ".

 

And if you look up "flot" in a Danish-to-English dictionary, some of the words that come up are "good-looking", "attractive", "stylish ", "smart", "impressive", "extravagant ". one of the main goals with Flot is pretty looks.

Official Website

GitHub

Content Installation

Like other jquery libraries, we only need to introduce the jquery Library at the end of the html document. Note that our browser must support HTML5 canvas labels. To be compatible with IE9. We can use the canvas simulation library Excanvas. We can also find the following introduction method in the demo on the official website.

1 <! -- [If lte IE 8]> <script language = "javascript" type = "text/javascript" src = "excanvas. min. js"> </script> <! [Endif] -->

In this case, IE6 is not supported. Excanvas relies on VML Vector Markup Language. In addition, we can try to use the Flashcanvas library to implement simulation through Flash. Although Flash is slower to load than VML, The Flash version is faster to load when drawing many points. The jquery Library requires at least jquery1.2.6.

Basic use of placeholder

Create a placeholder div to place the drawn image:

1 <div id = "placeholder"> </div>

Here we only need to set the id of the div, and the plot will modify many attributes to present the drawn image. You do not need to set the style of the div by yourself. For example, if you set the background image of the div in IE7, this will cause problems.

Then we need to set the height and width of the placeholder, because the plot library does not know how to draw the graph size. Here we define css directly in html:

 

 

1 <div id="placeholder" style="width:600px;height:300px"></div>

 

At the same time, you can define the size in the external stylesheet to ensure that the div placeholder is not marked by display: none, which may lead to chaotic results.

Then run the following method in js:

1 var plot = $. plot (placeholder, data, options)

Let's take a look at the three parameters and the plot object.

• Placeholder: The div area to be placed in a drawing. It is a jquery object or DOM object.
• Data: a collection of data required for plotting. It is an array.
• Options: settings for custom plotting
• Plot: This object provides some methods for us to use the return value.

Here is a simple example:

1 $. plot ($ ("# placeholder"), [[[0, 0], [1, 1], {yaxis: {max: 1 }});

 

Data format

[Series1, series2,...]

This series of data is the original two-dimensional coordinate array (the internal x and y values must be numbers-we should pay attention to the data format when retrieving data from the database to be serialized as JSON and submitted to the foreground, if you encounter some mysterious errors, make sure that your input data is of the numeric type rather than the string type) or an object attribute.

If the input coordinate value is null or cannot be converted to a number, the data point is not drawn. There is a special example: if a line is drawn and the coordinate is empty, the point will become the ending point of the line. The subsequent vertex cannot be connected to the previous vertex. We can specify the third coordinate value to set the area filled under the drawing line or fence (the default value is 0 );

1 var d1 = []; 2 for (var I = 0; I <14; I ++ = 0.5) {3 d1.push ([I, Math. sin (I)]); 4} 5 6 var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]; 7 8 // A null signifies separate line segments 9 10 var d3 = [0, 12], [7, 12], null, [7, 2.5], [12, 2.5]; 11 12 $. plot ("# placeholder", [d1, d2, d3]);View Code

 

The result is as follows:

There is a cut at the red line.

When data is of the object type, the following format should be met:

 1 { 2     color: color or number 3     data: rawdata 4     label: string 5     lines: specific lines options 6     bars: specific bars options 7     points: specific points options 8     xaxis: number 9     yaxis: number10     clickable: boolean11     hoverable: boolean12     shadowSize: number13     highlightColor: color or number14 }

 

Next I will introduce the above attributes one by one:

Color: The color of the line or column in The drawn graph. If this parameter is not specified, the color value in the CSS color format is automatically generated.

Data: The coordinate point value.

Label indicates the name of the data segment in the graph, such as "Line1 ".

Lines: sets the attributes related to a line chart, such as show, fill, and fillColor.

Bars: sets related attributes when drawing as a bar chart, such as show, fill, and fillColor.

Points: Set the attributes of each vertex in the drawing, such as shape (circle by default) and radius.

Xaxis and yaxis: The two attributes indicate the coordinate axes used by the line or column. The default value is one. If this parameter is not set, all data uses the same coordinate axis, if you set other values (2 ~ N) The n axis is displayed on the image. As shown in:

(D2 adopts the peripheral axis)

 

 

Clickable and hoverable: used to set the interoperability attribute. The value is of the bool type. Similar event mechanism. If the value is false, the point's Interoperability function will be static.

ShadowSize: the shadow size of the line. Arabic numerals

 

HighlightColor: select the highlighted color.

 

Each field has a default value. If we re-assign values to the required attributes, the default values will be overwritten, for example:

1 [{label: "Foo", data: [[10, 1], [17,-14], [30, 5]}, {label: "Bar ", data: [[11, 13], [19, 11], [30,-7]}]

The following is an example when the data is an object: (options is set to null)

1 ar d1 = []; 2 for (var I = 0; I <14; I ++ = 0.5) {3 d1.push ([I, Math. sin (I)]); 4} 5 6 var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]; 7 8 var d3 = []; 9 for (var I = 0; I <14; I + = 0.5) {10 d3.push ([I, Math. cos (I)]); 11} 12 13 var d4 = []; 14 for (var I = 0; I <14; I ++ = 0.1) {15 d4.push ([I, Math. sqrt (I * 10)]); 16} 17 18 var d5 = []; 19 for (var I = 0; I <14; I ++ = 0.5) {20 d5.push ([I, Math. sqrt (I)]); 21} 22 23 var d6 = []; 24 for (var I = 0; I <14; I ++ = 0.5 + Math. random () {25 d6.push ([I, Math. sqrt (2 * I + Math. sin (I) + 5)]); 26} 27 28 $. plot ("# placeholder", [{29 data: d1, 30 lines: {show: true, fill: true} 31}, {32 data: d2, 33 bars: {show: true} 34}, {35 data: d3, 36 points: {show: true} 37}, {38 data: d4, 39 lines: {show: true} 40 },{ 41 data: d5, 42 lines: {show: true}, 43 points: {show: true} 44 },{ 45 data: d6, 46 lines: {show: true, steps: true} 47}]);View Code

Note: We can set the above attributes separately in each data set to realize the differences between each line or bar column, you can also set the preceding attributes collectively in the unified option settings.

Options

All options are completely selectable. we can define the option object separately in the document, and then input the option value in the $. plot Method:

1 var options = {2     series: {3         lines: { show: true },4         points: { show: true }5     }6 };7 8 $.plot(placeholder, data, options);

 

There are many attributes in options. Here we will explain one by one:

Customize legend attributes

The legend attribute is used to define the label information attribute of a line chart.

 1 legend: { 2     show: boolean 3     labelFormatter: null or (fn: string, series object -> string) 4     labelBoxBorderColor: color 5     noColumns: number 6     position: "ne" or "nw" or "se" or "sw" 7     margin: number of pixels or [x margin, y margin] 8     backgroundColor: null or color 9     backgroundOpacity: number between 0 and 110     container: null or jQuery object/DOM element/jQuery expression11     sorted: null/false, true, "ascending", "descending", "reverse", or a comparator12 }

Show: sets whether to display the label,

LabelFormatter: Set the event corresponding to the label. Example:

LabelFormatter: function (label, series) {// alert (label ); return '<a href = "#' + label + '">' + label + '</a> ';}

LabelBoxBorderColor: Set the border color of the label.

NoColumns: set the number of columns in the label group in the graph. The default value is 1. only one label is arranged in each row. if it is set to n, n labels are arranged in each line. the following is the case of noColumns: 2.

1 sorted: function (a, B) {2 // sort alphabetically in ascending order3 return a. label = B. label? 0: (4 a. label> B. label? 1:-15) 6}

 

Customized axes 1 xaxis, yaxis: {2 show: null or true/false 3 position: "bottom" or "top" or "left" or "right" 4 mode: null or "time" ("time" requires jquery. flot. time. js plugin) 5 timezone: null, "browser" or timezone (only makes sense for mode: "time") 6 7 color: null or color spec 8 tickColor: null or color spec 9 font: null or font spec object10 11 min: null or number12 max: null or number13 autoscaleMargin: null or number14 15 transform: null or fn: number-> number16 inverseTransform: null or fn: number-> number17 18 ticks: null or number or ticks array or (fn: axis-> ticks array) 19 tickSize: number or array20 minTickSize: number or array21 tickFormatter: (fn: number, object-> string) or string22 tickDecimals: null or number23 24 labelWidth: null or number25 labelHeight: null or number26 reserveSpace: null or true27 28 tickLength: null or number29 30 alignTicksWithAxis: null or number31}View Code

 

The preceding attributes are used to set coordinate axes. The X and Y axes are common. Let me explain one by one:

Show: whether the axis is displayed for bool. The default value is true.

Position: Set the position of the Axis chart. The X axis value is "top"/"bottom", and the Y axis value is "left"/"right ".

Mode: Set how to parse the corresponding value. The default value or null value indicates that the corresponding value is parsed by decimal number, and "time" is set to parse the value of the timestamp type (jquery needs to be introduced. flot. time. js plug-in to support timestamp conversion)

Timezone: set the time zone. The values include null, "browser", or specific time zone settings.

Color: Set the color of the coordinate line.

TickColor: Set the color of the coordinate line. It seems like the parent. According to the official website, we can get more fine-grained control.

Font: Set the font style of the values on the axis as follows:

1 {2     size: 11,3     lineHeight: 13,4     style: "italic",5     weight: "bold",6     family: "sans-serif",7     variant: "small-caps",8     color: "#545454"9 }

 

Here, the size and lineHeight attributes must be defined using pixel values.

Min & max: set the maximum and minimum values of the coordinate axis. If not specified, select the maximum and minimum values in the drawing data source.

AutoscaleMargin: This attribute is used to specify the maximum extension value of the coordinate axis when the maximum and minimum values of the coordinate axis are not specified (it feels like the axis is being compressed or enlarged ). The default value of the X axis is null, and the default value of the Y axis is 0.02, which can adapt to the normal size of most cases.

Transform & inverseTransForm: Set and change the value you have drawn. For example, the original value needs to be compressed or expanded (for example, when small values need to be converted to percentages ). The accepted value is a function. The general operation process is that when the Flot starts drawing, each data source first uses the conversion function. For example, convert the x axis value to the natural logarithm:

1 xaxis: {2     transform: function (v) { return Math.log(v); },3     inverseTransform: function (v) { return Math.exp(v); }4 }

 

Keep updating !!!

FusionCharts Suite XT, Google Chart Tools, Flot and other JavaScript/HTML5 charts

FusionCharts Suite XT can be configured in data or Java Script code. Linked-Charts makes multi-level drilling easier.
HighCharts can be drilled down through Java Script code
Google Chart Tools: Java Script files are directly loaded from the google server. Therefore, your applications must be connected to the Internet to view charts.
Flot, Sencha ExtJS Charts, Chart. js, and jqPlot support animation.
Reference: www.evget.com/zh-CN/Info/catalog/19113.html
FusionCharts Suite XT is much more powerful, so it is normal for many companies to select him.

How can I draw pictures of excanvasjs and ProtoChartjs files?

The charts produced by Flot are not shown below IE9. I have used excanvas. js and QQ5 73264224 to provide the files... I just got it done. Come here to help others. Use Winsock protocol Repair Tool winsockxpfix 1...