The reason it doesn't work has to do with some quirky behavior of the
google loader. If you had used an inline callback, it would have worked,
eg;
function dspChart() {
google.load('visualization', '1', {'packages':['corechart'], callback:
drawChart});
}
But I don't recommend calling google.load inside another function, unless
you have a very specific reason for doing so. Generally speaking, having
the browser load the API asynchronously and in parallel with other assets
will result in getting charts drawn faster. In your specific case, calling
the loader from a button click, you introduce latency between clicking the
button and seeing a chart appear as the API doesn't start loading until the
button is clicked. Also, if you clicked the button a second time, the
google loader would see that the API is already loaded and do nothing - not
even firing the callback, so your chart would not redraw.
On Wednesday, September 10, 2014 12:06:42 PM UTC-4, Isaac Horrocks wrote:
>
> Agreed that works. Many thanks. Do you know why the google.load doesn't
> work within the function. Is it to do with scope in Javascript?
>
> On 10 September 2014 16:22, 'Jon Orwant' via Google Visualization API <
> [email protected] <javascript:>> wrote:
>
>> Why not move the google.load call above dspChart(), remove dspChart(),
>> and use onclick="drawChart();" ?
>>
>> Jon
>>
>> On Wed, Sep 10, 2014 at 10:21 AM, <[email protected] <javascript:>>
>> wrote:
>>
>>> This is probably so simple it's an insult to your intelligence, but
>>> what's wrong with this code. I want the chart to display when clicking the
>>> button - it just hangs. If I take away the definition of the dspChart
>>> function the chart draws fine.
>>>
>>> <html>
>>> <head>
>>>
>>> <!--Load the AJAX API-->
>>> <script type="text/javascript" src="https://www.google.com/jsapi
>>> "></script>
>>> <script type="text/javascript">
>>>
>>> function dspChart() {
>>> google.load('visualization', '1', {'packages':['corechart']});
>>> google.setOnLoadCallback(drawChart);
>>> }
>>>
>>> function drawChart() {
>>> // Create our data table.
>>> var data = new google.visualization.DataTable();
>>> data.addColumn('string', 'Topping');
>>> data.addColumn('number', 'Slices');
>>> data.addRows([
>>> ['Mushrooms', 3],
>>> ['Onions', 1]
>>> ]);
>>> // Instantiate and draw our chart, passing in some options.
>>> var chart = new
>>> google.visualization.PieChart(document.getElementById('fig'));
>>> chart.draw(data, null);
>>> }
>>>
>>> </script>
>>> </head>
>>>
>>> <body>
>>> <input type="button" value="display chart" onclick="dspChart();">
>>> <div id="fig"></div>
>>> </body>
>>> </html>
>>>
>>>
>>>
>>> --
>>> 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]
>>> <javascript:>.
>>> To post to this group, send email to [email protected]
>>> <javascript:>.
>>> Visit this group at
>>> http://groups.google.com/group/google-visualization-api.
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>
>> --
>> 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/xXxPljzWWRA/unsubscribe
>> .
>> To unsubscribe from this group and all its topics, send an email to
>> [email protected] <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
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.
