18.04.2014, 15:50
|
Профессор
|
|
Регистрация: 25.02.2010
Сообщений: 218
|
|
Google Chart - не получается построить график из данных приходящих через json
Строю графики через гугл чарт, при чём когда ему через пхп пихал массив то всё ок, а через json просит упаковать данные в совершенно непонятный формат. Уже 2 суток пробую создавать различные массивы, и двухмерные и с индексами, что только не пробовал... Внятных примеров нигде не нашёл.
Вот инструкция
https://developers.google.com/chart/..._example?hl=fr
В ней он пишет что данные должны выглядеть как то так:
{
"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}]}
]
}
причём что за "с" что за "v" и "f" зачем он их так нумерует никак не врубаюсь.
Когда я задаю ему вручную график вот так:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Дата');
data.addColumn('number', 'Yandex');
data.addColumn('number', 'Google');
data.addColumn('number', 'Mail');
data.addRows([
['24.05.2014', 3,6,8],
['25.05.2014', 1,2,7],
['25.05.2014', 1,2,7],
]);
всё работает круто.
Пробовал не через json а через обычный текст пихать ему те же данные, но тоже не прокатывает.
В общем, нужен пример как на стороне php упаковать колонки и столбцы, так, чтобы гугл схавал. Так как я перепробовал миллион вариантов, и кучу раз пересохранял и переписывал, всё вернулось к исходному коду, обычному массиву с данными и какой то конкретный пример привести не могу(
Я в отчаянии , помогите пожалуйста разобраться
|
|
18.04.2014, 16:12
|
Профессор
|
|
Регистрация: 25.02.2010
Сообщений: 218
|
|
Вот сконструировал пример php части
$cols= array('Дата'=>'string', 'Google'=>'number', 'Яндекс'=>'number','Mail'=>'number');
$outRows[0]=array('24.05.2014', 5, 7,9);
$outRows[1]=array('25.05.2014', 6, 8,10);
$dataTable = json_encode(array(
'cols' => $cols,
'rows' => $outRows
), JSON_NUMERIC_CHECK);
echo $dataTable;
И вот код js+html части
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var json = $.ajax({
url: 'test.php',
dataType: 'json',
async: false,
}).responseText;
var data = new google.visualization.DataTable(json);
var options = {
title: '',
is3D: 'true',
width: 800,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 1280px; height: 500px;"></div>
Выдаёт ошибку "Table has no columns."
Делал по примеру http://www.daniweb.com/web-developme...-chart-problem
Последний раз редактировалось FRIE, 18.04.2014 в 17:03.
|
|
18.04.2014, 17:36
|
Профессор
|
|
Регистрация: 15.03.2014
Сообщений: 561
|
|
|
|
18.04.2014, 17:56
|
Профессор
|
|
Регистрация: 25.02.2010
Сообщений: 218
|
|
Мог бы ты написать более понятно? я не понимаю что это за формат такой, как его реализовать..
{
cols: [{id: 'A', label: 'NEW A', type: 'string'},
{id: 'B', label: 'B-label', type: 'number'},
{id: 'C', label: 'C-label', type: 'date'}
],
rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}]},
{c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}]},
{c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}]}
],
p: {foo: 'hello', bar: 'world!'}
}
Вот у меня есть такие данные для построения line chart.
Rows
['24.05.2014', 3,6,8],
['25.05.2014', 1,2,7],
['25.05.2014', 1,2,7],
Cols
('string', 'Дата');
('number', 'Yandex');
('number', 'Google');
('number', 'Mail');
Как они будут выглядеть в этой невероятной конструкции приведённой выше?
Последний раз редактировалось FRIE, 18.04.2014 в 18:02.
|
|
18.04.2014, 18:14
|
Профессор
|
|
Регистрация: 15.03.2014
Сообщений: 561
|
|
Сообщение от FRIE
|
Мог бы ты написать более понятно? я не понимаю что это за формат такой, как его реализовать..
|
Обычный JSON. Там по ссылке все параметры подробно описаны.
Сообщение от FRIE
|
Вот у меня есть такие данные для построения line chart.
Rows
['24.05.2014', 3,6,8],
['25.05.2014', 1,2,7],
['25.05.2014', 1,2,7],
Cols
('string', 'Дата');
('number', 'Yandex');
('number', 'Google');
('number', 'Mail');
Как они будут выглядеть в этой невероятной конструкции приведённой выше?
|
Как-то так:
{
'cols': [
{'label':'Дата', 'type':'string'},
{'label':'Yandex', 'type':'number'},
{'label':'Google', 'type':'number'},
{'label':'Mail', 'type':'number'}
],
'rows': [
{'c':[{'v':'24.05.2014'},{'v':3},{'v':6},{'v':8}]},
{'c':[{'v':'25.05.2014'},{'v':1},{'v':2},{'v':7}]},
{'c':[{'v':'25.05.2014'},{'v':1},{'v':2},{'v':7}]}
]
}
|
|
18.04.2014, 18:55
|
Профессор
|
|
Регистрация: 25.02.2010
Сообщений: 218
|
|
С колонками получилось! ))
А вот со строками не очень понятно, как создать такой массив.
Делаю так
$outRows[0]=array('c'=>array('24.05.2014',5,8,5));
$outRows[1]=array('c'=>array('25.05.2014',2,4,4));
Получается вот так
"rows":[{"c":["24.05.2014",5,8,5]},{"c":["25.05.2014",2,4,4]}]}
Добиться такого варианта как в вашем примере никак не получается..
|
|
18.04.2014, 19:03
|
Профессор
|
|
Регистрация: 15.03.2014
Сообщений: 561
|
|
Сообщение от FRIE
|
Добиться такого варианта как в вашем примере никак не получается..
|
Как-то так:
$outRows[0]=array('c'=>array(array('v'=>'24.05.2014'), array('v'=>5), array('v'=>8), array('v'=>5)));
|
|
18.04.2014, 19:07
|
Профессор
|
|
Регистрация: 25.02.2010
Сообщений: 218
|
|
О, да!!!! ЕЕЕЕЕЕ.
Спасибо добрый человек, левел твоей кармы стремительно вырос вверх!!!
я счастлив
|
|
|
|