That helped me out a lot, thanks! Here's what I ended up with:
<script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script type="text/javascript"> google.load("visualization", "1", {packages:["columnchart"]}); google.load("visualization", "1", {packages:["table"]}); 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('chart_div').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) { var xmlDoc = xmlhttp.responseXML genChart(xmlDoc) genTable(xmlDoc) } } xmlhttp.send(); } function genChart(xmlDoc) { var data = new google.visualization.DataTable(); var valueElements = xmlDoc.getElementsByTagName("value"); 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].childNodes[0].nodeValue; var opened = valueElements[x].childNodes[1].childNodes[0].nodeValue; var closed = valueElements[x].childNodes[2].childNodes[0].nodeValue; data.setValue(x, 0, app); data.setValue(x, 1, parseFloat(opened)); data.setValue(x, 2, parseFloat(closed)); } var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, {width: 1000, height: 400, is3D: true, title: 'Today \'s Tickets'}); } function genTable(xmlDoc) { var data = new google.visualization.DataTable(); var valueElements = xmlDoc.getElementsByTagName("value"); data.addColumn('string', 'Application'); data.addColumn('number', 'Opened today'); data.addColumn('number', 'Closed today'); data.addRows(valueElements.length); for (var x=0; x<valueElements.length; x++) { var app = valueElements[x].childNodes[0].childNodes[0].nodeValue; var opened = valueElements[x].childNodes[1].childNodes[0].nodeValue; var closed = valueElements[x].childNodes[2].childNodes[0].nodeValue; data.setCell(x, 0, app); data.setCell(x, 1, parseFloat(opened)); data.setCell(x, 2, parseFloat(closed)); } var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {width: 500, sortColumn: 0}); } </script> On Mar 27, 11:03 pm, Geoff Denning <[email protected]> wrote: > 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.
