Google Charts API: new google.visualization.Table() - Uncaught TypeError: undefined is not a function

Question

I have copied the Google Code example into a php script however I am getting the error "undefined is not a function"

it is happening specifically on this line:

var table = new google.visualization.Table(document.getElementById('table_sort_div'));

It appeats that the Table function does not exist???

I have copied the code directly from Googles Code examples so I can't understand what I have done wrong... I'm tending to believe that there is an issue with the example but I'm gonna assume I'd make a mistake before google would?

Code was copied directly from: http://code.google.com/apis/chart/interactive/docs/examples.html#interaction_example

Adigun

Answer 1

You need to wait for the scripts to load. For example:

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['table']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  function drawChart() {
       var table = new google.visualization.Table(document.getElementById('table_sort_div'));
  }

should work, because the scripts have been loaded. A better table reference here

Enid

Wrong package here also, thanks! Although, the code comment above mentions "piechart package" ;-) – Tunis

Answer 2

Also if you want to load multiple packages, you can do that as well like :

 google.load('visualization', '1', { packages: ['corechart', 'table'] });

Rosenbaum

Nowadays it is called like this: <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> and then google.charts.load('current', {'packages':['corechart','table']}); – Thyestes

I have not kept up with it, but while your at it, you might want to comment to Joe who has the OP selected answer , of which his first line of code is " google.load('visualization', '1.0', {'packages':['table']});" :P – Rosenbaum

Answer 3

    google.charts.load('current', {'packages': ['table']});
    google.charts.setOnLoadCallback(drawTable);

    function drawTable() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Name');
      data.addColumn('number', 'Salary');
      data.addColumn('boolean', 'Full Time');
      data.addRows(5);
      data.setCell(0, 0, 'John');
      data.setCell(0, 1, 10000, '$10,000');
      data.setCell(0, 2, true);
      data.setCell(1, 0, 'Mary');
      data.setCell(1, 1, 25000, '$25,000');
      data.setCell(1, 2, true);
      data.setCell(2, 0, 'Steve');
      data.setCell(2, 1, 8000, '$8,000');
      data.setCell(2, 2, false);
      data.setCell(3, 0, 'Ellen');
      data.setCell(3, 1, 20000, '$20,000');
      data.setCell(3, 2, true);
      data.setCell(4, 0, 'Mike');
      data.setCell(4, 1, 12000, '$12,000');
      data.setCell(4, 2, false);

      var table = new google.visualization.Table(document.getElementById('table_div'));
      table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});

      google.visualization.events.addListener(table, 'select', function () {
        var row = table.getSelection()[0].row;
        alert('You selected ' + data.getValue(row, 0));
      });
    }

Calendar