Flot
Flot is a Javascript plotting library for jQuery created by Ole Laursen. It takes data from an array and uses the canvas element to draw the plotted graph.
Flot supports lines, points, filled areas, bars and any combinations of these, in the same plot and even on the same data series.
Flot is really simple to use, and works in multiple browsers (requiring ExCanvas for Internet Explorer).
There are also a set of examples of what Flot can do.
Developer instructions
Using Flot is easy. Simply create a placeholder div with a defined width and height (either inline or in an external stylesheet) to put the graph in:
<div id="placeholder" style="width:600px;height:300px"></div>
When the div is ready in the DOM, which is usually on document
ready, run the plot function:
$.plot($("#placeholder"), [data], [options]);
Where data is an array of data series and options is an object with
settings if you want to customize the plot. For example, to draw a line from
(0, 0) to (1, 1):
$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });
The plot function will immediately draw the chart on to the page.
Real World Examples
- On gambling site Punter’s Paradise, Flot is used to show horse racing tipping profits (click a Profile and then Performance).
- We Love Wind use Flot for visualization of wind forecasts in a kite and windsurf context.
Related demos