Tag Archives: graph

2toria Charts Development

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:-


jQuery code:-

$(document).ready(function() {
        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.

Data Web Links

Cool stuff done with data: NameVoyager

In my continuing mission to find cool stuff done with data, whether in graphical form or otherwise I was made aware of this site, in which statistics on baby name usage since the 1880s has been collated so you can see visually how popular names have been over time until now.

It’s really quite addictive and works in real time as you type, narrowing down your search and, in the process of doing so changing the display below the search area to match what you’re typing.  You can also narrow your search further by boys or girls, or both.  Double clicking on a baby name in the graph then opens up another page which gives you even more information about that particular name.  It’s quite fascinating and I imagine quite useful if you’re wanting a really unique name that hasn’t been used for some time.

I did a search on my own name:-

Not all that popular really – at its peak there were 494 Mathew’s per million babies born.

Anyway it’s worth having a look at  – one of those sites you can easily spend an hour looking at without realising.  I love the way that the programming behind this makes the back-end information instantly available and the method of querying this data is so simple and foolproof.  Exactly the way data analysis should be!