У меня есть данные, как показано ниже:
store 1 Store 2 store_id walk-ins walk-ins morning 20 25 noon 35 40 night 50 55 Существует 20 магазинов, в которые записываются значения каждой строки.
В документах Google Charts мне сообщается, что массив данных выглядит следующим образом:
var data = google.visualization.arrayToDataTable([ ['Stores', 'Store 1', 'Store 2', 'Store 3', 'Store 4', ... ], ['morning', 10, 24, 20, 32, 18, 5, ...], ['noon', 16, 22, 23, 30, 16, 9, ...], ['night', 28, 19, 29, 30, 12, 13, ...], ]);
Я получаю данные через скрипт PHP скрипта / сервера MySQL. Каким должен быть JSON? json_encode($data) из запроса MySQL возвращает следующее:
[{"store_name": "Store 1", "Time": "Morning", "count": "17"}, …]
но диаграмма не загружается и дает мне сообщение « Table has no columns ».
Я загружаю JSON следующим образом:
var url = '/url/updatedata.php?var=querytype'; jQuery.getJSON( url, function(Json) { // Create and populate the data table. var data = new google.visualization.DataTable(Json); ....
Какова структура JSON для столбчатой диаграммы столбцов?
Благодаря!
Оказалось, что сопоставление ваших данных оказалось довольно сложной задачей.
Например, у вас есть данные json:
var json = [ {"store_name":"Store 1","Time":"Morning","count":"10"}, {"store_name":"Store 1","Time":"Noon","count":"16"}, {"store_name":"Store 1","Time":"Night","count":"28"}, {"store_name":"Store 2","Time":"Morning","count":"24"}, {"store_name":"Store 2","Time":"Noon","count":"22"}, {"store_name":"Store 2","Time":"Night","count":"19"} ];
Я использую underscore.js для следующего кода. Его можно включить следующим образом:
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
Код отображения:
var header = _.chain(json).pluck("store_name").sort().uniq(true).value(); header.unshift("Stores"); var rows = _.chain(json) .groupBy(function(item) { return item.Time; }) .map(function(group, key) { var result = [key]; _.each(group, function(item) { result[_.indexOf(header, item.store_name)] = parseInt(item.count); }); return result; }) .value(); var jsonData = [header].concat(rows); // draw chart var data = google.visualization.arrayToDataTable(jsonData); chart.draw(data, options);
jsonData переменная jsonData выглядит так:
[["Stores", "Store 1", "Store 2"], ["Morning", 10, 24], ["Noon", 16, 22], ["Night", 28, 19]]
Вот ссылка на jsFiddle с вашей диаграммой .
Я знаю, что это старый пост, но в случае, если кому-то это нужно, вот формат Jsondata для использования столбчатого столбца Google из кода сервера.
{ "cols": [ { "id": "", "label": "title", "pattern": "", "type": "string" }, { "id": "", "label": "A", "pattern": "", "type": "number" }, { "type": "string", "role": "annotation", "p": { "role": "annotation" } }, { "id": "", "label": "B", "pattern": "", "type": "number" }, { "type": "string", "role": "annotation", "p": { "role": "annotation" } }, { "id": "", "label": "C", "pattern": "", "type": "number" }, { "type": "string", "role": "annotation", "p": { "role": "annotation" } }, { "id": "", "label": "D", "pattern": "", "type": "number" }, { "type": "string", "role": "annotation", "p": { "role": "annotation" } } ], "rows": [ { "c": [ { "v": "Categories", "f": null }, { "v": "10", "f": null }, { "v": "10", "f": null }, { "v": "20", "f": null }, { "v": "20", "f": null }, { "v": "30", "f": null }, { "v": "30", "f": null }, { "v": "50", "f": null }, { "v": "50", "f": null } ] } ] }