Wow – there’s a title to excite the hoards, eh? This might read as a kind of ‘note-to-self’, because that’s pretty much what it is – sorry about that. It might be useful to someone though, I suppose.
Flot is a jQuery-based charting library, as previously used by the StackExchange family of sites for things like their reputation chart before Jeff et al decided that pretty graphs of your rep weren’t actually that useful.
My particular requirement was to chart a count of ‘stuff’ against hours of the day, so pretty graphs would be very useful. Here are some notes on how to do that.
Let’s start with a screenshot. Here’s what I ended up with:
Flot relies on jQuery, so first of all we need to include that in our page, like so:
Then a link to the Flot library itself:
Flot works by replacing the contents of a ‘placeholder’ div, so stick one of those on the page, wherever you want the chart to appear. It needs an
id so that Flot can find it, and a
width, so that Flot can scale the chart appropriately:
Finally, we need to kick the chart into life, which I did like this:
new Date(...).getTime() stuff.
Line 11 calls the Flot function to generate the chart, selecting the
placeholder div, and passing in the
d array of values.
Line 12 tells Flot that we want a barchart.
Line 13 tells Flot to interpret the x values of our data as Timestamp values, so we get a useful ‘8:00’ instead of a not-so-useful ‘1342314544452’.
And that’s about it. Some things to remember:
- Flot doesn’t do axis labels. If you want one, you’ll need to put it on your page yourself, which is a bit sucky.
- I got mixed results when experimenting with the
barWidth parameter. Too narrow, and the x-axis scale started to get screwed up. A 50/50 ratio between bar and ‘gap’ seemed to look ok and not cause other problems.
- There’s a whole bunch of other parameters that I didn’t use. Here’s the full Flot API documentation.