SVG graphs on timetric.com

When we launched timetric.com a little over a year ago, we needed a visualization solution so people could see our lovely data. We looked around, and decided that for performance and cross-browser compatibility, we’d create our own Flash widget based on the Flex Data Visualization Components. This served us well, and will continue to do so for some time, but the times they are a-changing.

Today’s browser landscape looks quite different. Javascript performance his improved significantly, and IE6′s market share has halved. More significantly, there are a lot of browsers out there that aren’t even Flash-capable. Hello, Apple!

I’ll go into the techie details below, but the short version is this: if you used to see a big blank space in the middle of the page on Timetric, you’ll probably now see an attractive, interactive graph; if you’re used to seeing a “Loading…” indicator then a Flash graph you’ll probably still see that. However, if you’re feeling adventurous you can try adding ‘?noflash’ to the end of the URL and you’ll get the cool new thing everyone’s raving about.

Timetric's SVG graphing from an iPad

Techie Bits

We were looking for a plotting solution which matched the following criteria:

• Standards compliant
• Fast & light-weight
• Cross-browser
• Interactive (to both mouse events and touch)
• Attractive

SVG vs. Canvas

This first criterion means that the choice is really between SVG and Canvas. The former is a true vector format, expressed in XML, and with nodes which can be manipulated via the DOM. The latter is essentially a scriptable bitmap image, which is often more efficient, but manipulation and interactivity aren’t what it’s good at. So which should we use?

When assessing the two technologies we need to consider three classes of browsers. The first are the modern, standards-compliant desktop browsers (Firefox, Chrome, Safari, Opera and hopefully soon IE9). The second include all shipping versions of Internet Explorer. The third group are new-fangled touch-based devices like Apple’s iPhone and iPad.

The first group is the easiest and least interesting: both SVG and canvas just work.

Visitors using IE make up around 38% of our userbase, yet they don’t support either of these technologies. Luckily, they do support Microsoft’s version of SVG, called VML. The excanvas library can be used to emulate the canvas element, and the actual drawing is done in VML. Alternatively, the excellent Raphaël library provides a vector drawing API which will output SVG to browsers that support it, and VML to IE. Take-home message: both can be made to work, but since either will result in VML nodes in IE’s DOM, it’s better to use the method that’ll take full advantage of that, namely SVG.

The touch-based devices provided the knock-out blow I was looking for. When you’re using the browser on your iPhone or iPad you’re generally looking at the page at an arbitrary zoom level. Bitmaps look pretty bad at arbitrary zoom levels, while vector graphics look clean and sharp.

Vector vs. bitmap graphics at arbitrary zoom level

That was rather a long-winded way of saying that SVG is better at drawing vector-y things like graphs.

Charting Frameworks

Having made the decision to use SVG via Raphaël, I took a look at gRaphaël. Sadly, the project seems rather immature, isn’t that well supported (only one commit in the last 9 months), and has no documentation. Since we’re heavy users of jQuery, what I really wanted was a version of the awesome Flot plotting library which could output SVG instead of Canvas.

Nothing like that seemed to exist, so I set about replacing Flot’s drawing code with Raphaël calls. The result I’m calling Raphlot, and it’s available on GitHub under the same MIT license as Flot. Not all of Flot’s functionality has been translated, but enough for it to be useful on Timetric.

I’ve made a start on the interactivity, which you can try on Timetric, but I’ll write about that in a future blog post.

What do you think? Leave your comments below!