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.
