I'm using XMLHttpRequest to pull back another page that does a lot of
PHP/SQL work, and then dumps a table of data with a Google Interactive
Column Chart above it.
When I look at the page directly it looks fine, but when I try to pull
back the page with XMLHttpRequest and put it in the <div> the Column
Chart is the only thing that doesn't show.
Am I missing something? Do I need to add some javascript to my main
page to make it display?
This is the code that does the XMLHttpRequest:
<script type="text/javascript">
function genreport(form) {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
for (i=0; i < document.reportform.reportradio.length; i++) {
if (document.reportform.reportradio[i].checked == true) {
var reportnum = i;
}
}
document.getElementById('results').innerHTML = '<table border="0"
cellspacing="1" cellpadding="0" align="center" width="700"><tr><td
align="center">Generating Report...</td></tr></table>';
xmlhttp.open("GET", "sn_get_report.php?reportnum=" + reportnum,
true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.responseText.length > 0) {
var results = xmlhttp.responseText
document.getElementById('results').innerHTML =
results;
}else{
document.getElementById('results').innerHTML =
"Error! No results
found.";
}
}
}
xmlhttp.send();
}
And this is my PHP/SQL/Chart code:
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["columnchart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Application');
data.addColumn('number', 'Opened');
data.addColumn('number', 'Closed');
data.addRows(<?php echo $loop; ?>);
<?php
$loop = 0;
while (current($array)) {
echo "data.setValue(" . $loop . ", 0, '" . $array[$loop]["app"]
.
"');";
echo "data.setValue(" . $loop . ", 1, " .
$array[$loop]["opened"] .
");";
echo "data.setValue(" . $loop . ", 2, " .
$array[$loop]["closed"] .
");";
next($array);
$loop++;
}
?>
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 1000, height: 400, is3D: true, title: 'Today
\'s Tickets'});
}
</script>
<table border="1" cellspacing="1" cellpadding="0" align="center"
width="600">
<tr>
<td colspan="3"><div id="chart_div"></div></td>
</tr>
<tr>
<td colspan="3" class="heading" align="center">Currently Indexed
Ticket Data - From Jan 1st, 2009</td>
</tr>
<tr>
<td colspan="1" class="bold12pt" align="left" width="400">Ticket
Types</td>
<td colspan="1" class="bold12pt" align="left" width="100">Ticket
opened</td>
<td colspan="1" class="bold12pt" align="left" width="100">Ticket
closed</td>
</tr>
Thanks very much in advance, I really appreciate any help!
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
