Chart Text Cut Off In IE9 only

[meubige]

I am having an IE 9 specific bug with my charts. Text in tooltips,
chart labels, pie slices, legends and tooltips gets cut off from the
bottom in IE 9 only. This has not been a problem in IE7, IE8, FF3,
FF4, and Chrome in Windows 7 (64bit).

I am using the corechart package like so:

google.load("visualization", "1", {packages:["corechart"]});

and drawing a chart like this:

var chart = new google.visualization.ColumnChart(usr_chart[0]);
chart.draw(data, options);

var data = new google.visualization.DataTable();
data.addColumn('string', 'Conference');
data.addColumn('number', 'Kbps Used');
data.addRows(this.usg_data);

var options = {
width: 350,
height: 200,
fontName: "Arial",
tooltip: {text:'value' },
backgroundColor:'black',
pieSliceText: 'percent',
pieSliceTextStyle: {color: 'white', fontSize: 10},
legend: {position: 'right', textStyle: {color: 'white', fontSize:
12}}
};

var chart = new google.visualization.PieChart(usg_chart[0]);
chart.draw(data, options);

I get text cut off in IE9 alone like this:

http://dl.dropbox.com/u/535060/ie9.PNG
http://dl.dropbox.com/u/535060/bar.PNG
http://dl.dropbox.com/u/535060/tooltip.PNG

I've tried using different fonts/font sizes but nothing has helped...

Any ideas?

[ChartALot]

Thank you for reporting, we will look into it.

As a workaround, one variable that may help with IE is forcing the browser into different compatibility modes. I'm not an expert on this, but you may want to search for "ie9 force compatibility mode".

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
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.

[meubige]

Thanks for your reply. The problem persists through compatibility mode
being turned on or off. I already force compatibility mode and it
doesn't fix the problem.

Check this out. If you just take the demo chart code and view it in
IE9 you get text being cut off:

http://dl.dropbox.com/u/535060/test1.html
http://dl.dropbox.com/u/535060/test2.html

That code has just been copy and pasted from here: http://code.google.com/apis/chart/

This looks to be a general rendering issue with the Google
Visualization API in IE9. Can you confirm this?

[asgallant]

I didn't see the problem in IE9 with the sample scripts you posted, but when I edited one and changed the background color and text color, I did see the cutoff.

[meubige]

Ok, so I narrowed down the problem(serious text rendering isues) quite a bit. 

The problem exists when viewing any Google Visualization API chart in:

-Internet Explorer 9 64 BIT EDITION

-Browser Mode: IE9

-Document Mode: Quirks (requirement for the framework I'm working in)

-Doesn't matter compatibility mode on or off

I have been inadvertently testing in IE9 using the 64 bit edition of the program rather than the default 32 bit version. I've just found out from here:

http://blogs.msdn.com/b/ieinternals/archive/2009/05/29/q-a-64-bit-internet-explorer.aspx

and another forum that:

- The 64bit IE9 install always also includes the 32bit version.
- The 32bit IE9 version is made the default-browser on IE9 install/update.
- The 64bit version if IE9 is MUCH SLOWER than the 32bit version.
- The 64bit version is not recommended to use, it exists for technical reasons.

So this is clearly more of a problem on Microsoft's part that they released a version of IE9 that's "not recommended for use". Why would you let me install something that I'm not supposed to use??

Anyways, charts look fine in the Windows 7 default browser (IE9 32bit) in quirks mode and that's good enough for me. But seriously Microsoft, wtf? 

Hopefully by writing this I will save someone else the stupid amount of time spent troubleshooting this problem.

[De Ontwikkelfabriek]

Had the same problem, saw that the document was missing a doctype

Adding <!DOCTYPE html> fixed my problem.

Op vrijdag 30 december 2011 18:29:53 UTC+1 schreef meubige het volgende:

[Samuel Sarmento]

Fixed mine too, it's faster and properly rendering fonts.