SVG graphs on

When we launched 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!

This entry was posted in plotting, user interface. Bookmark the permalink.

7 Responses to SVG graphs on

  1. Peter says:

    Hi Dan,

    did you already have a look at JSXGraph?
    It’s a pretty small and simple to use JavaScript library that supports drawing of graphs.
    These graphs are created with SVG, in good browsers, and VML, in IE, and even runs on iPhones/iPads. Recently we did implement multitouch in there, so there should be no feature lacking. If so, do write us a mail ;-)

    If you do have question, don’t hesitate to mail me!

    Best Regards!

    PS: This post is without any links to avoid any spamfilter. If you do want to read more, just query google with: jsxgraph and/or: jsxgraph category:examples

  2. Nice. Is there a plan to get feature parity with the Flash version? Specifically I was thinking of the coordinates-of-interest, the cross-hairs and the hover-tips that show up in vs

    • Dan Wilson says:

      Yup, absolutely.

      The plan is to get closer to parity then serve SVG by default to most of our users (not yet sure about IE).

  3. First of all, thank you for choosing Raphaël.
    But you surprise me. gRaphaël able to draw all your charts with ease and have interactivity and support multitouch. So you didn’t have time to dig into library, but have time to write your own implementation. :)

    • Dan Wilson says:

      Hey Dmitry,

      Actually, I did dig into gRaphaël — the big issue for me is that it requires multiple datasets to be in the form [x, y1, y2, y3] while I need [(x1, y1), (x2, y2), (x3, y3)]. I prefer the Flot API, which allows me to do this, as well as their attention to detail on things like axis label placement. The Flot code is also significantly easier to read than that of gRaphaël.

      Finally, there’s the uncertainty over your move to Sencha — I haven’t seen you comment on it, despite being asked on the mailing list, and gRaphaël wasn’t mentioned in the press release. What does the future look like for Raphaël and gRaphaël?


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">