How can I show a graph using HTML5?


There are a number of ways to create graphs in HTML5, you could use canvas for example, but one of my favourite ways is to go outside of the HTML5 spec and use an associated technology called Scalable Vector Graphics (SVG).

Using SVG you can create really nice data visualisations that don’t degrade when scaled. There are a number of libraries that can get you up and running quickly. Raphaël is one of them.

The graphing portion of Raphaël is called gRaphaël it uses SVG when support is available but when it isn’t it falls back to VML. VML is a technology similar to SVG supported by Internet Explorer 6, 7 and 8. This means that any graphs created using this library will work in Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. Which means there is nothing holding you back implementing these today on your website.

Raphaël has some incredible examples:

Pie Chart: http://raphaeljs.com/pie.html

Line Chart: http://raphaeljs.com/pie.html

Bar Charts: http://g.raphaeljs.com/barchart2.html

If you are looking for an easy to use library with great documentation  there is also Kendo UI DataViz. It’s free for open source projects but also comes with a commercial licence with 1 year subscription & support. It makes a great choice if you are building a Line of business application or if you want something that works straight out of the box with very little configuration.

Comments (4)

  1. David Wong says:

    Hi Martin,

    Are you the same Martin Beeby that worked at Misco UK?  Had the pleasure to work for the BI team there for six months last year.  Can I also add the google Chart Tools to the above list.  In my experience all free charting components fall short of some feature at some point but they're free and easy to implement.

  2. thebeebs says:

    Yep I worked for Systemax for about 3 years back in 2007. Not used the Google tools before, I am guessing it's these ones: code.google.com/…/chart

  3. David Wong says:

    Yes those are the ones.  Sorry forgot to add a link.

  4. Ed says:

    I think SVG isn't supported in Android until Ice Cream Sandwich – so if you have a significant mobile audience it might make sense to use Canvas instead.

Skip to main content