Raphael are a very powerful charting javascript you may want to use with your applications. Raphael uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. G Raphael is a more powerful charting tool that is based on Raphael. Recently I have been using G Raphael to create a pie chart.
However, recently I experienced a problem with using this pie chart. If I render directly when the page loads, then the chart is working fine. However, when I use jquery facebox, and render the pie chart when a link is clicked, the legend lines are stacked together! Here is a screen shot, so you know what I am talking about:
After quite some time’s investigation, I finally found out that if you are render the chart in a hidden div. Then show the chart. The lines will be stacked. When you use facebox, the div is for the facebox is hidden initially. When the link is clicked, the partial is rendered and inside this partial the Raphael javascript executes and generate the charts. Then the facebox is shown. Somehow, the Raphael not sure how to calculate the position of the legend text, when the container is hidden initially.
So the solution is to render the facebox partial first, after the facebox is shown, then you execute the Raphael javascript. In other word, make sure you generate the chart when the chart container is there and not hidden!
Another problem that I experienced with using Raphael is that in IE 7/6, the chart sometimes only shows a top part of it. That is to say, the raphale chart only shows half of the title and the whole chart is not shown. However, in IE8 it is ok. The reason is that in IE7/6, the raphael chart is not able to calculate the total height of the chart wrongly if you didn’t specify the height of the container. So it is always safe to specify the height of the container.
name=”code” class=”html”
