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?
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
