jqBullet – bullet graphs for wepages

Those of you who have followed 2toria over the last couple of years will know that I’ve taken more than a passing interest in graphs, charts and general data visualisation.  Whilst I’ve shifted my focus somewhat over the past year, these things still interest me greatly.  Over this weekend, I’ve been combining a couple of my passions (namely web technologies and the aforementioned data) to create jqBullet, a jQuery plugin designed to display bullet graphs in the web browser.

I’ve been planning for some time to put something together to help the data visualisation community but not had the knowledge, however a new found interest in the HTML5 canvas element and how to manipulate it has made things a lot more interesting here at 2toria towers.

jqBullet, like some other chart-based plugins such as flot, makes the dynamic creation and display of bullet graphs on your webpages and web-based applications/dashboards easy.  There’s still a lot of work to do to make it complete in accordance with the specification described on the perceptual edge website, but it’s getting there.  My hope is that it comes in useful for at least a handful of people, and I’m looking forward to developing it further over the coming weeks.

jqBullet is really easy to use.  All you need is to add a canvas element to your pages and link to both jQuery and the jqBullet libraries.  Make your link to jQuery first in your code, just to be on the safe side.

So, let’s say for example that you have a canvas element with dimensions 300px by 50px, and an ID of ‘myBullet’, here is the code you would need to display the following graph on your page:-

jqbullet

jQuery code:-

$(document).ready(function() {
    $("#myBullet").bullet({
        featuredMeasure: 175,
        compMeasure1: 200,
        qualScale1: 150,
        minValue: 0,
        maxValue: 350
        })
});

The options passed to the bullet method are very straightforward, and explained in further detail on the project homepage at jqbullet.2toria.com.

I’m hoping to further develop and support this project for some time, so please do take a look and let me know if you find it useful.  There are a handful of things that are still in ‘to do’ phase at the moment, but they will be implemented shortly.  Some of these include:-

  • An additional comparative measure
  • More than one qualitative range (up to a maximum of five)
  • Ability to change graph colors
  • Font options

As per usual, comments are more than welcome.  The code for jqBullet is also available on Github, if you’re interested in having a look or forking it.

Leave a Reply

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