Google Charts with Ajax and PHP

Question

This is my first time posting, so please let me know if im missing anything.

I recently started messing with AJAX and i am trying to develop a simple dashboard that pulls information from our database and presents it to a web page in google's table view. However i am consistantly getting the error "Uncaught Error: Not an array format+en,default,table.I.js:55" within Chromes Javascript console. Below is the ajax code within the html page:

<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var jsonData = $.ajax({
      url: "livesearch.php?chart=bars",
      dataType:"json",
      async: false
      }).responseText;
      alert(jsonData);
 var data = new google.visualization.arrayToDataTable(jsonData);
    data.addColumn('string', 'Status');
    data.addColumn('number', 'Orders');
    data.addRows(jsonData);
  var chart = new google.visualization.Table(document.getElementById('chart_div'));
    chart.draw(data   , {width: 800, height: 150});
    setTimeout('drawChart()',500000);
}

</script>

And here is my php script that is building the json array.

while ($row = sqlsrv_fetch_array($result))  
    {
    $c[] = array($row['status'], array('v' => $row['countx'], 'f' =>  
                                 $row['countx']), $row['countx']);               
    }

    echo json_encode($c);

When i set an alert in my javascript after the json is returned, it is in this format:

[{"COLS":[{"id":"Status", "type":"String"},{"id":"Orders", "type":"Number"}],"rows":[{"c":[{"v":"GEND"},{"v":11}]}]}]

Comp, Gend and Hold are simply status's for orders in our system. The numbers are the amount of orders in that status. As stated before im simply creating a dashboard to display this information at a specific interval. I can use get the information to update using this syntax in javascript "$('div#status').load('livesearch.php?chart=numbers');" but i would like to use googles visual tools and eventually start using their charts with ajax as well.

Thanks for the help. Let me know if there is anything else you need.

One more update. If i change the javascript code from arrayToDateTable to DataTable: var data = new google.visualization.DataTable(jsonData); data.addColumn('string', 'Status'); data.addColumn('number', 'Orders'); data.addRows(data); I got the error "Uncaught Error: Argument given to addRows must be either a number or an array " In Chrome

Finally i found the web site 'http://json.parser.online.fr/' which told me the json syntax was indeed incorrect. So i tried a different approach with something else i found online:

html site:

var jsonData = $.ajax({
      url: "livesearch.php?chart=bars",
      dataType:"json",
      async: false
      }).responseText;
      alert(jsonData);
      var data = new google.visualization.DataTable(jsonData, 0.5);
chart = new google.visualization.Table(document.getElementById('chart_div'));
    chart.draw(data, {'allowHtml': true});

PHP site, im simply building the array's to pass back here just to get it to work.

$cols = array();
$cols[] = array('label' => 'Status','type' => 'String');
$cols[] = array('label' => 'Status', 'type' => 'number');
$cells = array();
$cells[] = array('v' => 'GEND');
$cells[] = array('v' => 11);
$rows = array();
$rows[] = array('c' => $cells);
$data = array();
$data[] = array('cols' => $cols, 'rows' => $rows);
  echo json_encode($data);

This is my output which is verified correct on 'http://json.parser.online.fr/' : [{"COLS":[{"id":"Status", "type":"String"},{"id":"Orders", "type":"Number"}],"rows":[{"c":[{"v":"GEND"},{"v":11}]}]}]'

I do however get no errors now in chrome, but not table is displayed.

Answer 1

I'm seeing inconsistencies in casing.

My guess is that "COLS" should actually be lowercased "cols".

As typed correctly in the latest php example, but not in the json output.

edit: An example from google themselves:

var dt = new google.visualization.DataTable(
     {
       cols: [{id: 'task', label: 'Task', type: 'string'},
                {id: 'hours', label: 'Hours per Day', type: 'number'}],
       rows: [{c:[{v: 'Work'}, {v: 11}]},
              {c:[{v: 'Eat'}, {v: 2}]},
              {c:[{v: 'Commute'}, {v: 2}]},
              {c:[{v: 'Watch TV'}, {v:2}]},
              {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
             ]
     },
   0.6
)