11

I need to choose a library for "standard" charting: pies, lines and bars.

From what I've read, it seems to me that the best format is SVG/VML, like Highcharts for example. SVG is becoming standard across all major browsers, now that IE 9 accepts it. It seems easier to rescale and export than Canvas.

Still, I see that several charting libraries rely on Canvas. Am I missing something? Is there any reason for considering Canvas over SVG for such applications?

casperOne
  • 73,706
  • 19
  • 184
  • 253
Christophe
  • 27,383
  • 28
  • 97
  • 140
  • Your subject has the word "better" in it, which is a clear indicator that your on track to get closed as a subjective question. Further, worse, you don't actually specify what your criteria are for measuring 'better'. Accessible by the most browsers? Accessible by the most users? Fastest to render a similar result? Least amount of memory used? Easiest to script interactivity with? Data crawlable by search engines? – Phrogz May 09 '11 at 21:30
  • I wish I knew the criteria in the first place... For example search engines are a good one I didn't even think about. – Christophe May 09 '11 at 23:48

3 Answers3

8

You can generally achieve the same results with either. Both end up drawing pixels to the screen for the user. The major differentiators are that HTML5 Canvas gives you pixel-level control over the results (both reading and writing), while SVG is a retained-mode graphics API that makes it very easy to handle events or manipulate the artwork with JavaScript or SMIL Animation and have all redrawing taken care of for you.

In general, I'd suggest using HTML5 Canvas if you:

  • need pixel-level control over effects (e.g. blurring or blending)
  • have a very large number of data points that will be presented once (and perhaps panned), but are otherwise static

Use SVG if you:

  • want complex objects drawn on the screen to be associated with events (e.g. move over a data point to see a tooltip)
  • want the result to print well at high resolution
  • need to animate the shapes of various graph parts independently
  • will be including text in your output that you want to be indexed by search engines
  • want to use XML and/or XSLT to produce the output
Phrogz
  • 296,393
  • 112
  • 651
  • 745
5

Canvas isn't needed unless you want heavy manipulation/animation or are going to have 10,000+ charts. More on performance analysis here.

It is also important to make the distinction: Charting and diagramming are two different things. Displaying a few bar charts is very different from (for instance) making diagramming flowcharts with 10,000+ movable, link-able, potentially-animated objects.

Every SVG element is a DOM element, and adding 10,000 or 100,000 nodes to the DOM causes incredible slowdown. But adding that many elements to Canvas is entirely doable, and can be quite fast.

In case it may have confused you: RaphaelJS (in my opinion the best charting SVG Library) makes use of the word canvas, but that is no way related to the HTML <canvas> element.

Community
  • 1
  • 1
Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
0

In the past two years, my preference has been to use svg, as I mainly deal with relatively small datasets to build pies, column charts or maps.

However one advantage I have found with canvas is the ability to save the chart as an image thanks to the toDataURL method. I haven't found an equivalent for svg, and it seems that the best way to save an svg chart client side is to convert it to canvas first (using for example canvg).

Christophe
  • 27,383
  • 28
  • 97
  • 140