Category Archives: Charts

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

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.

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.

donut

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 Web Development

Flot tutorial: Creating a simple bar chart

I thought I’d take a slightly different direction re charting and data visualisation today and offer up a quick and easy tutorial on creating charts for the web using a jQuery plugin called ‘Flot’ (for those not in the know, jQuery is a javascript library developed to make web-based programming easier and quicker. There’s too much of it to talk about now, but if you’re interested follow this link).

So what is flot?

Flot is a charting library designed to make creating charts for the web an easier task. Without such a library there’s a pretty big learning curve and work just to get a few lines drawn on a webpage. Flot takes all that fuss and hassle away and just allows us to get on with creating stuff. OK, there’s still coding that needs to be done, but it’s simplified greatly.  Another great thing about flot is that is open-source and, as such, updated reasonably regularly.  There was a time when there were hardly any updates, but there now seems to be some movement.

In this article I’m just going to take you through a very basic tutorial on creating a simple bar chart using this brilliant tool.

What do I need?

Nothing really, just a computer with a text editor and a browser.

Setting up

First of all, create a folder called ‘Flot Learning’.

The next thing you need to do for this tutorial is place three javascript libraries in your folder. You can download the latest version of Flot here as a zip file.  Unzip the file and copy these three files to your folder:-

excanvas.min.js
jquery.flot.js
jquery.js

These are the javascript files that will do the heavy lifting for you. The excanvas file is needed if you want your charts to display in IE6/7. Without it, nothing will display in these earlier browsers. You’ll notice there are a lot of other js files in the download, but we won’t need these for this example.

OK, now create a new file in notepad (or your web development IDE, if you have one) and call it flot-simple.html (or whatever name you like).

With the file now open, copy and paste the HTML below. This will act as your template for the code to follow:-

<!DOCTYPE html>

<head>
<title></title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="excanvas.min.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>

<style>
body {
     font-family: Arial;
}

#mycanvas {
     width: 500px;
     height: 300px;
}

</style>
</head>

<body>

<div id="mycanvas">

</div>

<script>

</script>

</body>
</html>

Let me quickly talk you through what this template is doing. In the three <script> lines we are linking to the three files you downloaded earlier. Following this we have some style instructions for the div. Normally you would put your style instructions in a separate file, but for simplicity’s sake I thought I’d add some page-level styling.

Finally we’ve created a div called “mycanvas”, which is the placeholder for our beautiful bar chart later on. The code to create the chart will be entered within the script tags near the bottom.

Make sense so far? If not you might need to read up a little bit more on basic HTML stuff to fully understand the meaning of the code in your file.

OK, then. Save your file and open it up in your browser and you should see absolutely nothing! If that’s the case we’re ready to move on.

Building the chart

In the bottom script tag, type the following:-

$(function() {

});

This is the wrapper for your charting code.

The first thing we need for our chart is some data. Let’s create a chart looking at seasonal sales figures for 2011:-

Spring:  2010
Summer:  2543
Autumn:  2520
Winter:  2354

Let’s start by putting the values into an array for use later. Type these bits inside the function we’ve just created:-

var myData = [[1,2010], [2, 2543], [3, 2520], [4, 2354]]

You’ll notice that the data is entered within a pair of square brackets, and each individual data point is entered within separate comma-separated square brackets, each of which contains two values. The first is the index of the data point you are plotting, and increments by one in this case, and the second is the value you want to plot on the chart.

OK..now the magic happens. Add the following:-

$.plot($("#mycanvas"), [
     {
          data: myData
     }
]);

The <script> section of your html file should now look like this:-

<script>
$(function() {
     var myData = [[1, 2010], [2, 2543], [3, 2520], [4, 2354]];

     $.plot($("#mycanvas"), [
          {
               data: myData
          }
     ]);

});
</script>

Save your file again and refresh the page in your browser. If everything is as it should be you should have something that looks like this:-

