Google Charts con Ajax y PHP

Esta es la primera vez que publico, así que, por favor, avíseme si me falta algo.

Recientemente comencé a jugar con AJAX y estoy tratando de desarrollar un panel simple que extraiga información de nuestra base de datos y la presente en una página web en la vista de tabla de Google. Sin embargo, recibo constantemente el error “Error no detectado: no es un formato de matriz + en, predeterminado, tabla.I.js: 55” en la consola Javascript de Chromes. A continuación se muestra el código ajax dentro de la página html:

 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); }  

Y aquí está mi script php que está construyendo la matriz json.

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

Cuando configuro una alerta en mi javascript después de que se devuelve el json, está en este formato:

[{“COLS”: [{“id”: “Estado”, “tipo”: “Cadena”}, {“id”: “Pedidos”, “tipo”: “Número”}], “filas”: [{ “c”: [{“v”: “GEND”}, {“v”: 11}]}]}]

Comp, Gend y Hold son simplemente estados para pedidos en nuestro sistema. Los números son la cantidad de pedidos en ese estado. Como se indicó anteriormente, simplemente estoy creando un panel para mostrar esta información en un intervalo específico. Puedo usar obtener la información para actualizar usando esta syntax en javascript “$ (‘div # status’). Load (‘livesearch.php? Chart = numbers’);” pero me gustaría usar las herramientas visuales de Google y eventualmente comenzar a usar sus gráficos con ajax también.

Gracias por la ayuda. Déjame saber si hay algo más que necesites.

Una actualización más. Si cambio el código javascript de arrayToDateTable a DataTable: var data = new google.visualization.DataTable (jsonData); data.addColumn (‘string’, ‘Status’); data.addColumn (‘número’, ‘Pedidos’); data.addRows (datos); Recibí el error “Error no detectado: el argumento dado a addRows debe ser un número o una matriz” En Chrome

Finalmente encontré el sitio web ‘ http://json.parser.online.fr/ ‘ que me dijo que la syntax de json era incorrecta. Así que probé un enfoque diferente con otra cosa que encontré en línea:

sitio html:

 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}); 

Sitio de PHP, simplemente estoy construyendo la matriz para volver aquí solo para que funcione.

 $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); 

Esta es mi salida que se verifica correctamente en ‘ http://json.parser.online.fr/ ‘: [{“COLS”: [{“id”: “Estado”, “tipo”: “Cadena”}, { “id”: “Pedidos”, “tipo”: “Número”}], “filas”: [{“c”: [{“v”: “GEND”}, {“v”: 11}]}]} ] ‘

Sin embargo, ahora no obtengo errores en Chrome, pero no se muestra la tabla.

Estoy viendo inconsistencias en la carcasa.

Mi conjetura es que “COLS” en realidad debería ser “cols” en minúsculas.

Como se escribió correctamente en el último ejemplo de php, pero no en la salida json.

edición: un ejemplo de google ellos mismos:

 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 )