My chart displays in the Playground but not my website
19 views
Skip to first unread message
harleyhar
Oct 3, 2011, 1:49:06 PM10/3/11
to Google Visualization API
Hi,
I need some help on getting my javascript to display the chart a div
after making an AJAX call.
The javascript is created and written to a file. I have tested the
javascript by creating a static html page with it that shows the
result that I am looking for. However when I try to populate it with
AJAX the only thing that shows up is a line of text that I placed
outside of the <script></script> tags.
Here is the function draw_chart that calls the php program;
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
alert("Fail");
}
}
}
return xmlhttp;
}
function drawChart(id) { // update the visualization div with valid
chart data
var req = getXMLHTTP(); // fuction to get xmlhttp object
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) { //data is retrieved from server
if (req.status == 200) { // which reprents ok
status
document.getElementById('visualization').innerHTML=req.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n");
}
}
}
req.open("GET", "draw_chart.php?id="+id, true); //open url using get
method
req.send(null);
}
}
</script>
</HEAD>
Here is the draw_chart.php file. The code that is being read from the
data file was tested in the Google Code Playground and works.
<?php
// First read the chart info from the data file
if (isset($_GET['id'])) {
$ch = curl_init("data/" . $_GET['$id']) ;
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$contents = curl_exec ($ch);
curl_close ($ch);
$fp = fopen("data/".$_GET['id'], "r");
while (!feof ($fp)) {
$line = fgets ($fp, 4096);
echo $line;
}
fclose($fp);
echo "Script output finished";
}
?>
"Script output finished" is what ends up displayed in the div. I've
tried running it with with the <script> tags removed from the input
file and I can see all the code gets written.
Here is my html part;
<div id='visualization'></div>
<script type='text/javascript'>
drawChart(7640);
</script>
Any help at all about what I might be able to try to find out what's
going on will be greatly appreciated. I've run out of ideas.
Thanks!
I need some help on getting my javascript to display the chart a div
after making an AJAX call.
The javascript is created and written to a file. I have tested the
javascript by creating a static html page with it that shows the
result that I am looking for. However when I try to populate it with
AJAX the only thing that shows up is a line of text that I placed
outside of the <script></script> tags.
Here is the function draw_chart that calls the php program;
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
alert("Fail");
}
}
}
return xmlhttp;
}
function drawChart(id) { // update the visualization div with valid
chart data
var req = getXMLHTTP(); // fuction to get xmlhttp object
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) { //data is retrieved from server
if (req.status == 200) { // which reprents ok
status
document.getElementById('visualization').innerHTML=req.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n");
}
}
}
req.open("GET", "draw_chart.php?id="+id, true); //open url using get
method
req.send(null);
}
}
</script>
</HEAD>
Here is the draw_chart.php file. The code that is being read from the
data file was tested in the Google Code Playground and works.
<?php
// First read the chart info from the data file
if (isset($_GET['id'])) {
$ch = curl_init("data/" . $_GET['$id']) ;
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$contents = curl_exec ($ch);
curl_close ($ch);
$fp = fopen("data/".$_GET['id'], "r");
while (!feof ($fp)) {
$line = fgets ($fp, 4096);
echo $line;
}
fclose($fp);
echo "Script output finished";
}
?>
"Script output finished" is what ends up displayed in the div. I've
tried running it with with the <script> tags removed from the input
file and I can see all the code gets written.
Here is my html part;
<div id='visualization'></div>
<script type='text/javascript'>
drawChart(7640);
</script>
Any help at all about what I might be able to try to find out what's
going on will be greatly appreciated. I've run out of ideas.
Thanks!
asgallant
Oct 3, 2011, 2:48:43 PM10/3/11
to google-visua...@googlegroups.com
If I read your code correctly, you have a file with some JS inside <script> tags, which you are retrieving via AJAX and inserting into a div. Assuming all is well with the retrieval and the code retrieved, you still need to call whatever functions are in the retrieved script.
harleyhar
Oct 3, 2011, 2:58:25 PM10/3/11
to Google Visualization API
Here is the JS that's put in the div;
<script type='text/javascript'>
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'EOR Method');
data.addColumn('number', 'Gravity (API) Maximum');
data.addRows(26);
data.setValue(0, 0, ' Miscible Acid Gas');
data.setValue(0, 1, 40.00);
data.setValue(1, 0, ' Miscible Hydrocarbon ');
data.setValue(1, 1, 36.00);
data.setValue(2, 0, 'Chemical AS');
data.setValue(2, 1, 22.00);
data.setValue(3, 0, 'Chemical ASP');
data.setValue(3, 1, 0.00);
data.setValue(4, 0, 'Chemical CDG');
data.setValue(4, 1, 0.00);
data.setValue(5, 0, 'Chemical Micellar Polymer');
data.setValue(5, 1, 33.00);
data.setValue(6, 0, 'Chemical Polymer ');
data.setValue(6, 1, 0.00);
data.setValue(7, 0, 'Chemical PS');
data.setValue(7, 1, 32.00);
data.setValue(8, 0, 'FAWAG');
data.setValue(8, 1, 35.00);
data.setValue(9, 0, 'Immiscible CO2');
data.setValue(9, 1, 11.00);
data.setValue(10, 0, 'Immiscible Hydrocarbon');
data.setValue(10, 1, 22.00);
data.setValue(11, 0, 'Immiscible Hydrocarbon WAG');
data.setValue(11, 1, 25.00);
data.setValue(12, 0, 'Immiscible Nitrogen');
data.setValue(12, 1, 16.00);
data.setValue(13, 0, 'Immiscible WAG');
data.setValue(13, 1, 0.00);
data.setValue(14, 0, 'Microbial');
data.setValue(14, 1, 12.00);
data.setValue(15, 0, 'Miscible CO2 ');
data.setValue(15, 1, 0.00);
data.setValue(16, 0, 'Miscible Gas');
data.setValue(16, 1, 0.00);
data.setValue(17, 0, 'Miscible Hydrocarbon');
data.setValue(17, 1, 0.00);
data.setValue(18, 0, 'Miscible Nitrogen');
data.setValue(18, 1, 38.00);
data.setValue(19, 0, 'Miscible WAG');
data.setValue(19, 1, 33.00);
data.setValue(20, 0, 'Nitrogen');
data.setValue(20, 1, 36.00);
data.setValue(21, 0, 'SWAG');
data.setValue(21, 1, 0.00);
data.setValue(22, 0, 'Thermal (Combustion)');
data.setValue(22, 1, 10.00);
data.setValue(23, 0, 'Thermal (Hot Water)');
data.setValue(23, 1, 12.00);
data.setValue(24, 0, 'Thermal (Steam)');
data.setValue(24, 1, 0.00);
data.setValue(25, 0, 'WAG');
data.setValue(25, 1, 9.30);
var chart = new
google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(data, {width: 1024, height: 768, title: 'MIN(`Gravity (API)
Maximum`) of Gravity (API) Maximum'
, hAxis: {title: 'EOR Method', titleTextStyle: {color: 'red'}}});
}
google.setOnLoadCallback(drawVisualization);
</script>
Shouldn't this be executed by
google.setOnLoadCallback(drawVisualization); once it's placed in the
div?
<script type='text/javascript'>
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'EOR Method');
data.addColumn('number', 'Gravity (API) Maximum');
data.addRows(26);
data.setValue(0, 0, ' Miscible Acid Gas');
data.setValue(0, 1, 40.00);
data.setValue(1, 0, ' Miscible Hydrocarbon ');
data.setValue(1, 1, 36.00);
data.setValue(2, 0, 'Chemical AS');
data.setValue(2, 1, 22.00);
data.setValue(3, 0, 'Chemical ASP');
data.setValue(3, 1, 0.00);
data.setValue(4, 0, 'Chemical CDG');
data.setValue(4, 1, 0.00);
data.setValue(5, 0, 'Chemical Micellar Polymer');
data.setValue(5, 1, 33.00);
data.setValue(6, 0, 'Chemical Polymer ');
data.setValue(6, 1, 0.00);
data.setValue(7, 0, 'Chemical PS');
data.setValue(7, 1, 32.00);
data.setValue(8, 0, 'FAWAG');
data.setValue(8, 1, 35.00);
data.setValue(9, 0, 'Immiscible CO2');
data.setValue(9, 1, 11.00);
data.setValue(10, 0, 'Immiscible Hydrocarbon');
data.setValue(10, 1, 22.00);
data.setValue(11, 0, 'Immiscible Hydrocarbon WAG');
data.setValue(11, 1, 25.00);
data.setValue(12, 0, 'Immiscible Nitrogen');
data.setValue(12, 1, 16.00);
data.setValue(13, 0, 'Immiscible WAG');
data.setValue(13, 1, 0.00);
data.setValue(14, 0, 'Microbial');
data.setValue(14, 1, 12.00);
data.setValue(15, 0, 'Miscible CO2 ');
data.setValue(15, 1, 0.00);
data.setValue(16, 0, 'Miscible Gas');
data.setValue(16, 1, 0.00);
data.setValue(17, 0, 'Miscible Hydrocarbon');
data.setValue(17, 1, 0.00);
data.setValue(18, 0, 'Miscible Nitrogen');
data.setValue(18, 1, 38.00);
data.setValue(19, 0, 'Miscible WAG');
data.setValue(19, 1, 33.00);
data.setValue(20, 0, 'Nitrogen');
data.setValue(20, 1, 36.00);
data.setValue(21, 0, 'SWAG');
data.setValue(21, 1, 0.00);
data.setValue(22, 0, 'Thermal (Combustion)');
data.setValue(22, 1, 10.00);
data.setValue(23, 0, 'Thermal (Hot Water)');
data.setValue(23, 1, 12.00);
data.setValue(24, 0, 'Thermal (Steam)');
data.setValue(24, 1, 0.00);
data.setValue(25, 0, 'WAG');
data.setValue(25, 1, 9.30);
var chart = new
google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(data, {width: 1024, height: 768, title: 'MIN(`Gravity (API)
Maximum`) of Gravity (API) Maximum'
, hAxis: {title: 'EOR Method', titleTextStyle: {color: 'red'}}});
}
google.setOnLoadCallback(drawVisualization);
</script>
Shouldn't this be executed by
google.setOnLoadCallback(drawVisualization); once it's placed in the
div?
asgallant
Oct 3, 2011, 3:42:26 PM10/3/11
to google-visua...@googlegroups.com
No, because setOnLoadCallback is called when the API is finished loading. Even if you replaced it with a straight drawVisualization() call, it wouldn't run the script. You have to explicitly call any dynamically generated JS.
You might want to consider having your PHP script return a JSON string representation of your data instead, and having the JS code in the main doc.
harleyhar
Oct 3, 2011, 4:27:37 PM10/3/11
to Google Visualization API
OooooK? Now I'm lost having never used JSON. I'll need to learn that
today I guess.
So then I assemble all of the variable data in a JSON object in PHP.
Then right after that I write the
draw the graph? There is no need to use AJAX anywhere in that
scenario?
today I guess.
So then I assemble all of the variable data in a JSON object in PHP.
Then right after that I write the
<script type='text/javascript'>
function drawVisualization() {
while reading the data from the JSON object and that should work and
function drawVisualization() {
draw the graph? There is no need to use AJAX anywhere in that
scenario?
harleyhar
Oct 3, 2011, 5:07:30 PM10/3/11
to Google Visualization API
So even adding this within the div wouldn't work?
<a href='#' onClick='javascript:drawVisualization()'><img
src='draw.gif' alt='draw' /></a>
Which is a dumb question because I tried it and it doesn't.
Just trying to find the simplest way to do this without having to re-
write all of my queries that generate the correct data sets
<a href='#' onClick='javascript:drawVisualization()'><img
src='draw.gif' alt='draw' /></a>
Which is a dumb question because I tried it and it doesn't.
Just trying to find the simplest way to do this without having to re-
write all of my queries that generate the correct data sets
asgallant
Oct 4, 2011, 10:26:15 AM10/4/11
to google-visua...@googlegroups.com
You can use the link to draw the chart, but you need to get rid of the 'javascript:' in the onClick event. You could also add the drawVisualization() call to the req.onreadystatechange function, after you add the response text to the div.
Reply all
Reply to author
Forward
0 new messages