Here are some of basics things which can help you fix some small bugs related to Google Chart API..
1. Structure of google chart: Google chart has different structure in IE<9 from all other browsers. While in IE<9 uses VML all other browsers use SVG format to draw charts.
But why should we be concerned about the structure of it ?
Because, it can be used when we want to use jQuery selector to fire some events . For example, to change the cursor onmouseover in chart ,the selectors should be different for IE<9 and other browser.
2. Disable Iframe in google chart: By default google chart is always present inside a IFrame. There is no option to disable this iframe for IE<9 and in other browser it can done by using the option forceIFrame: false. This feature has not been documented in the google chart api reference.
But, why should we disable a iframe ?
First: Some of the events doesn’t work when the iframe is present.
Example : onmouseover event to change the cursor.
Second : They consume a lot of white space all around the chart, making the space unusable.
3. Never draw google chart in hidden divs: Suppose we want to draw some hidden charts and have some links which when clicked shows the respective chart. We have two options, to draw chart in hidden divs or to hide the divs after the chart has been drawn (or fetched) .
In first option chart is drawn in hidden divs and un-hide when clicked on the link (using .show()). But it has some problem with it. When drawn in hidden divs the text(% or number or text) (or slicetext for pie chart) written inside the chart will not be visible for IE<9.
To avoid it, always draw chart in divs without hidding them and after the chart is drawn hide them. But, how ? By using ready event in google chart listners . It is fired when the chart is completely drawn.