Question

I’m sure I’m just being dim, but what’s the difference between Raphael and gRaphael?

I can’t tell from reading their homepages (the gRaphael homepage just says “based on Raphaël graphics library”), and Google isn’t helping either.

Answer 1

Raphaël is a vector-graphics library, used to manipulate vector-graphics markup (SVG/VML) rendered in a an HTML page. Using this you can create and add SVG/VML elements to the DOM and further manipulate elements inside it.

gRaphaël is an extension to Raphaël adding graphs to Raphaël’s concept of Paper. Think *Graph*aël. So gRaphaël works only if Raphaël is loaded, and uses it in drawing the actual graphs. gRaphaël can be used for creating charts in SVG and currently supports chart types like line, bar, pie, and dot.

If you don’t want to make any of these chart types you should just use Raphaël directly to draw whatever it is you are designing. In some cases, like defining colors, stroke attributes and putting some overlayed items on your chart such as title text, you will need to learn a little of Raphaël’s api to use gRaphaël effectively. You’ll find documentation for the former better written and poured over by more people than that of the latter. They are both by the same author however, likely gRaphaël was a demonstration of the base library, which it seems was aimed at simplifying programatic use of SVG.

If you’re only interested in drawing SVG charts and graphs, you might also be interested in Google’s Chart Tools.