Do you? Excellent – we’re well on our way. OK, so you’ve created the most basic of charts using flot. No labels, no formatting, nothing. The default is a very simple line chart, as shown. Now we need to do something about how it looks. Let’s start by turning it into a bar chart, shall we? It is worth noting at this point that the chart is displayed just like any other page element, so you can move it around and display with any other content you choose. for this tutorial however we’re just going to stick with a chart on the page.

After the ‘data: myData’ part, add a comma, and on the next line type this: -

bars: { show: true }

(Please note, anything in curly brackets usually indicates something where multiple comma separated values can be added.

Refresh your browser and you should now see this:-

Happier? It’s great, isn’t it? I don’t like the colour much though, so let’s have a stab at it. Add another comma, and on the next line add:-

color: "#454d7d"

Save and refresh your browser again:-

So far so good? The color property must be in quotes and can be either a html color (ie ‘Gray’, ‘Red’ etc) or a color using hexadecimal notation as we just did.

Right then. What else is missing? I’m personally not too keen on being able to see the grid through the bars, so I’m going to change the opacity of the fill in the bars. We do this by adding another item between the curly brackets in the ‘bars’ section, so it looks like this:-

bars: {show: true, fill: 1}

The ‘fill’ property takes a value from 0 to 1 and acts as the opacity of the fill colour of the bar. The closer to 1 the less the opacity (or see-through-ability). Save and refresh again!

Better, but now it looks a bit too blocky. I’d like the bars to have a border…

In theory the bars already do have a border, it’s just that they are the same colour as the fill inside the bars, so what we need to do is change one of them. In Flot there is a fillColor property, which is entered under ‘bars’, so let’s for now just add that and add a lighter shade of blue. Your code for the bars should now look like this:-

bars: { show: true, fill: 1, fillColor: "#757dad" }

Note again that the fillColor property is entered within quotation marks as hexadecimal notation.

For reference (and just in case you’re getting lost at all), the code in the script tags should now look like this:-

<script>
$(function() {
     var myData = [[1, 2010], [2, 2543], [3, 2520], [4, 2354]];

     $.plot($("#mycanvas"), [
           {
                data: myData,
                bars: { show: true, fill: 1, fillColor: "#757dad" },
                color: "#454d7d"
           }
     ]);

});
</script>

Save and refresh!! All good so far:-

Right then. What’s missing now? We could do with better labelling of the x-axis, couldn’t we? Let’s get started!

There are a few ways we could go about doing this, but I’m going to opt for one which makes editing your chart much easier. We’re going to create an Options variable and store our display options in that. Add the following to your code, before the $.plot part of your code:-

var Options = {

}

The options for how the chart will display will appear as comma separated values between the curly brackets. Let’s start by changing the x-axis. We need to add labels, so let’s do that. Add the following between the curly brackets:-

xaxis: {ticks: [[1,"Spring"], [2, "Summer"], [3, "Autumn"], [4, "Winter"]] }

And click save. All we’ve done here is the same as we did when we added our data. We’ve four sets of comma separated values for each of the areas we’re reporting on. Make sure the first figure in each set (ie the number) matches the same number in the data).

If you were to refresh your browser at this point you wouldn’t see much, because we’ve done nothing with the new information. What we need to do is to add it to our Flot code.

Flot options are added to the $.plot part right after the last square bracket. In our case we’re just going to type the name of the variable (Options). Your code should look like this when you’ve done:-

<script>
$(function() {
     var myData = [[1, 2010], [2, 2543], [3, 2520], [4, 2354]];

    var Options = { xaxis: {ticks: [[1,"Spring"], [2, "Summer"], [3, "Autumn"], [4, "Winter"]] } }

     $.plot($("#mycanvas"), [
           {
                data: myData,
                bars: { show: true, fill: 1, fillColor: "#757dad" },
                color: "#454d7d"
           }
     ],Options);

});
</script>

I’ve highlighted the new code we’ve just discussed in blue to make it easier to see where it fits.

And…save and refresh one more time! You should see this:-

