Это мой первый пост, поэтому, пожалуйста, дайте мне знать, если я что-то пропустил.
Недавно я начал возиться с AJAX, и я пытаюсь разработать простую панель, которая извлекает информацию из нашей базы данных и представляет ее на веб-странице в представлении таблицы Google. Тем не менее, я постоянно получаю сообщение об ошибке «Uncaught Error: не формат массива + en, default, table.I.js: 55» в консоли Chromes Javascript. Ниже приведен код ajax на странице html:
<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> И вот мой php-скрипт, который создает json-массив.
while ($row = sqlsrv_fetch_array($result)) { $c[] = array($row['status'], array('v' => $row['countx'], 'f' => $row['countx']), $row['countx']); } echo json_encode($c);
Когда я устанавливаю предупреждение в своем javascript после возвращения json, он находится в этом формате:
[{"COLS": [{"id": "Status", "type": "String"}, {"id": "Orders", "type": "Number"}], "rows": [{ "С": [{ "v": "Gend"}, { "v": 11}]}]}]
Comp, Gend и Hold – это просто статус заказов в нашей системе. Числа – это количество заказов в этом статусе. Как указано выше, просто создайте приборную панель для отображения этой информации с определенным интервалом. Я могу использовать информацию для обновления, используя этот синтаксис в javascript «$ (« статус div # »). Load ('livesearch.php? Chart = numbers'); но я бы хотел использовать визуальные инструменты googles и в конечном итоге начать использовать свои диаграммы с ajax.
Спасибо за помощь. Дайте мне знать, если вам что-то еще нужно.
Еще одно обновление. Если я изменю код javascript от arrayToDateTable до DataTable: var data = new google.visualization.DataTable (jsonData); data.addColumn ('string', 'Status'); data.addColumn ('number', 'Orders'); data.addRows (данные); Я получил сообщение об ошибке «Неудачная ошибка: аргумент, заданный addRows, должен быть либо числом, либо массивом» В Chrome
Наконец, я нашел веб-сайт « http://json.parser.online.fr/ », в котором говорилось, что синтаксис json действительно неверен. Поэтому я попробовал другой подход с чем-то еще, что я нашел в Интернете:
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});
PHP-сайт, просто создавая массив, чтобы вернуться сюда, чтобы заставить его работать.
$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);
Это мой вывод, который проверен правильно на странице « http://json.parser.online.fr/ »: [{«COLS»: [{«id»: «Status», «type»: «String»}, { «id»: «Заказы», «Тип»: «Число»}], «rows»: [{"c": [{"v": "GEND"}, {"v": 11}]}]} ]»
Однако у меня нет ошибок в chrome, но не отображается таблица.
Я вижу несоответствия в корпусе.
Я предполагаю, что «COLS» на самом деле должны быть «cols» с нижним индексом.
Как правильно напечатано в последнем примере php, но не в json-выходе.
edit: Пример из самих Google:
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 )