CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
coolhand
coolhand

Reputation: 2061

Adding Google Chart function to Objects

I'm trying to add a Google Charts feature to an object. I've tested out the following code in NetBeans and it has worked giving it arbitrary data arrays:

google.setOnLoadCallback(costChart);
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);
      }

However, I would like to put this within an object as a method to be used, similar to this.costChart(). Instead of arbitrary data, it would access data within the object, like the commented out this.costSavings on the third line of code.

When I set it up as an object method, I get the error: "Uncaught ReferenceError: google is not defined"

Any ideas on how to properly set this method up?

Follow-up: I've added the line of code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
    function run(){
    costChart();

    }

but I'm still getting the same '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...?

Upvotes: 1

Views: 176

Answers (1)

Isaac Ray
Isaac Ray

Reputation: 1361

You are getting "google is not defined" because you need this at the top of your code:

  <div id="cost_chart_div"> </div> 

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    // Load the Visualization API and the piechart package.
   google.load('visualization', '1.0', {'packages':['corechart']});

Once you have that in place, you should have no trouble doing what you want with this.costSavings.

Upvotes: 2

Related Questions