Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2014, 15:50
Профессор
Отправить личное сообщение для FRIE Посмотреть профиль Найти все сообщения от FRIE
 
Регистрация: 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 упаковать колонки и столбцы, так, чтобы гугл схавал. Так как я перепробовал миллион вариантов, и кучу раз пересохранял и переписывал, всё вернулось к исходному коду, обычному массиву с данными и какой то конкретный пример привести не могу(

Я в отчаянии , помогите пожалуйста разобраться
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2014, 16:12
Профессор
Отправить личное сообщение для FRIE Посмотреть профиль Найти все сообщения от FRIE
 
Регистрация: 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.
Ответить с цитированием
  #3 (permalink)  
Старый 18.04.2014, 17:36
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Вот тут описан формат данных для конструктора:
https://developers.google.com/chart/...ence#dataparam
Ответить с цитированием
  #4 (permalink)  
Старый 18.04.2014, 17:56
Профессор
Отправить личное сообщение для FRIE Посмотреть профиль Найти все сообщения от FRIE
 
Регистрация: 25.02.2010
Сообщений: 218

Сообщение от jsnb Посмотреть сообщение
Вот тут описан формат данных для конструктора:
https://developers.google.com/chart/...ence#dataparam
Мог бы ты написать более понятно? я не понимаю что это за формат такой, как его реализовать..

{
  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.
Ответить с цитированием
  #5 (permalink)  
Старый 18.04.2014, 18:14
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 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}]}
		]
}
Ответить с цитированием
  #6 (permalink)  
Старый 18.04.2014, 18:55
Профессор
Отправить личное сообщение для FRIE Посмотреть профиль Найти все сообщения от FRIE
 
Регистрация: 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]}]}


Добиться такого варианта как в вашем примере никак не получается..
Ответить с цитированием
  #7 (permalink)  
Старый 18.04.2014, 19:03
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Сообщение от FRIE Посмотреть сообщение
Добиться такого варианта как в вашем примере никак не получается..
Как-то так:
$outRows[0]=array('c'=>array(array('v'=>'24.05.2014'), array('v'=>5), array('v'=>8), array('v'=>5)));
Ответить с цитированием
  #8 (permalink)  
Старый 18.04.2014, 19:07
Профессор
Отправить личное сообщение для FRIE Посмотреть профиль Найти все сообщения от FRIE
 
Регистрация: 25.02.2010
Сообщений: 218

О, да!!!! ЕЕЕЕЕЕ.

Спасибо добрый человек, левел твоей кармы стремительно вырос вверх!!!

я счастлив
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск