1. SmartAdmin
  2. Statistics
  3. Flot

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

Ease of use

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. Additional examples are bundled with Flot. Flot is easy to use, just a few lines of code, you can make a simple line chart, it also provides a comprehensive API documentation where you can find examples, usage and methods. The most important part, Flot continues to release new versions, each new version comes with new features.

Find more examples and guidelines on Flot's official documentation and detailed tutorials on Flot Tutorials

Kitchen Sink (example)

We use a combination of various plots to create a more intricate diagram. More basic examples of plot can be found below

Flot Bar

Single barchart to display timeline differences. It is currently displaying only one group of data

Flot Line

Flot lines are the most easest to make and can display lots of data very nicely!

Flot Line (tooltip)

Adding tooltips is easy, you will need to include the plugin jquery.flot.tooltip.js

Flot Area

Area chart overlaps one over the other, making it easier to see the proportion of data

Flot Interval Curve

Generates random data to populate and redraw recursively, we use the jquery.flot.spline.js plugin to make the lines curvey

Flot Multiple Bars

Here we compare relations of different data groups, the greater the length of bar, bigger the value

Flot Curved Lines

Curved lines by using the plugin jquery.flot.spline.js, adding a nice transition to the eyes

Flot Curved (tooltip)

We take the flot chart from previous example (above) and add tooltips

Flot Area Curved

This Area chart has smooth curved lines to make it easy to read

Flot Interval (fill)

In this interval example we fill the whitespace. You can also try the interval button to change the speed of the redrawing

Flot Pie

Pie chart is used to see the proprotion of each data groups, making Flot pie chart is pretty simple, in order to make pie chart you have to incldue jquery.flot.pie.js plugin

Sales Chart (example)

Pie chart is used to see the proprotion of each data groups, making Flot pie chart is pretty simple, in order to make pie chart you have to incldue jquery.flot.pie.js plugin