vAxis and hAxis data cannot be shown after the second chart in IE9/10

[Chan Tai Man]

I have created a php containing 4-5 line charts. Everything works fine in all browsers except in IE, in which the data of vAxis and hAxis cannot be shown after the 2nd chart. However, the tooltip can display the hAxis and vAxis data correctly, even in the charts with no axis data.

the arrays I passed to google.visualization.arrayToDataTable() are of the same format and is exactly same as that in Google examples.

Here is my scripts to create the charts.

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

google.setOnLoadCallback(drawChart);

var start = "<?php echo $dataRange[1]; ?>";

var end = "<?php echo $dataRange[$NumRecords]; ?>";

var isA2Set = parseInt("<?php echo $A2Set; ?>");

function drawChart() {

if(isA2Set == 1){

var tmp2 = <?php echo json_encode($A2); ?>;

var data2 = google.visualization.arrayToDataTable(tmp2);

var options2 = {

chartArea: {left:60, width: 700},

hAxis: {gridlines: {count: -1}, title: 'Date Range', titleTextStyle: {color: '#000066', fontSize: 16}},

pointSize: 6,

title: 'Asiasat 2 Utilization From ' + start + ' To ' + end,

titleTextStyle: {color: 'black', fontName: 'Arial', fontSize: 20},

vAxis: {fontName: 'Calibri (Body)', fontSize: 16, gridlines: {count:6}, maxValue:100, minValue:0, title: 'Bandwidth usage in %', titleTextStyle: {color: '#000066', fontSize: 20}}

};

}

var tmp3S = <?php echo json_encode($A3S); ?>;

var data3S = google.visualization.arrayToDataTable(tmp3S);

var options3S = {

chartArea: {left:60, width: 700},

hAxis: {gridlines: {count: -1}, title: 'Date Range', titleTextStyle: {color: '#000066', fontSize: 16}},

pointSize: 6,

title: 'Asiasat 3S Utilization From ' + start + ' To ' + end,

titleTextStyle: {color: 'black', fontName: 'Arial', fontSize: 20},

vAxis: {fontName: 'Calibri (Body)', fontSize: 16, gridlines: {count:6}, maxValue:100, minValue:0, title: 'Bandwidth usage in %', titleTextStyle: {color: '#000066', fontSize: 20}}

};

var tmp4 = <?php echo json_encode($A4); ?>;

var data4 = google.visualization.arrayToDataTable(tmp4);

var options4 = {

chartArea: {left:60, width: 700},

hAxis: {gridlines: {count: -1}, title: 'Date Range', titleTextStyle: {color: '#000066', fontSize: 16}},

pointSize: 6,

title: 'Asiasat 4 Utilization From ' + start + ' To ' + end,

titleTextStyle: {color: 'black', fontName: 'Arial', fontSize: 20},

vAxis: {fontName: 'Calibri (Body)', fontSize: 16, gridlines: {count:6}, maxValue:100, minValue:0, title: 'Bandwidth usage in %', titleTextStyle: {color: '#000066', fontSize: 20}}

};

var tmp5 = <?php echo json_encode($A5); ?>;

var data5 = google.visualization.arrayToDataTable(tmp5);

var options5 = {

chartArea: {left:60, width: 700},

hAxis: {gridlines: {count: -1}, title: 'Date Range', titleTextStyle: {color: '#000066', fontSize: 16}},

pointSize: 6,

title: 'Asiasat 5 Utilization From ' + start + ' To ' + end,

titleTextStyle: {color: 'black', fontName: 'Arial', fontSize: 20},

vAxis: {fontName: 'Calibri (Body)', fontSize: 16, gridlines: {count:6}, maxValue:100, minValue:0, title: 'Bandwidth usage in %', titleTextStyle: {color: '#000066', fontSize: 20}}

};

var tmp7 = <?php echo json_encode($A7); ?>;

var data7 = google.visualization.arrayToDataTable(tmp7);

var options7 = {

chartArea: {left:60, width: 700},

hAxis: {gridlines: {count: -1}, title: 'Date Range', titleTextStyle: {color: '#000066', fontSize: 16}},

pointSize: 6,

title: 'Asiasat 7 Utilization From ' + start + ' To ' + end,

titleTextStyle: {color: 'black', fontName: 'Arial', fontSize: 20},

vAxis: {fontName: 'Calibri (Body)', fontSize: 16, gridlines: {count:6}, maxValue:100, minValue:0, title: 'Bandwidth usage in %', titleTextStyle: {color: '#000066', fontSize: 20}}

};

if(isA2Set == 1){

var chart2 = new google.visualization.LineChart(document.getElementById('chart_A2'));

chart2.draw(data2, options2);

}

var chart3S = new google.visualization.LineChart(document.getElementById('chart_A3S'));

chart3S.draw(data3S, options3S);

var chart4 = new google.visualization.LineChart(document.getElementById('chart_A4'));

chart4.draw(data4, options4);

var chart5 = new google.visualization.LineChart(document.getElementById('chart_A5'));

chart5.draw(data5, options5);

var chart7 = new google.visualization.LineChart(document.getElementById('chart_A7'));

chart7.draw(data7, options7);

}

I have tried to create the charts in a separate function but it did not work. And I must display all these charts in a page and they will only use IE.

All the arrays get the correct data.

Can anyone help?

[asgallant]

I don't see anything wrong in your javascript.  I copied it into a jsfiddle, made a substitute data set, and tested it; it works just fine in IE: http://jsfiddle.net/asgallant/H5YfE/.  When the axis labels are not visible, that is usually due to one of two things: either the API isn't being loaded properly (which is not the case here), or the charts are being drawn in hidden divs.

[Chan Tai Man]

Thanks dude.

So there should be something wrong in the html tags.

[asgallant]

It could be HTML, it could be CSS, it could be javascript if you have scripts that modify the CSS on elements - this is the case when you have tabs on your page (as one example).

[asgallant]

If you post your full page code or a link to the page, I will take a look and see what might be causing it.

[Chan Tai Man]

Thanks for your help.

I finally figured out what happened.

Everything went right after using <table> to enclose the <div> tab.

Very weird, this only happens in IE but not in firefox, chrome and safrai

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/M2w6TCCvqkk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.