Generally, you don't want to be dynamically loading Javascript using
Ajax and then injecting it into your page. Aside from the potential
security vulnerabilities, this is generally unnecessary and I'm not
even sure that it will work.
Instead, move all of your javascript into your main page and just load
the DATA using XMLHttpRequest (instead of executable code). For
example, on the server side, write something like the following:
<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
echo "<chart>";
$loop = 0;
while (current($array)) {
echo "<value>";
echo "<app>" . $array[$loop]["app"] . "</app>";
echo "<opened>" . $array[$loop]["opened"] . "</opened>";
echo "<closed>" . $array[$loop]["closed"] . "</closed>";
echo "</value>";
next($array);
$loop++;
}
echo "</chart>";
?>
Then, on your main page, do something like the following:
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["columnchart"]});
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=drawChart();
xmlhttp.send();
}
function drawChart() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.responseText.length > 0) {
var xmlDoc = request.responseXML;
var valueElements = xmlDoc.getElementsByTagName("value");
var data = new google.visualization.DataTable();
data.addColumn('string', 'Application');
data.addColumn('number', 'Opened');
data.addColumn('number', 'Closed');
data.addRows(valueElements.length);
for (var x=0; x<valueElements.length; x++) {
var app = valueElements[x].childNodes[0].value;
var opened = valueElements[x].childNodes[1].value;
var closed = valueElements[x].childNodes[2].value;
data.setValue(x, 0, app);
data.setValue(x, 1, opened);
data.setValue(x, 2, closed);
}
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 1000, height: 400, is3D: true, title:
'Today \'s Tickets'});
}
}
}
</script>
Note that I haven't tested any of the code above, so it may be full of
bugs.
On Mar 27, 7:50 pm, Slowfib <[email protected]> wrote:
> 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.
