Pie Chart Tooltips Mislabeled in IE8 only

[Jared Usrey]

You can view the implementation here: http://beyondlitter.com/#budget

In IE8, 3 of the 7 slices of the pie chart are being mislabeled and
colored incorrectly.

It was happening in IE9 as well but when I used a double quote around
passed strings "'value'" it resolved the problem.

I have attached the initialization code at the bottom of this list.

Also, One IE8 machine works as long as compatability view is
turned off, while another machine (running IE8 as well) mislabels w/
Comp. View turned off and when it is turned on

----Initialization Code below ---
var data = new google.visualization.DataTable();
data.addColumn('string', 'Function');
data.addColumn('number', 'Importance');
data.addRows(7);
data.setValue(0, 0, "'Litter Control'");
data.setValue(0, 1, 80);
data.setValue(1, 0, "'Safety'");
data.setValue(1, 1, 35);
data.setValue(2, 0, "'Landscaping'");
data.setValue(2, 1, 42);
data.setValue(3, 0, "'Hospitality'");
data.setValue(3, 1, 52);
data.setValue(4, 0, "'Outreach'");
data.setValue(4, 1, 65);
data.setValue(5, 0, "'Technology'");
data.setValue(5, 1, 25);
data.setValue(6, 0, "'Cleaning'");
data.setValue(6, 1, 20);
var options = {
slices: [
{color: '#71BF44'},
{color: '#66CCFF'},
{color: '#FF6600'},
{color: '#660099'},
{color: '#0066B3'},
{color: '#EE1651'},
{color: '#FFCB08'} ] ,
legend: 'none',
pieSliceText: 'none',
tooltip: {
text: "'percentage'",
textStyle: { fontSize: 18} },
height: 250, width: 250,
chartArea: {
width: 230,
height: 230} };


wrapper = new google.visualization.ChartWrapper( { chartType:
'PieChart', containerId: 'visualization' , options: options } );
wrapper.setDataTable(data);
google.visualization.events.addListener(wrapper, 'ready',
readyHandler);
ready = false;
wrapper.draw();

[Jared Usrey]

I believe that it would be most accurate to say that the wrong tooltip is associated with the wrong pie chart slice ... but only for three of the slices (in the middle). The first two are labeled correctly and the final two are labeled correctly.

[asgallant]

That is present in all browsers, because you entered your rows into the DataTable differently than you did the control bars (ie, your middle three control bars are, in order, "Outreach", "Landscaping", "Hospitality"; but your DataTable has them ordered  "Landscaping", "Hospitality",  "Outreach").  Everything looks correct except your labels.

[Jared Usrey]

Actually ... Since we needed an immediate fix ... 

I caused all browsers to have the same problem 

and then updated the label graphic for the sliders to match the flawed implementation.

I know its bass-ackwards but it looks right to the non-developer!

[asgallant]

Do you have a prior version that was correct in Chrome and wrong in IE8 that I could test?

[Jared Usrey]

Yes .... I will attempt to upload it to a test server tonight ... Thanks for the willingness to help!