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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.