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.
});
}
On Tue, Feb 3, 2015 at 1:27 PM, 'Daniel LaLiberte' via Google
Visualization API <[email protected]> wrote:
> 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() { ... })
>
>
> On Tue, Feb 3, 2015 at 4:22 PM, Daniel LaLiberte <[email protected]>
> wrote:
>>
>> 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() {
>>
>> });
>>
>>
>>
>>
>> On Tue, Feb 3, 2015 at 3:48 PM, Patrick Beaudan <[email protected]> wrote:
>>>
>>> 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.
>>> }
>>>
>>> --
>>> 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 [email protected].
>>> To post to this group, send email to
>>> [email protected].
>>> 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
>> [email protected] 5CC, Cambridge MA
>> [email protected] 9 Juniper Ridge Road, Acton MA
>
>
>
>
> --
> Daniel LaLiberte - 978-394-1058
> [email protected] 5CC, Cambridge MA
> [email protected] 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
> [email protected].
> To post to this group, send email to
> [email protected].
> 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
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
