За основу взято это: Creating Material Line Charts
Есть выборка из БД (дата, цена1, цена2, цена3):
1.
2.
3.
4.
5.
6.
7.
$data = array(
array('2015-05-02 22:51:54', 37.8, 80.8, 41.8),
array('2015-05-03 12:33:16', 30.9, 69.5, 32.4),
array('2015-05-05 00:27:10', 28.3, 79.5, 33.4),
array('2015-05-12 16:11:33', 25.7, 69.5, 34.4),
array('2015-06-03 22:22:44', 32.1, 79.5, 22.4),
)
Для первоначальной проверки делаю всё ручками и это замечательно работает:
1.
2.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div" style="width: 1000px; height: 400px; background-color: aqua"></div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Дата');
data.addColumn('number', '#1');
data.addColumn('number', '#2');
data.addColumn('number', '#3');
var arr = [
[new Date(2015, 4, 2, 22, 51, 54), 37.8, 80.8, 41.8],
[new Date(2015, 4, 3, 12, 33, 16), 30.9, 69.5, 32.4],
[new Date(2015, 4, 5, 0, 27, 10), 28.3, 79.5, 33.4],
[new Date(2015, 4, 12, 16, 11, 33), 25.7, 69.5, 34.4],
[new Date(2015, 5, 3, 22, 22, 44), 32.1, 79.5, 22.4],
]
data.addRows(arr);
var options = {
title: 'Супер график',
subtitle: 'цена указана в руб.',
hAxis: {
title: 'Дата'
},
vAxis: {
title: 'Цена'
}
};
var chart = new google.charts.Line(document.getElementById('chart_div'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
График вырисовывается.
А вот теперь надо передать данные из php в javascript. И все бы ничего, конструкция типа <?=json_encode($data)?> спасает. Но вроде бы как даты передаются так: new Date() . И надо малость пересобрать массив.
Разбираю строку с датой 2015-05-02 22:51:54 и пересобираю её в new Date(2015, 4, 2, 22, 51, 54) . 4 вместо 05 потому что месяцы считаются от 0, а не от 1.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Дата');
data.addColumn('number', '#1');
data.addColumn('number', '#2');
data.addColumn('number', '#3');
var arr = <?=json_encode($data)?>;
var re = /(\d{4})-(\d{2})-(\d{2})\s(\d{2}):(\d{2}):(\d{2})/g;
var i = 0;
for (i; i < arr.length; i++) {
arr[i][0] = arr[i][0].replace(re, function ($0, $1, $2, $3, $4, $5, $6) {
return (new Date($1, $2 - 1, $3, $4, $5, $6));
});
};
data.addRows(arr);
var options = {
title: 'Супер график',
subtitle: 'цена указана в руб.',
hAxis: {
title: 'Дата'
},
vAxis: {
title: 'Цена'
}
};
var chart = new google.charts.Line(document.getElementById('chart_div'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
И вроде бы все норм. Вывожу через console.log пересобранный массив и в нем, на месте где было 2015-05-02 22:51:54 теперь красуется Sat May 02 2015 22:51:54 GMT+0600 (Уральское время (зима)) - значит проканало. Но дальше ошибка (см. прикрепленное изображение). И график не рисуется. Целый день бился. Пришлось даже английский свой вспомнить.
Если данные просто числа, без дат, то все норм, а с датами - беда.
И еще есть одно но, которое я тоже не понимаю. Если взять первый пример и поменять порядок строк у входных данных, то и график поменяется, а этого по идее быть не должно. Какая тебе разница в каком порядке я ставлю точки на графике, они все равно займут только те места, которые надо, но с Goole Charts это не так. Или я чего-то недопонял.
Есть специалисты?
Если у кого-то есть опыт построения графиков с помощью другой библиотеки, я рад выслушать. Только примерчик бы. А то я не программист, у меня недели уходят с чем-н разобраться. |
