Your example appears to work fine: https://jsfiddle.net/dlaliberte/go3krxLh/
(The jsfiddle link you copied was without having saved your example first, so you got the empty program.) On Tue, Jul 25, 2017 at 11:35 AM, 'Becca' via Google Visualization API < [email protected]> wrote: > I know there are other posts similar to mine, but I can't seem to find a > solution in any of them. > > I copied the following code directly from https://developers. > google.com/chart/interactive/docs/gallery/controls#load_your_libraries > (aka https://jsfiddle.net/api/post/library/pure/) but I keep getting the > error ReferenceError: "google" is not defined. (line 1, file "Code"). > > google.charts.load('current', {'packages':['corechart', 'controls']}); > google.charts.setOnLoadCallback(drawStuff); > > function drawStuff() { > > var dashboard = new google.visualization.Dashboard( > document.getElementById('programmatic_dashboard_div')); > > // 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, > 'legend': 'none', > 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, > 'pieSliceText': 'value' > } > }); > > var data = google.visualization.arrayToDataTable([ > ['Name', 'Donuts eaten'], > ['Michael' , 5], > ['Elisa', 7], > ['Robert', 3], > ['John', 2], > ['Jessica', 6], > ['Aaron', 1], > ['Margareth', 8] > ]); > > 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(); > }; > } > <html> > <head> > <script type="text/javascript" src="https://www.gstatic.com/ > charts/loader.js"></script> > <script type="text/javascript"> > google.charts.load('current', {'packages':['corechart', > 'controls']}); > google.charts.setOnLoadCallback(drawStuff); > > function drawStuff() { > > var dashboard = new google.visualization.Dashboard( > document.getElementById('programmatic_dashboard_div')); > > // 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, > 'legend': 'none', > 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, > 'pieSliceText': 'value' > } > }); > > var data = google.visualization.arrayToDataTable([ > ['Name', 'Donuts eaten'], > ['Michael' , 5], > ['Elisa', 7], > ['Robert', 3], > ['John', 2], > ['Jessica', 6], > ['Aaron', 1], > ['Margareth', 8] > ]); > > 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> > </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> > <script type="text/javascript"> > function changeRange() { > programmaticSlider.setState({'lowValue': 2, 'highValue': > 5}); > programmaticSlider.draw(); > } > > function changeOptions() { > programmaticChart.setOption('is3D', true); > programmaticChart.draw(); > } > </script> > </td> > <td> > <div id="programmatic_chart_div"></div> > </td> > </tr> > </table> > </div> > </body> > </html> > > I'm new to this so any help would be greatly appreciated! > > -- > 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 google-visualization-api@ > googlegroups.com. > Visit this group at https://groups.google.com/ > group/google-visualization-api. > To view this discussion on the web visit https://groups.google.com/d/ > msgid/google-visualization-api/f56176b6-5eee-420a-bc28- > 1d8735456bd8%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/f56176b6-5eee-420a-bc28-1d8735456bd8%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> [email protected] <[email protected]> 5CC, Cambridge MA -- 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 https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJOAGvyDXT5kQLHKaoTqBEMAnQ_G6JPCqzPFGtt16dRXww%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
