Я работаю над проектом, в котором я использую API Google Charting, и я хочу заполнить диаграмму с помощью json для построения таблицы данных.
В качестве теста я пытаюсь создать простой массив, прежде чем попытаться сделать это с помощью динамических данных из базы данных, но у меня возникла проблема с получением json в правильном формате.
В документации Google говорится, что содержание json должно быть в следующем:
{ "cols": [ {"id":"","label":"Topping","pattern":"","type":"string"}, {"id":"","label":"Slices","pattern":"","type":"number"} ], "rows": [ {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]}, {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]}, {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]}, {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]}, {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]} ] } Я вызываю функцию, которая возвращает код json.
Ниже приводится описание функции
print json_encode(test());
и тестовая функция
function test() { $array = array(); $array['cols'][] = "20-01-13"; $array['cols'][] = "21-01-13"; $array['cols'][] = "22-01-13"; $array['rows'][] = 22; $array['rows'][] = 26; $array['rows'][] = 12; return $array; }
Javascript, который генерирует диаграмму, выглядит следующим образом
<script> google.load('visualization', '1', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "loadGraph.php", dataType:"json", async: false }).responseText; var data = new google.visualization.DataTable(jsonData); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('lineGraph')); chart.draw(data, {width: 400, height: 240}); } </script>
Когда я повторяю json, он возвращается в следующем формате
{"cols":["20-01-13","21-01-13","22-01-13"],"rows":[22,26,12]}
и если я попытаюсь использовать это для набора данных для диаграммы google, я получаю следующее сообщение
Cannot read property of '1' of undefined
Я только строю простую линейную диаграмму, которая будет содержать только дату по оси х и подсчет того, сколько раз что-то произошло в эту дату по оси y.
Как я могу собрать массив, чтобы получить его в правильном формате для диаграммы api google.
Спасибо за любую помощь, которую вы можете предоставить.
Вам нужно указать тип параметра для cols. Обратитесь к форматам JSON Google Charts
Ваш PHP-код должен выглядеть примерно так:
function test() { $array['cols'][] = array('type' => 'string'); $array['cols'][] = array('type' => 'string'); $array['cols'][] = array('type' => 'string'); $array['rows'][] = array('c' => array( array('v'=>'20-01-13'), array('v'=>22)) ); $array['rows'][] = array('c' => array( array('v'=>'21-01-13'), array('v'=>26))); $array['rows'][] = array('c' => array( array('v'=>'22-01-13'), array('v'=>12))); return $array; } print json_encode(test());
Ваш json-код будет больше похож:
{ "cols": [ {"type": "string"}, {"type": "string"}, {"type": "string"} ], "rows": [ {"c":[{"v":"20-01-13"}, {"v":22} ]}, {"c":[{"v":"21-01-13"}, {"v":26} ]}, {"c":[{"v":"22-01-13"}, {"v":12} ]} ] }
Это может немного запоздать, но в любом случае, вот что сработало для меня (необходимо создать барчер).
Получить код сервера, чтобы вернуть строку json, представляющую массив, например, что-то вроде:
[{ "score": 12, "subject": "Computer Graphics" }, { "score": 65, "subject": "Entreprenuership" }, { "score": 82, "subject": "C++Programming" }]
Разберите строку, используя eval() или JSON.parse() чтобы получить объект JavaScript.
var chartData = JSON.parse(jsonStringFromServer);
Создайте объект DataTable как таковой:
var dTable = new google.visualization.DataTable();
Добавить столбцы в dataTable:
dTable.addColumn('string','Subject'); dTable.addColumn('number','Score'); //more columns if needed...
chartData массив javascript ( chartData ) и для каждого объекта в массиве добавьте новую строку в dataTable :
for(i=0;i<chartData.length;i++){ var currentObj = chartData[i]; dTable.addRow([currentObj.subject,currentObj.score]); } //set options for the chart eg title, width etc // create the chart ...
это должно выглядеть так:
array(10) { [0]=> array(2) { [0]=> string(2) "en" [1]=> int(104) } [1]=> array(2) { [0]=> string(0) "" [1]=> int(70) } [2]=> array(2) { [0]=> string(2) "zh" [1]=> int(13) } [3]=> array(2) { [0]=> string(2) "ru" [1]=> int(10) } ...
тогда
var data = google.visualization.arrayToDataTable(<?php echo json_encode($our_array); ?>); var chart = new google.visualization.PieChart(document.getElementById('someId')); chart.draw(data, options);