Draw your first chart (jquery-flot-line-chart)

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:

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.style of Xaxis {} horizontal   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. parameter ②:d2,D3 A general array of arrays [x,y],x and y represent the horizontal and vertical axes of each point, for example, 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: {s how:true}        },        {            data:d5,            lines: {show:true},            points: {show:true}        },        {            dat a: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, "January"], [3, "March"], [5, "May"], [7, "July"], [9, "September"], [11, "November"]], min:1, max:12},  //specify Fixed display content        yaxis: {ticks:5, min:0}  //displays 5 ticks in the y-axis direction, and the contents are automatically determined by the Flot according to the given data        );

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.

Draw your first chart (jquery-flot-line-chart)