Here is an example of a line chart I had to build in Raphael, using the gRaphael library. Why Raphael?
- It's fairly light weight & makes it easier to render SVG objects without drawing them by hand.
- It is backward compatible to IE 8. The company I'm working for has clients that are slow to update to the most current browsers, so backwards compatibility is required.
Some drawbacks:
- It is really poorly documented.
- You can not control the style of the axes or placement of the labels. The labels in my example are simply divs that are placed using css.
- You can not easily do grids. This is kind of a joke. The grid in my chart is actually a table inside a div that has the borders turned on. There are several divs in this chart, and they are stacked on the z-index to create a hierarchy. The white square is at -10, the grid is at 0, and the line chart itself is at 10.
The popup tags are set by x & y coordinates, but are populated with yet a third data set.
I'll post an updated solution later. In the meantime, I'm going to look for a libraary that does exactly what we need it to so we don't have to do all the klugy workarounds.
