4 Ways to Create Web-Based Data Visualisations
By Brian Suda
20 April 2010 | Category: Code, Design, HTML5
Editors Note: In this Article Brian Suda explores 4 ways of creating web bases charts and graphs. Example files for the canvas and Flot based charts are available for download.
Charts and graphs are an excellent way to dig deeper, tell a story and get to the information behind the numbers. As more and more data sets are becoming publicly available, we want to convert this dull tabular data into something more visually appealing. In this article I'll walk you through 4 different ways to take a data set and convert it into a chart that's suitable for display on a website.
1: HTML
In HTML, the simplest way to display a chart would be to drop it in as an image. This picture could be generated offline in an application like Excel, SPSS, or R and exported as an image.
The downside of this method is that it can't easily be updated unless you go back to the original application, adjust the data's value, export the graphic, then re-upload it to the server. A better solution would be to create the charts as images dynamically on the website itself.
Besides hiring a programmer to create some custom charting software, there are a few other options available online. Google Charts is probably the easiest and most widely known. You get all the benefits of the Google infrastructure, caching, image processing, geographic distribution, etc. all for free.
Getting Started with Google Charts
To get started, Google has a pretty comprehensive site with examples and instructions. By passing different attributes in the URL’s query string, it’s easy for you to create a static chart with a server-side or client-side script. For most use-cases, creating an image in this way will suffice. It’s fast, simple and works across browsers with no hassle.
Let’s see how easy it is to create a quick pie chart of browser statistics. I had a look at Wikipedia’s Browser Usage Page and went with the W3Counter values for the top 5 major browsers. As you can see it breaks down as follows:
- IE: 47.9
- Firefox: 32.3
- Chrome: 7.4
- Safari: 5.5
- Opera: 2.1
Next we need to put these into the query string of a URL that Google Image Charts recognize.
Chart Parameters
There are several parameters, we’ll start from left to right. cht is the Chart Type, in this case ‘p’ stands for pie chart. Next we have chs, which is chart size. In my example I choose 400 pixels wide by 200 pixels tall. There is a maximum size, but it is easy to tweak these numbers as needed for your own site. chtt is chart title, which displays the text across the top to let readers know what this is a pie chart of.
Next we move to chd, which is chart data. There are several different ways to encode the data, but for this example I am using ‘text’, so we start with ‘t:’. Then it is just a comma separated list of the values. So far, pretty easy!
Finally, we have chl, which is chart legend. These are separated by a vertical bar ‘|’ and their order needs to correspond to the order of the chd values. My first data value was 47.9 which corresponds to the first chl value of Internet Explorer.
Now all you need to do is paste that url into your browser and you can see the result. You can even put that right into your own HTML using the <img alt="" /> element. You don’t need to save them and upload them to your own server. It is possible to link to them off Google’s server.
From Pie to Bar Chart
Now, let’s see what happens when you change cht from ‘p’ for pie chart to ‘bvs’ to make it a vertical bar chart! You probably want to add &chbh=a to the end of the URL, chbh stands for chart bar chart spacing and ‘a’ sets it to ‘auto’. Voila, a barchart of the same data. As you can tell, with almost no effort or knowledge of coding, you have made two different types of charts from a boring table of raw data.
The major downside to using images of charts is that your results are locked-up in as an image file rather than something that can be further manipulated by others. No cutting and pasting of the raw data, issues with screen-readers, and it doesn’t easily allow for further manipulation by the reader.
2: Flash
Flash and other plugins such as Java, allow you to create rich experiences in the browser. There are several free and paid applications to help you create charts and graphs which are more dynamic than an image. Again, Google offer many of their static image charts as interactive Flash versions, along with several new graphs that are only available in Flash.
Flash allows you to create visualizations which contain additional information. For instance, when the reader hovers over a section or clicks on a data point more information can appear. Interactive graphs allow you to drill down deeper into specific parts of a graph. Highlighting just a range of data can zoom in to the graph and view a smaller slice of the data.
Deeper Interactivity with Flash
An excellent example of an interactive chart is Google’s Motion chart. When you press the play button time progresses and you can see the sales figures versus the expenses of different fruits for different regions. This is something that is not possible with the static image charts. The ability to easily turn off and on different fruits, to add trails over time and to look at several days with of information in a single chart.
Flash used to be the goto technology for creating dynamic and interactive interfaces. You can still create robust, dynamic charts and graphs using Flash, but it’s becoming more and more problematic. As the next wave of devices don’t support Flash, no one seems to really miss it. What this means is that you need to consider alternatives to Flash-based content.
What about a pure web standards implementations? Well, there are at least two ways to achieve this, CSS and the new CANVAS element.
3: CSS
Many charts, like the barchart, can be thought of as just a list of values and we already have a pretty good way to mark-up lists in HTML. We can repurpose our old friends the <ol> and <ul> elements. With some CSS positioning and a bit of magic, it’s possible to make a nice barchart from a list. There are several implementations of pure CSS charts out there that can get you started.
Eric Meyer wrote a demo several years ago, but it is still as useful today as when it was written. He also managed to convert a table into a nice timeline using only CSS . This demonstrates the power and flexibility of HTML and CSS in creating charts and timelines.
The beauty of implementing this in CSS is that the data is directly in the HTML. Anyone changing the list values is updating this the chart for free. It’s also readable without any CSS or image capabilities, search engines can index the data, others can copy and paste out the information and screen-readers can easily access the information.
CSS Code Generators and Tutorials
Christian Heilmann has also been experimenting with CSS bar charts. On his website, he created a simple tool that will generate the code for you. This is all done in pure CSS, so there is no Javascript libraries or other heavy dependancies in the code, which makes it faster than some of the alternatives.
Another great article about CSS charts and graphs is from Wilson Miner and his A List Apart article called “Accessible Data Visualization with Web Standards“. He goes ever further and demonstrates “sparklines“, tiny nuggets of data inline with regular text. It is an excellent tutorial if you aren’t as comfortable with CSS. It walks you through the whole process really well with plenty of examples.
The downside to CSS charts is that they seem to be limited to bar charts and timelines, things with long lines, vertically or horizontally. Making complex charts and graphs are out of reach of the simple tools that CSS makes available.
4: Canvas
The newest and most exciting entry into this foray is the <canvas> element. It’s new in HTML5 and acts as an area in which you can draw 2D and 3D shapes. Now, you might be thinking to yourself, if canvas is some HTML5 thing isn’t that not going to be ready until 2020?
Well, yes and no. It is part of HTML5, but it is available in most browsers today, and the ones that don’t directly support it, can be made to support it with an extra javascript file. The <canvas> element can be retrofitted to earlier browsers including IE6, which makes it an excellent contender to Flash!
A Quick Canvas Demo
A simple example of the power of <canvas> is to draw two overlapping shapes with some simple opacity. To do this, we need two things. A <canvas> element and a few lines of javascript to draw the figures. In this example we’ll just create a canvas element that is 200 by 200 with an id of ‘figures’. The bit inside the canvas element will be ignored by browsers that support it, otherwise it will be interpreted as an inline element like a <span> for those who don’t.
The next major part to get the drawing working is a few lines of javascript. If you’re not comfortable with Javascript, that’s OK. These are pretty easy to understand, then we’ll show you a library which whisks all this code away for something much easier!
First, we need to get the DOM element that corresponds to the canvas. We do this by grabbing it based on the id, ‘figures’. Next, we need to tell it that this canvas we’ll be drawing on should be only 2D, that the bit about var context = canvas.getContext('2d');. Then we need to create a fill style. This is the colour of the shape we are creating. It uses the same rgb syntax as CSS, so you should be familiar with that.
Next, the fillRect() is used to create a simple rectangle. It takes four parameters, the X,Y of where to start and a length and a width. In our case we’re starting at 30 pixels from the left and 30 pixels from the top. Then creating a box 100 pixels wide by 100 pixels tall. If you stopped there you’d have a nice greenish rectangle, but that’s not very exciting.
Let’s add another one to the mix to show off a bit. Repeating the same steps, we give it a fill colour. This time we’ll use the rgba() syntax so we can give it an opacity of 50% or 0.5 from solid. We’ll then start the rectangle at 50,50 and have it the same width. What you see should look something like this:
Flot Makes it Easy
That’s the very basics in how to draw 2D shapes in <canvas>, but we’re talking about a charts and graphs replacement for Flash, not Paint! One open source library which does creates beautiful charts and graphs is called Flot. This works on top of jQuery and generates charts that are nearly indistinguishable from Flash, yet work on the iPhone and iPad platforms.
You don’t need to learn anything new since it’s using the jQuery and Javascript knowledge you already have, plus there are several tutorials and examples that can help you get started. The <canvas> element opens-up new doors and possibilities for web-based interactive charts and graphs. Pulling either from the local HTML or from a remote AJAX call, Flot can create beautiful charts on the fly with little or no coding needed. Lets look a quick example:
As you can see, we’ve generated a nice spiky line graph, but how much code did it take? Let’s have a look. Much like the previous example, we need some container. In this case we’ve started with a div with an id of ‘placeholder’ and a height and width. We didn’t use the <canvas> element here because the Javascript will automatically swap it out if the browser supports it, otherwise it will use some magic and use the <div> instead.
Then we have a two lines of Javascript code. The first sets-up all the x,y variables for the line. The second line is the flot jQuery function saying to created, or $.plot(), this chart. It takes two variables, the first is the element you want to use as the drawing canvas and the second is the data to be used. In this case the x,y coordinates we created to make a line.
That’s almost it, I did lie, you need to also remember to add a few lines at the top of your HTML to include jQuery, flot and a special javascript file to make this work in IE, but that’s just a cut and paste from the example.
This is probably the most basic chart you can create with flot, but it can get much more complex. Their examples page demonstrates multiple lines, stacked bar charts, selectable regions, and much, much more.
Conclusion
So next time you are looking to create charts and graphs dynamically online, you should remember the pros and cons of these four techniques and venture outside of your comfort zone and learn something new.
We know CSS has powerful abilities and that is backwards compatible with some help, so there is no reason you need to spend a large budget for designing a custom plugin or the slow workflow of creating static images when there are web standard solutions available.
Follow @thinkvitamin on Twitter Please check out Treehouse
