AJAX google charts sequencing problem
275 views
Skip to first unread message
Kevin
Jan 14, 2012, 8:07:33 AM1/14/12
to Google Visualization API
In my test.html file I am using google charts and including another
file ajax.js which has all of the ajax code, the chart is supposed to
use the returned value from the ajax call. What is happening is the
alert inside of drawChart is being shown first, before the ajax call
is made!? I'm not sure why this is happening but it must have to do
with the sequence in which the code is loaded/executed.
If I make two buttons tying one of them to the ajax call, and one of
them to the chart drawing, I am able to succesfully display the value
return from my call. However the code below executes in an undesired
sequence. Any help would be appreciated!
Inside test.html is:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/
jsapi'></script>
<script type="text/javascript" language="javascript"
src="ajax.js"></script>
<script type='text/javascript'>
var dummy;
var temp;;
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
makeRequest();//here is the ajax call that populates a global
variable
setTimeout("alert('hello')",20000);
alert("Inside drawChart()" + result);//this alert shows up before
the one in the makeRequest(function). I obviously don't understand the
sequence in which the code is executed
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows([
['Temp', parseInt(result)]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new
google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
document.getElementById('test');
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
file ajax.js which has all of the ajax code, the chart is supposed to
use the returned value from the ajax call. What is happening is the
alert inside of drawChart is being shown first, before the ajax call
is made!? I'm not sure why this is happening but it must have to do
with the sequence in which the code is loaded/executed.
If I make two buttons tying one of them to the ajax call, and one of
them to the chart drawing, I am able to succesfully display the value
return from my call. However the code below executes in an undesired
sequence. Any help would be appreciated!
Inside test.html is:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/
jsapi'></script>
<script type="text/javascript" language="javascript"
src="ajax.js"></script>
<script type='text/javascript'>
var dummy;
var temp;;
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
makeRequest();//here is the ajax call that populates a global
variable
setTimeout("alert('hello')",20000);
alert("Inside drawChart()" + result);//this alert shows up before
the one in the makeRequest(function). I obviously don't understand the
sequence in which the code is executed
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows([
['Temp', parseInt(result)]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new
google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
document.getElementById('test');
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
Jinji
Jan 16, 2012, 6:03:32 AM1/16/12
to google-visua...@googlegroups.com
I can't really be sure without looking at ajax.js, but if makeRequest() issues some async request, and calls alert() only after the a response for the request comes back, then it makes perfect sense that the alert inside drawChart() will show first.
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
asgallant
Jan 19, 2012, 9:16:10 AM1/19/12
to google-visua...@googlegroups.com
Your entire drawChart() function will likely execute before the AJAX call is finished. Thus, result will almost always be whatever it's default value is (null?), and so the chart will not draw the way you want. You need to move the chart drawing code into the AJAX call's return function.
Reply all
Reply to author
Forward
0 new messages