Try to load google sheet to interact with chart

PROGETTAZIONE STUDIO GB

unread,

Apr 7, 2022, 1:53:42 AMApr 7

to Google Visualization API

I would like to load google sheet to interact with a piechart and slider.

I adapted the code from here and the result is here at the end of my message. You can see it in jsfiddle, too.

When I run the code in localhost I receive a jsapi error (strange because I call newer library loader.js)

jsapi_compiled_default_module.js:449 Uncaught Error: Error handling Query strict JSON response: TypeError: google.visualization.Dashboard is not a constructor
at jsapi_compiled_default_module.js:449:190
at e.kK (jsapi_compiled_default_module.js:334:122)
at gvjs_nl (jsapi_compiled_default_module.js:337:247)
at gvjs_kl (jsapi_compiled_default_module.js:337:103)
at gvjs_al.Xna (jsapi_compiled_default_module.js:336:354)
at gvjs_9k (jsapi_compiled_default_module.js:331:95)

In running it jsfiddle I receive these two errors:

"Script error."
"<a class='gotoLine' href='#144:80'>144:80</a> Uncaught ReferenceError: changeRange is not defined"

"Running fiddle"
"https://docs.google.com/spreadsheets/d/1VpvFEYZZu5lu9qCkRwXlOkZxLHBkiGcytF8O1w-5bBA/gviz/tq?&tqx=out:json&sheet=Foglio3&"
"Script error."
"<a class='gotoLine' href='#144:80'>144:80</a> Uncaught ReferenceError: changeRange is not defined"

Maybe there is an issue with parameter passed to setOnLoadCallback function, but I cant figure out how to avoid it.

Another doubt is in the comment from google developer code that is for me meaningless. The comment is: " // We omit "var" so that programmaticSlider is visible to changeRange"

Can you help me? Thanks

Mauro

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
// VEDERE QUI PER IMPOSTAZIONI: https://developers.google.com/chart/interactive/docs/basic_load_libs#basic-library-loading
// VEDERE QUI: https://stackoverflow.com/questions/37411766/google-charts-dashboard-how-to-make-it-responsive
//
// -------------------------------------------------
// CARICAMENTO DELLE LIBRERIE
google.charts.load('current', {'packages':['corechart']});
// ------------------------------------------------------
// CALLBACK
google.charts.setOnLoadCallback(initialize);

// -----------------------------------------------------------
// CARICAMENTO DATI
function initialize() {
var query = new google.visualization.Query(url2);
query.send(drawStuff);
}
function drawStuff(response) {
var data=response.getDataTable();

// We omit "var" so that programmaticSlider is visible to changeRange.
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Donuts eaten',
'ui': {'labelStacking': 'vertical'}
}
});

var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'programmatic_chart_div',
'options': {
'width': 300,
'height': 300,
'title': 'Total Cost Breakdown'
},
'view': {
columns: [0, 1]
}
});

var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);

changeRange = function() {
programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
programmaticSlider.draw();
};

changeOptions = function() {
programmaticChart.setOption('is3D', true);
programmaticChart.draw();
};
}
</script>
<title>Document</title>
</head>
<body>

<div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
<table class="columns">
<tr>
<td>
<div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
<div>
<button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
Select range [2, 5]
</button><br />
<button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
Make the pie chart 3D
</button>
</div>
</td>
<td>
<div id="programmatic_chart_div"></div>
</td>
</tr>
</table>
</div>

</body>
</html>

Daniel LaLiberte

unread,

Apr 7, 2022, 12:56:30 PMApr 7

to proget...@studiogb.org, Google Visualization API

A few points:

The 'jsapi' modules are named as such because the gstatic charts/loader.js was originally designed to serve frozen versions of the code available via the old jsapi loader.
The main thing you are missing is in your google.charts.load call, which should be: google.charts.load('current', {'packages':['corechart', 'controls']}); Note the 'controls' package, which is where Dashboard is defined.
The comment about omitting the "var" for assigning a value for programmaticSlider is incorrect and needs to be fixed. Thanks.

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/4a7b3d93-d932-485b-b0cf-b03adc93da92n%40googlegroups.com.

--

• Daniel LaLiberte

• SWE

• Cambridge MA

• dlaliberte@Google.com

PROGETTAZIONE STUDIO GB

unread,

Apr 8, 2022, 7:44:04 AMApr 8

to Google Visualization API

Thank a lot Daniel,

I did some mistake. Based on your feedbak I was able to build the correct code.

Here is the jsfiddle

Best Regards

Mauro

Reply all

Reply to author

Forward