Not too bad…not too bad at all!! However, the finicky part of me isn’t happy that the x-axis labels don’t appear under the bars. Can we fix it? Yes, we can! Go back to the actual plotting code and add the following to the end after another comma:-

align: "center"

Which should leave your plot code looking like this:-

     $.plot($("#mycanvas"), [
           {
                data: myData,
                bars: { show: true, fill: 1, fillColor: "#757dad", align: "center" },
                color: "#454d7d"
           }
     ],Options);

Let’s save and refresh one last time for now. Here’s what’s left:-

Wonderful! Much, much better, don’t you agree?

And that’s it for now, I think. There’s so much more to Flot in terms of formatting, but I’m going to leave it here as I think you’ve learned a lot already. I’ll come back with a second part to this soon to discuss more formatting options, including grid lines and legends. If, in the meantime you want to learn more, Flot has some really good in-depth documentation here. It might be a little confusing if you’re not a javascript programmer, but if you use it based on the boilerplate code we’re left with it shouldn’t be too difficult to experiment with to make some great charts.

Flot doesn’t just do bar charts, either.  Check out the examples on the Flot website for some of the really cool stuff you can do with it.

Give the code a whirl and play around with some of the settings – if you’ve any questions or comments on this tutorial please do leave them after the post. I hope this has been of use to you and will be back soon with more Flot goodness!!

Finally, here’s the entire code we’ve just created:-

<!DOCTYPE html>

<head>
<title></title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="excanvas.min.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>

<style>
body {
     font-family: Arial;
}

#mycanvas {
     width: 500px;
     height: 300px;
}

</style>
</head>

<body>

<div id="mycanvas">

</div>

<script>
     $(function() {
          var myData = [[1, 2010], [2, 2543], [3, 2520], [4, 2354]];

          var Options = { xaxis: {ticks: [[1,"Spring"], [2, "Summer"], [3, "Autumn"], [4, "Winter"]] } }

          $.plot($("#mycanvas"), [
               {
                   data: myData,
                   bars: { show: true, fill: 1, fillColor: "#757dad", align:"center" },
                   color: "#454d7d"
               }
         ],Options);

});
</script>

</body>
</html>
Charts Infographics

Confusing pies

I found this today in an article linked by John Walkenbach on Google Plus, which displays results from a survey about air travel:-

The first thing you’re likely to notice other than 3d pie hell is that the percentages don’t add up.  At all.  There is an explanation from this however – respondents were allowed to choose more than one answer.

So why use three pie charts when the data isn’t being displayed as parts of a whole in the first place??

The first pie totals 159%, the second 37% and the third 11%.  That’s a total of 207% over three charts.  What?

I don’t know about you, but this completely and utterly confuses me.  Surely a better method would be just to show the total numbers of each answer chosen, or to in some way rank them in order of importance at the point of selection.  The three disjointed pie charts do absolutely nothing for the data as far as I’m concerned.

Charts Infographics

Wikipedia – Changing charts #3

It’s getting quite addictive this changing bad charts malarkey.  I found this one today on an entry about Tule Lake National Wildlife Refuge:-

Another simple fix, really.  Awful fonts and the seemingly ubiquitous 3d exploded pie were just just crying out to be fixed up, so I replaced it with this:-

Once again, much better, or at least I think so.  More to follow.  I might even have a go at this one (thanks to Jorge Camoes for the suggestion).

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

Wikipedia – Changing Charts #2

The second in my Wikipedia chart-editing ‘project’ was this, which appeared in the article ‘Ageing of Europe‘, and displays population growth for Russia:-

Whilst it’s not the worst chart in the world, there were a few things I noticed that I was unhappy with.  First of all, the 3d effect.  That had to go.  Also, the nature of the information lends itself much better to a pair of lines for easier reading and interpretation, but there’s a minor problem – the dates are a little disjointed and move in five year increments until 2005, and then we’re seeing the data yearly.  I looked at the source of the data to see if I could find out anything else.  Here are the statistics the data is based on, according to the original chart (source):-

Years

Births

Deaths

Natural
increase, decrease (-)

Infant deaths
under 1 year old

