jquery Drawing Tools Flot Learning Notes

Today I want to do a statistical chart, like 163 blog traffic statistics, with the help of flot, and very simple.

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.htmlThe 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 canvas2.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: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 DisplayColor : "#FFFFFF" line colorssteps:true ladder-shaped2.points {} display point3.bars {} display histogram4.xaxis {} horizontal style Example one: http://people.iola.dk/olau/flot/examples/basic.htmlSyntax Examples: $.plot ($ ("#name"), [d1,d2,d3]);
The 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 <; i + = 0.5)D1.push ([I, Math.sin (i)]);var d2 = [[0, 3], [4, 8], [8, 5], [9,]];var d3 = [[0], [7,], null, [7, 2.5], [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.htmlSyntax 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 the content usage instance for the scale display:

$.plot($("#placeholder"), [{ label: "", data: vData}],{    series: { lines: { show: true }, points: { show: true} },    xaxis: { ticks: [[1, "1月"], [3, "3月"], [5, "5月"], [7, "7月"], [9, "9月"], [11, "11月"]], min: 1, max: 12 },  //指定固定的显示内容    yaxis: { ticks: 5, min: 0 }  //在y轴方向显示5个刻度，此时显示内容由 flot 根据所给的数据自动判断}    );

where VData is the custom datavar 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. If you are using Internet Explorer and the version is below 8, browsing for pages that are useful flot drawing charts may not work as expected because these browsers do not support HTML5 canvas labels, but don't worry, just add the Explorercanvas plugin (excanvas.min.js) allows Internet Explorer to display Flot charts as well. The file can be downloaded here. Join Anchor PointOnce you have prepared the required files, the next step is to decide where to draw the flot, and you can decide for yourself where the flot will appear, as long as the <body> adds the following <div> tag, and gives an ID, which will be used later to draw. Another important thing is that you have to set the length and width of the anchor point, and if not set it can happen uncaught Invalid dimensions for plot, width = 0, height = 0 of the script error.

   <div id= "Flot-placeholder" style= "width:300px;height:150px" ></div>

Reference links

JQuery Drawing Tools Flot Learning notes