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.
On Thu, Apr 7, 2022 at 1:55 AM PROGETTAZIONE STUDIO GB <
[email protected]> wrote:
> I would like to load google sheet to interact with a piechart and slider.
> I adapted the code from here
> <https://developers.google.com/chart/interactive/docs/gallery/controls?hl=en#preparedata>
> and
> the result is here at the end of my message. You can see it in jsfiddle
> <https://developers.google.com/chart/interactive/docs/gallery/controls?hl=en#preparedata>,
> 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>
>
> --
> 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 view this discussion on the web visit
> https://groups.google.com/d/msgid/google-visualization-api/4a7b3d93-d932-485b-b0cf-b03adc93da92n%40googlegroups.com
> <https://groups.google.com/d/msgid/google-visualization-api/4a7b3d93-d932-485b-b0cf-b03adc93da92n%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>
--
• Daniel LaLiberte
• SWE
• Cambridge MA
• [email protected] <[email protected]>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJPBybQTbaL2vdr%3DUvT-4HmAk57T8dEa9W0MYuoUAbMQfQ%40mail.gmail.com.
