Tag Archives: chart

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.

Charts Development Web Development

HTML5 Canvas – Donut chart builder

Over the past couple of days I’ve been steadily making progress through Foundation HTML5 Canvas by Rob Hawkes. So far it’s a really great book, and I feel like I’m picking things up pretty rapidly (that’s a recommendation for you, by the way – seriously, if you’re thinking of learning how to use canvas, get it).

To test myself on what I had learned so far I decided to build a donut chart maker. It could just as easily have been a pie chart maker, but I wanted that extra bit of a challenge.


Before you say “don’t you hate pie charts, though?”, I’ll answer with a “generally yes, thanks”. I just figured it to be a decent challenge to set myself. A bar chart would have been relatively easy, I think (although I might have a go at some point in the future.

Now, I know I’ve probably not built it in the most efficient way, but I’m really pleased with progress so far. Basically, enter a comma separated list of values in the box and click ‘Go’ and a donut chart is built in the canvas space. Slice angles are automatically calculated based on what proportion each value is to the sum of all the values together.

Anyway, I just wanted to share it with you. My code is available on Github for those interested in looking at/critiquing/playing around with it. By all means fork it if you find something that you want to add.

I’m hoping to do much more with this in the near future, including maybe incorporating labels and percentage values into the chart, so do keep an eye out. I’m also thinking about how I could use the canvas element to create some other useful charts from scratch – it’s all exciting stuff!!

Charts Excel

Editing Excel charts with Illustrator/Inkscape

I only discovered this little gem a couple of days ago, but it’s such a useful little hint that I thought I’d share it with you guys.

Excel charts allow you to customise to a pretty decent degree, but you don’t get full control of how everything looks, which can make it a little restrictive.  If you have Illustator or Inkscape however, you can get some control back and edit everything down to the most minute detail.

If you select your chart object in Excel and CTRL+C to copy it, you can then paste the chart into the graphic design studio of your choice.  I use Inkscape as it’s free and open source, but I expect other software such as Illustrator will do the same.

Once the image is pasted in, you can un-group the individual chart elements and from that point forward you can edit every part of your chart so that it looks exactly as you want it to.

That doesn’t mean however that you should then use your new tip to make your charts look horrible.  Just saying.

Charts What???

Two things that have made me grumpy today

The first is this..

It’s an animated GIF of ’30 years of Music Industry Change’.  And it’s horrible, especially if it was done seriously (original can be found here).  Hopefully you don’t need to ask me what’s wrong with this (too many things to list but add the terms ‘pie’, ‘3d’ and ‘animated’ to a long, long list)

The second is the fact that I wanted to have a go at using the raw data behind this to maybe play around and create something a bit better.  In my searching I found where I can get the data, but apparently to get hold of it I have to PAY!!

I don’t understand why the RIAA would charge for users to access their data in this way.  I know they’re hacked off at how the music industry is (apparently) losing money through illegally downloading music, but is that any good reason to restrict their data to those willing to shell out their hard earned cash for it?

I wonder if anybody is brave enough to make this data available for free online?  God help them if they do..