1992

1587.6

1807.4

-219.8

29.2

1995

1363.8

2203.8

-840.0

24.8

2000

1266.8

2225.3

-958.5

19.3

2005

1457.4

2303.9

-846.5

16.1

2006

1479.6

2166.7

-687.1

15.1

2007

1610.1

2080.4

-470.3

14.9

2008

1713.9

2075.9

-362.0

14.4

2009

1761.7

2010.5

-248.8

14.3

2010

1789.6

2031.0

-241.4

13.4

As you can see, the data actually seems to have either been updated, or was incorrect in the first place, as it actually starts at 1992 and finishes at 2010.  There’s still not information for the missing years, however.

I decided to use this seemingly updated information for my chart remake.

And, here it is:-

Once again, I think this paints a clearer picture.  I normalised the date ranges so that each tick is a year – the markers in each line show points where we actually have data, which doesn’t show what happened between, say, 1992 and 1995, but flows and reads much better than before, I think.

Any thoughts/suggestions on this fix?

Charts

Wikipedia – changing charts #1

Some time ago, Jorge Camoes posted about bad charts in Wikipedia and rallied for changes to be made to some truly horrific examples of bad charting.  Last night whilst browsing I noticed a few examples myself and decided to make a start, as some of the examples provided by Jorge still hadn’t been changed.

The entry on Throughput Accounting contained this beauty:-

3d bars and general junk make this a typical bad chart.  I spent an hour or so trying to fix it up a bit.  I’m no expert on accounting, so I just rearranged things a little and tried to make things look clearer and simpler.  No 3d, clearer labelling and re-ordering of the axes resulted in this:-

It’s still not perfect,  but so much better than the original, or at least I think so.  It’s a start, anyway.  Your comments are more than welcome.

Additionally, I wholeheartedly recommend that you also seek out more examples of bad charting and do something to fix them up to make charts on Wikipedia more consistent and junk-free.

Charts Infographics Life

My first infographics rant of 2012

I wasn’t planning on having a rant like this so early in the year, but then I saw the following ‘in the wild’ and felt the need to vent.

Every year I get an annual statement from a pension I paid into over ten years ago when I worked for a UK retailer. I usually ignore these as, to be honest I don’t always understand the figures completely and I wasn’t really in the job for long enough that the return will affect me greatly when I retire.

Just yesterday I received my annual funding statement for 2011 and, on opening it, found this table directly comparing the funding level from 2010 with that of 2007:-

Not only was there a shortfall in the overall funding total for 2010, but they felt it would be prudent to display the headline percentages again as this:

I mean, why? This tells me nothing more (less, in fact) than the table shown above. I already understand the figures well enough without a truly awful speedometer graphic to make things ‘clearer’ or ‘more interesting/fun’ for me…the key point is that, at this moment in time there would be insufficient funds to pay out to everybody in the scheme, compared to the surplus in 2007.  If I had a large amount of money stored in this pension fund I wouldn’t be welcoming something ‘fun’ to look at.

With only two data points to display there’s actually really no need for any graphics. The table (at least to me) is understandable enough without taking up unnecessary extra space in the report to ‘clarify’ the key data it contains.  In fact, the speedometer takes up more space on the report than the table does, and this  to only highlight the two percentages – a completely pointless waste of otherwise useful space, I think.

If there were more data points covering more years then a simple line chart like the one below would be much more useful (if a little boring), and would give a better overall picture of what has gone amiss and when – what do you think?

This makes it much easier to see how the fund has changed over time.   In fact, with this in mind I’m interested as to why the report didn’t contain more years’ data…

Anyway, that’s one rant over. The following page of the report then details where the money has been invested.

I don’t need to make any comments on this image as you probably already know my thoughts. At least it totals 100%.

As usual, comments are welcome.

Charts Google

Chart faux pas on Google Analytics?

Just been checking out the real-time stats on Google Analytics and noticed something not quite right on the right-hand side pageviews chart:-

Is it possible to have half a pageview, or am I missing something?