Weekly Design News Resources
This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebookor by subscribing to our RSS feed. Our Weekly Design News has been sponsored by MediaLoot. Check them out for some seriously useful resources like icon fonts, UI kits, vectors and themes.
Create beautiful data visualisationswith the SVG Google Charts API
Front end developer David Smith explains how to utilise the Google Charts API to create flexible HTML5/SVG-based charts that are visually appealing and work cross browser Data is big business on the web. Each day as we browse we generate enormous amounts of data which site owners and businesses use to determine everything from the next big re-design to strategy and advertising spend.
Visually, however, data can be very boring and unless you’re a statistician, large amounts of data can be particularly difficult to digest. As web designers, semantics suggest that HTML tables should be used to present data as they provide the “language” best suited to marking up facts and figures. Nonetheless, beyond a few nice borders and “zebra striped” rows, tables offer us little in the way of the design potential we require to improve the comprehension of the data they contain.
A brave new world – “HTML5” charts
Until quite recently most online charting tools dynamically created static graphics using the<img> tag which you could embed on your web page. With the advent of HTML5 however, we now have a couple of alternative technologies available which allow us to create richer, more interactive charts which take us beyond the limits of static graphics and images. Perhaps the most popular are HTML5 canvas and SVG (Scalable Vector Graphics).
<canvas> charts- According to the Mozilla Developer network, HTML5 canvas is an HTML element which can be used to draw graphics using scripting. Canvas is fast and unlike a static images can be dynamically redrawn in- page using scripting. This makes it useful for quickly generating chart visualisations from HTML tables and with clever scripting can even allow some basic interactivity.
SVG charts – a prefered solution- While Canvas does an excellent job of rendering dynamic charts, its main drawback is that it is a pixel- based graphics API. With Canvas you can’t attach event handlers or manipulated existing objects. Once it’s drawn it’s drawn. An alternative technology is SVG. Whilst not strictly part of the HTML5 spec, it offers several advantages over Canvas for charting on the web.
The Google Charts API- Google maintains and develops a fully featured charting library called the Google Charts API. It’s extremely powerful and being Google, well supported and documented. All in all, it’s an excellent choice for charting on the web. While the original version relied on images, the improved API now utilises the power of HTML5 and SVG to render a range of dynamic charts which are customisable and allow complex interactivity.
If you more quires contact us