ReferenceError: "google" is not defined. (line 1, file "Code")

2,723 views
Skip to first unread message

Becca

unread,
Jul 25, 2017, 11:35:59 AM7/25/17
to Google Visualization API
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!

Daniel LaLiberte

unread,
Jul 25, 2017, 12:00:39 PM7/25/17
to Google Visualization API
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.)

--
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-visualization-api+unsub...@googlegroups.com.
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.
For more options, visit https://groups.google.com/d/optout.



--

Becca

unread,
Jul 25, 2017, 2:14:32 PM7/25/17
to Google Visualization API
Thank you for your reply. I guess I wasn't clear - the code works on JSFiddle but not on Google Scripts.
To post to this group, send email to google-visua...@googlegroups.com.



--

Daniel LaLiberte

unread,
Jul 25, 2017, 3:17:20 PM7/25/17
to Google Visualization API
Can you point us at a page showing the error?  It is difficult to know what is happening otherwise.

Ultimately, if the "google" symbol is not defined, that means the loader has not been loaded by the time you use the google symbol.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.



--

--
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-visualization-api+unsub...@googlegroups.com.
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/8847cb71-074a-421a-8fd2-ea0ed3e6652e%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Har Yu

unread,
Jul 26, 2017, 3:23:14 AM7/26/17
to Google Visualization API
Just a random thing to look into making sure the source file is encoded in the correct character set (my Notepad++ was screwing things up somehow. Switching encoding to utf8 fixed it for me)
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Becca

unread,
Jul 26, 2017, 9:28:34 AM7/26/17
to Google Visualization API
I'm sorry, I'm very new to this so I'm not sure what you mean. Can you rephrase or explain?

Becca

unread,
Jul 26, 2017, 9:29:30 AM7/26/17
to Google Visualization API

Daniel LaLiberte

unread,
Jul 26, 2017, 10:34:32 AM7/26/17
to Google Visualization API
Instead of "a page showing the error" I should have said "a page demonstrating the error".  We don't need an image of the error.  We need the page that causes the error.

On Wed, Jul 26, 2017 at 9:29 AM, 'Becca' via Google Visualization API <google-visua...@googlegroups.com> wrote:

--
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-visualization-api+unsub...@googlegroups.com.
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/affaec33-c8aa-4985-9877-925b44a1f410%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages