Easy, Beautiful Charts with Flot

Easy, Beautiful Charts with Flot

I’ve been looking for a free, open source chart library for a while and was struggling to find something that was good enough (and handled time series and missing data points well). For a long time I’ve been using Fusion Charts (FC) and Open Flash Chart (OFC) in any in-house work and those products are very good. But they’re Flash, a little slow and not supported by some popular mobile devices. I’ve also used pChart for some testing but it was fairly stale in development and being images, had no interaction.

The Flot JS library was something I’d seen a while back, but before I became comfortable with JS and jQuery. It does almost exactly what I want, is farily light-weight, extensible and easy to use. In a few hours last week I swapped out the FC code I had written for Overview and put in something almost half the size with Flot that created (in my view) a better product.

So I thought I might let others know what a nice, easy option Flot is with a little example. Beware this is not a fully working, copy and paste sort of example, it’s really just a chunk of generic code I pulled out.

The final output is a 24 hour chart of CPU usage for a server.

I call a PHP script called plot.php from the page that displays other server info. That plot.php script needs to know some info about what to draw, so it runs off to the database and fetches the last 24 hours of data about a particular data collector. Time is handled by Flot using the standard JS date object and displays in UTC. Any missing points are handled by joining the two points either side while the x-axis maintains spacing. NULL data points are not plotted to give a nice gap as expected.

So here’s a dump of plot.php, showing some of the Flot basics. If you download Flot, the API.txt file has pretty much all the info you will need.

Update: So the WordPress behaviour for pasting code is not the best, so have a look at this text file.

Leave a Reply

Your email address will not be published. Required fields are marked *