jquery Drawing Tools------Flot

Flot Website: http://code.google.com/p/flot/

Download the JS file, using the same method as jquery.

Note: Flot is automatically drawn within the canvas label (canvas), IE is not supported and needs to be added excanvas.min.js, this file can be downloaded in the Flot URL given above

Example URL: http://people.iola.dk/olau/flot/examples/

Parameter description: http://wenku.baidu.com/view/d504613331126edb6f1a1008.html

The above two URLs have been very clear on the basis.

Example Description:

Syntax: $.plot (ID, data, options);

1.id: The ID of the div that placed the canvas

2.data: Data, usually in the form of a two-dimensional array.

For example: [[X1,y1],[x2,y2],[x3,y3], ...]

If a data is empty, the corresponding point is ignored and two points before and after pity Dorado are no longer connected by a straight line.

3.options: Style for setting the display style. Options in the format:

var options = {
	Lines: {show:true},
	Points: {show:true},
	Xaxis: {tickdecimals:0, ticksize:1}
	};

Parameters:

1.Lines {} Display line

Show:true Display

color: "#FFFFFF" line colors

Steps:true ladder-shaped

2.points {} display point

3.bars {} display histogram

4.xaxis {} horizontal Style

Example one: http://people.iola.dk/olau/flot/examples/basic.html

Syntax Examples: $.plot ($ ("#name"), [d1,d2,d3]);
parameter ①:name is the ID of the DIV where the canvas is located .

The parameter ②:d2,d3 is generally an array of arrays [x,y],x and y represent the horizontal and vertical axes of each point, for example, which can be defined as follows:

var d1 = [];

for (var i = 0; I < + + + 0.5)

D1.push ([I, Math.sin (i)]);

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

var d3 = [[0], [7,], null, [7, 2.5], [12, 2.5]];

Flot automatically sets the scale based on its maximum value and canvas size, such as setting Div as follows

<div id= "placeholder" style= "width:100px;height:100px;" ></div>

Each pixel in the x direction represents 9/100=0.09 units, and each pixel in the y direction represents 12/100=0.12 units.

Example two: http://people.iola.dk/olau/flot/examples/graph-types.html

Syntax Examples:

$.plot($( "#placeholder" ), [     {         data: d1,         lines: { show: true , fill: true }     },     {         data: d2,         bars: { show: true }     },     {         data: d3,         points: { show: true }     },     {         data: d4,         lines: { show: true }     },     {         data: d5,         lines: { show: true },         points: { show: true }     },     {         data: d6,         lines: { show: true , steps: true }     } ]);

parameter Description: Lins represents a line , parameter steps:true represents a ladder diagram, bars represents a histogram, points represents a point chart. Compared with example one, instance two encloses the data in example one in curly braces, and you need to specify the data source with "" Data: ", and then specify its display style after the comma.

Example Three: Specify what the scale displays

Usage examples:

$.plot ($ ( #placeholder " ), [{label: "" , Data:vdata}], {     Seri es: {lines: {show: true }, Points: {show: True }},     Xaxis: {ticks: [[1, ' January ' ], [3, ' March ' ], [5, "May" ], [7, "July" ], [9, "September" ], [One, "November" ]], Min:1, max:12},   //Specify fixed display     yaxis: {ticks:5, min: 0}   //Display 5 ticks in the y-axis, and the contents are automatically determined by flot according to the data given }     ) ;

where VData is the custom data

var vData = [[1, 103], [2, 28], [3, 135], [4, 130], [5, 145], [6, 155], [7, 155], [8, 155], [9, 155], [10, 155], [11,        155], [12, 155]];

The display effect is:

The key parameter is ticks . You can see that the x-axis scale In this example is displayed on its own, the y-axis lets flot automatically divide, and of course you can specify the y-axis.