Chart not showing in IE8 / IE9 but fine in Chrome

[Ciprian Ilie]

Hi,

I have a very basic line chart which works fine in Chrome, but now displaying in IE8 or IE9; what is the most likely cause? Where do I start?

Thank you,

Ciprian

[asgallant]

At a guess, I would have to say it is one of three things:

1) you loaded the API improperly/do not wait for it to finish loading before drawing charts

2) you are drawing charts in hidden divs

3) there is an errant comma in an array or object somewhere in your code

These are the usual causes for charts not drawing in IE.  If you can post your code or a link to the page, we can help more.

[Oliver Kilk]

I have the same problem.
URL: http://www.liiter.ee/beta/uus/index_beta.html

Any ideas?

[asgallant]

You have two errant commas, the first is at the end of the last row in the data.addRows(...) call and the second is at the end of the last row in your options object.  IE doesn't like them.

[NA]

Viewing this page:

  http://www.liiter.ee/beta/uus/index_beta.html

Running IE8 Standards mode, I get this error:

  Line: 53
  Error: Every row given must be either null or an array.

Is the problem that you have a comma after the last element in your addRows statement?

It worked fine for me in IE9.

What errors do you see in IE8/9?  You can use the the debugger to show the errors if you aren't seeing them - press F12 in IE to get it started.  You can also toggle on/off "Start Debugging" to track things down.  Though in this case, it just pointed to your data.addRows line, which looked fine to me other than the comma...

[Nikhil Agrawal]

HI Asgallent,

I have the 2nd problem as mentioned by you. i am drawing it in hidden divs with a link which when clicked displays the chart.

The chart is displayed but the text(%) written inside it is not displayed . 

Any solutions ?

[asgallant]

There are two ways to fix the problem:

1) Create a "ready" event listener for each chart drawn in a hidden div that hides the div when the chart is done drawing.  Right before you draw the chart, unhide the div.  When it is done, the div will hide, and under most circumstances the user will never know the difference.

2) Hook up an event listener on the link that unhides the div and calls the chart's #draw method.

Here's an example with both: http://jsfiddle.net/asgallant/8yZjP/