Using Flot to generate a barchart against a time-based x-axis

Using Flot to generate a barchart against a time-based x-axis

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 height and width, so that Flot can scale the chart appropriately:

Finally, we need to kick the chart into life, which I did like this:

1

Lines 4-9 are setting up the data to plot. This is just proving the chart library works, so I’ll be generating this with from the view’s model at some point, but you get the idea. When plotting against a time axis with Flot, you need to generate a Javascript timestamp, hence the 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. barWidth: 1000*60*60*0.5 stipulates that the bars should be ‘half-an-hour’ wide. Since we’re charting in milliseconds (that’s what Javascript timestamps are based on), we need to tell Flot how many of them each of our bars should take up. Without this, the barchart would be generated with 1 pixel wide bars – not very pleasing on the eye.

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.
  • If you’re using Eclipse and including Flot in your project, then you’ll probably end up with a couple of Javascript errors and metric shedload of Javascript warnings. I’m not in the business of fixing other people’s code (especially when it seems to work just fine, thankyouverymuch), so I just stopped Eclipse whinging by excluding the Flot (and jQuery) files from the Eclipse Javascript source. See this StackOverflow answer for details.

0 thoughts on “Using Flot to generate a barchart against a time-based x-axis

Leave a Reply

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