Display chart via function

isaach...@gmail.com

unread,

Sep 10, 2014, 10:21:05 AM9/10/14

to google-visua...@googlegroups.com

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>

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>

</body>

</html>

Jon Orwant

unread,

Sep 10, 2014, 11:22:41 AM9/10/14

to google-visua...@googlegroups.com

Why not move the google.load call above dspChart(), remove dspChart(), and use onclick="drawChart();" ?

Jon

--
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.

Isaac Horrocks

unread,

Sep 10, 2014, 12:06:42 PM9/10/14

to google-visua...@googlegroups.com

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?

--
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 google-visualizati...@googlegroups.com.

Andrew Gallant

unread,

Sep 10, 2014, 8:09:03 PM9/10/14

to google-visua...@googlegroups.com

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.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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.

--
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 google-visualization-api+unsub...@googlegroups.com.

Reply all

Reply to author

Forward