Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Real-time updates

You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.

Multiple Axis

Multiple axis support showing the raw oil price in US $/barrel of crude oil vs. the exchange rate from US $ to €.

As illustrated, you can put in multiple axes if you need to. For each data series, simply specify the axis number. In the options, you can then configure where you want the extra axes to appear.


With the stack plugin, you can have Flot stack the series. This is useful if you wish to display both a total and the constituents it is made of. The only requirement is that you provide the input sorted on x.

Basic Options

There are plenty of options you can set to control the precise looks of your plot. You can control the ticks on the axes, the legend, the graph type, etc.

Flot goes to great lengths to provide sensible defaults so that you don't have to customize much for a good-looking result.

Series Types

Flot supports lines, points, filled areas, bars and any combinations of these, in the same plot and even on the same data series.

Toggling Series

Since all data is available client-side, it's pretty easy to make the plot interactive. Try turning countries on and off with the checkboxes next to the plot.