Google Column Chart is not working in IE8

[Hari K D]

Hi, 

I have developed a web application in MVC 3 whcih contains jQuery UI tab control. I added a column chart control in one of the tabs, where the chart is displayed without any issue, but the X and Y axis is not visible in IE8. The same code works fine in Chrome. I even tried the same code in a separate HTML file and that too is working fine.

I have already implemented pie, bar and column charts in my other applications they all worked fine. But here I am not able to find the problem. When I see the generated html through IE developer tools, the code for the X and Y axis is there. Only thing is, its not visible in the browser. I also tried changing the Browser mode and Document mode in developer tool bar, still not working.

Thanks,

Hari K D

[asgallant]

This has to do with drawing the chart in a hidden div.  You must make sure the div is visible before calling the chart's draw function.  There are two ways you can do this: 1) set up the tab code to run in a "ready" event handler for the chart (which can get complicated if you have multiple charts in the tabs), or 2) draw each chart when its containing tab is opened for the first time.

[Hari K D]

Hi, The div is not hidden.

1) I didn't clearly understand your first option in the answer, I have only one chart in my page, and I am loading the tab in $(document).ready function, and then loading the chart. 

2) As I already mentioned, I am loading only one chart in the particular tab and also in the entire page

[asgallant]

Is the chart in the tab that is open by default on the page (ie, what you see when you first load the page)?  If not, then the div is hidden.

[Hari K D]

Yes, the chart is opened by default.

[Hari K D]

I have attached a sample html file with Column chart in tab control. If you see the attached example, chart is loaded correctly, only in the first tab, chart's in second and third tab's are not properly loaded. If you see the div's are not hidden.

[Daniel LaLiberte]

Hari,

Although I believe I know what Drew is suggesting (about rendering when the chart is not displayed), and he has good reason to suspect that might be the cause of the problem, one reason to doubt this explanation, along with your evidence to the contrary, is that you say it applies only to IE8, and not Chrome.  Also, it sounds like you are saying it happens only with the jQuery UI tab control and not when you set up the display of the chart in separate HTML.  It is still possible that the problem is caused by a combination of the use of the jQuery UI tab control with IE8, but there might be some very different explanation.

I think we will need more evidence of what is happening before we can figure out how to fix or workaround the problem.  If you are unable to provide a working demonstration of the problem that we can look at and try (and you may have perfectly good reasons for that), you will probably have to work it out mostly on your own, with our groping suggestions for what you might try next, which could take a long time.

One thing I would try is a few more browsers.  Firefox and Safari are good candidates.  Also, if you can use the IE debugger and stop execution just before the chart is drawn, that should show whether the container div is visible at that time.

dan

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/JZryy8vkOwMJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   562D 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[asgallant]

The problem is present in Chrome, but the effect is much more subtle.  Open in Chrome and then look at the left axes, the alignment of the numbers is different in tabs 2 and 3.  I'll take a look at the source code and see if I can build an example script that fixes the problem.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   562D 5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[asgallant]

Also, if you use Chrome's element inspector, you will see that tabs 2 and 3 both have "display: none" set in their style attributes when the page is first opened.

[asgallant]

Here's a version that fixes the axes, but still has artifacts on the chart in tab 3.  I'm not sure why that is, but I'll keep digging.

[asgallant]

You can ignore the last one, as it turns out my other approach solves all problems.  If you draw the charts only when their tabs are opened for the first time, you everything draws properly with no artifacts.  See it working here: http://jsfiddle.net/asgallant/tWTfA/2/

[Hari K D]

asgallant, the fix is working fine. Thanks for helping me in solving this issue.

I have one more doubt. How to set the vertical axis [Y - Axis] for the chart. I tried but coudn't find a way.

[asgallant]

What is it that you want to set for the axis?

[Hari K D]

Vertical line at the left of the chart, and I also cant set vertical grid lines.

[asgallant]

You may or may not be able to get the baseline you want or the vertical gridlines, depending on the type of x-axis you have.  If you have a numeric, date, or datetime axis, then gridlines and a baseline are both supported.  If your x-axis is string type, then they are not supported.