Search code examples
javascriptphpgoogle-visualization

Assign columns to a google chart


I have a google chart pulling data from a mysql database. If I pass the returned array (arr) directly to DataTable(), it works:

var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable(arr);
var options = {}; // assign some options
chart.draw(dataTable, options);

Now I'd like to add some columns prior to assigning the array. This results in an error. I have googled many examples (E.g. This one but can't find what I'm doing wrong.

var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);    
var dataTable = new google.visualization.DataTable();
   
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
   
// Uncaught (in promise) Error: Argument given to addRows must be either a number or an array
var rows = JSON.parse(arr);
dataTable.addRows(rows);

// This doesn't work either: Uncaught (in promise) Error: Argument given to addRows must be either a number or an array
dataTable.addRows(arr);

var options = {}; // assign some options
chart.draw(dataTable, options);

Solution

  • I added the columns in PHP and it works now.

    like this

    $table['cols'] = array(...)
    

    Example