gRaphael Line Chart With Grid & Popup Tags

I've been learning a few different data viz applications and am learning a bit about what they are each capable of.

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. 

You may be wondering why I did not do a set with the white graphic and the line chart -- or simply make the background of the chart white. The problem is the grid. As I mention above, I had to try to sandwich the grid between the line chart and the background. For some reason, the z-index settings seem to not be working and I need to try to get it to sit just behind the orange line. They block access to the tags. 

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.