jQuery plugin Flot chart drawing

August 17, 2010
Ole Laursen in the use of Plotr and PlotKit (all chart drawing library) when inspired, developed a jQuery-based diagramming plug ─ ─ Flot. Can only draw the line graph and bar chart, it is estimated will soon support more charts. With the draw diagrams, but also provides an arbitrary graph scaling function!
Folt fairly simple to use, and the charts look very attractive, can be scaled with this interactive feature, Flot is entirely possible applications in the business of Web applications! Flot is based on the canvas in the drawing, Firefox and Safari and other browsers have native support for canvas, though IE does not support, but can be solved through a small plug-in. Now, look at the effect of under Flot graph it: (The following is only a screenshot, Flot is not completely drawn the chart image files)




is not very exciting:) Following is a brief under Flot use. First download the latest version of the jQuery charting plugins Flot: jquery.flot-0.1.pack.js is jquery.flot-0.1.js compressed version. excanvas.pack.js is the canvas support IE browser plug-ins. You can be the introduction of excanvas script file:

Another point to note that, Flot need the latest version of jQuery 1.2.1.
Then, create a placeholder on the page:

Of course, you can also apply layer styles Div:

in the script file to add the next simple jQuery code:
$. plot ($(“# placeholder “), data, options);
done ! In the above jQuery code, the parameter data is a chart of the data array, options is a plot of a set of optional parameters. Concrete can see Flot API documentation and examples.
References: