loading charts asynchronously

[Patrick Beaudan]

I load lots of charts on one page and would like to do that asynchronously so that the page does not lock waiting for each chart.

The chart call with async:false is as follows. When removing the async:false and the responseText on other routines, everything works fine but on the chart routines that call JSON.parse(jsonData) in the visualization object as in the example below (instead of just jsonData), the chart does not print.  The url in the ajax call seems to contain the right data, but there's no rendering of the chart. Any suggestion welcome.

google.load('visualization', '1.0', {'packages':['corechart']});     // Load the Visualization API and the piechart package.        

google.setOnLoadCallback(drawChart);     // Set a callback to run when the Google Visualization API is loaded.   

// Callback that creates and populates a data table, instantiates the chart, passes in the data and draws it.      

function drawChart() {      

  var jsonData = $.ajax({          

    url: "http://www.beladv.com/charts/chart_handler.php?chart=chart_NAVgrowth",          

    dataType:"json",          

    async: false          

  }).responseText;  

  

  var data = new google.visualization.DataTable(JSON.parse(jsonData));  // Create our data table out of JSON data loaded from server.           

  

  var options = {          

  'lineWidth': 1, 

  'legend': {position: 'top'},  

  'backgroundColor':'#f8f8ea', // same color as background box

  'width':850, 

  'height':200, 

  'hAxis': {textStyle: {fontSize:10, color:'black', bold:'true'}, viewWindowMode: 'maximized', gridlines: {count:-1} },

  'vAxis': {textStyle: {fontSize:10, color:'black'}, logScale: 'true', gridlines: {count:-1} },

  'fontName':'Trebuchet MS'         

  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_NAVgrowth'));  // Instantiate chart  

  chart.draw(data, options);   // draw chart, passing in some options.  

}    

[Daniel LaLiberte]

The default for ajax calls is asynchronous, if you take off the async: false, you will have to provide a callback function that will be called when the ajax response is finally returned.   We should include an example with the asynchronous callback, but it goes like this (modified from the jQuery docs):

$.ajax({
  url: "http://www.beladv.com/charts/chart_handler.php?chart=chart_NAVgrowth",

  context: document.body
}).done(function() {
  
});

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Daniel LaLiberte]

Dang.. gmail's editor makes it too easy to Send before ready.  Anyway, inside the done() function, you would do the rest of your chart drawing.   You would get the response object from the first argument to the done() function.  There might also be an error condition to look for, which you can handle by adding .error(function() { ... })

[Patrick Beaudan]

Daniel, thanks. Here's what I tried. The url gives the right JSON
string, but no chart comes through on the page, I wonder what I'm
doing wrong?

google.load('visualization', '1.0', {'packages':['corechart']});
// Load the Visualization API and the piechart package.
google.setOnLoadCallback(drawChart); // Set a callback to run when
the Google Visualization API is loaded.

// Callback that creates and populates a data table, instantiates the
chart, passes in the data and draws it.
function drawChart() {

$.ajax({
url: "http://www.beladv.com/charts/chart_handler.php?chart=chart_NAVgrowth",
dataType:"json",

context: document.body
}).done(function(jsonData) {

var data = new
google.visualization.DataTable(JSON.parse(jsonData)); // Create our
data table out of JSON data loaded from server.

var options = {
'lineWidth': 1,
'legend': {position: 'top'},
'backgroundColor':'#f8f8ea', // same color as background box
'width':850,
'height':200,
'hAxis': {textStyle: {fontSize:10, color:'black',
bold:'true'}, viewWindowMode: 'maximized', gridlines: {count:-1} },
'vAxis': {textStyle: {fontSize:10, color:'black'},
logScale: 'true', gridlines: {count:-1} },
'fontName':'Trebuchet MS'
};

var chart = new
google.visualization.LineChart(document.getElementById('chart_NAVgrowth'));
// Instantiate chart
chart.draw(data, options); // draw chart, passing in some options.

>> dlali...@Google.com 5CC, Cambridge MA
>> daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

>
>
>
>
> --
> Daniel LaLiberte - 978-394-1058

> dlali...@Google.com 5CC, Cambridge MA
> daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA
>
> --
> You received this message because you are subscribed to a topic in the

> Google Groups "Google Visualization API" group.

> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/google-visualization-api/edujc3A9x5A/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to

> google-visualizati...@googlegroups.com.
> To post to this group, send email to
> google-visua...@googlegroups.com.
> Visit this group at http://groups.google.com/group/google-visualization-api.
> For more options, visit https://groups.google.com/d/optout.



--

Best Regards,
Patrick Beaudan
(415) 839-5239