Google chart object error: google not defined

Question

I've tested some stand-alone code that creates charts based on arbitrary data for a Google charts object, but I'm running into road blocks on incorporating this code into my object that creates the actual data. I'm trying to call the following charting function but getting a 'google not defined error:

function costChart() {
        var energyType = 'Monthly Cost';
        var energySavings = [1,2,3,4,5,6,7,8,9,10,11,12]; //=this.costSavings
        var month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month');
        data.addColumn('number', energyType + ' Saved');


        data.addRows([
          [month[0], energySavings[0]],
          [month[1], energySavings[1]],
          [month[2], energySavings[2]],
          [month[3], energySavings[3]],
          [month[4], energySavings[4]],
          [month[5], energySavings[5]],
          [month[6], energySavings[6]],
          [month[7], energySavings[7]],
          [month[8], energySavings[8]],
          [month[9], energySavings[9]],
          [month[10], energySavings[10]],
          [month[11], energySavings[11]]
        ]);

        // Set chart options
        var options = {'title': 'Cost Savings',
                       'width':400,
                       'height':300,
                       'hAxis':{format: 'currency'}
                      };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('cost_chart_div'));
        chart.draw(data, options);
      }

I call it using something similar to the code below. Ideally, I would like the function above to be part of an object named Project, so that I can call it like this:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
var project1 = newProject();
//some calculations to get the costSavings property data...
project1.costChart();

and then use the properties within the Project object to set the data for the charting function. (you can see this commented out in the third line of the costChart function)

I can't seem to get rid of the 'google not defined' error. I've tried adding the script to the portion but its still nogo. I've tried calling the function separately by passing it the object as an arg, but still the same error. I have a feeling that it may be due to the way I should be including:

  google.load('visualization', '1.0', {'packages':['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(costChart);

but I'm not quite sure where/how to include these in the function. Would they go at the top of the script, or within the function that calls costChart(), or within the costChart() function itself, etc...?

Answer 1

You would normally want to load the corechart component just after you've called the Google JSAPI, so this way it is only loaded once per page load - if you put it in the function that draws your chart, you'll be reloading that file every time your function is drawn.

Your can also load the corechart component when calling the JSAPI file directly, although I find it more readable to do it seperately:

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']}]}"></script>

I've recreated your code in JSFiddle so you can see where I've loaded the corechart component:

https://jsfiddle.net/hob53xux/