Построение графика (Flot, php)
Здравствуйте. Имеется проблема в построение графика с помощью flot. На сервере пытаюсь представить данные в следующем виде (взято с https://eax.me/flot/).
$date[] = array('label' => $name, 'data' => [$someData]);
// (Дата в формате UTC => double)
//Где $someData - массив типа '1515790800' => 44.2
После всё это передаю в JS:
echo json_encode($date);
В результате получается что-то типа:
[{"label":"Name 1","data":[{"1515704400":"54.3","1515790800":"54.7","1515963600":"54.7","1516050000":"54.9","1516136400":"54.5","1516222800":"54.4","1516309200":"54.4","1516395600":"54.7","1516482000":"54.3","1516568400":"53.9","1516654800":"53.9","1516741200":"53.8"}]},{"label":"Name 2","data":[{"1515704400":"54.3","1515790800":"54.8","1515963600":"54.8","1516050000":"54.7","1516136400":"53.2","1516222800":"53.7","1516309200":"53.6","1516395600":"54.9","1516482000":"54.7","1516568400":"54.3","1516654800":"53.9","1516741200":"53.9"}]}]
В JS обрабатываю всё это следующим образом:
$.ajax({
url: "getData.php",
dataType: "json",
success: function(responce){
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
mode: "time",
timeformat: "%y/%m/%d",
}
};
$.each(responce, function(key, value){
});
$.plot("#placeholder", responce, options);
}
});
});
В результате flot выводит только то, что указано в параметре 'label', кто-нибудь может подсказать в чём причина и как это исправить? У меня есть смутное предположение, что flot не видит параметр 'data' в передаваемом JSON`e, потому что data - объект, а не массив, как указано в источнике. Если это так, то каким образом можно не перегонять часть массива 'data' в JSON? Заранее спасибо за помощь.
Обратите внимание на документацию к Flot
The data is an array of data series:
[ series1, series2, ... ]
A series can either be raw data or an object with properties. The raw data format is an array of points:
[ [x1, y1], [x2, y2], ... ]
E.g.
[ [1, 3], [2, 14.01], [3.5, 3.14] ]
Note that to simplify the internal logic in Flot both the x and y values must be numbers (even if specifying time series, see below for how to do this). This is a common problem because you might retrieve data from the database and serialize them directly to JSON without noticing the wrong type. If you're getting mysterious errors, double check that you're inputting numbers and not strings.
Где сказано, что передаваемые данные должны содрежать массив объектов (серий), а сами данные серии должны иметь вид массива из двух значений [x,y]. Также обращается внимание, что данные должны быть числами, а не строками (хотя вроде и со строками работает).
Так что да, вам необходимо сформировать данные в корректном формате. Можете сделать это как на стороне пхп, так и на стороне клиента. Первое пожалуй, будет удобнее.
var data = [{"label":"Name 1","data":[[1515704400,54.3],[1515790800,54.7],[1515963600,54.7],[1516050000,54.9],[1516136400,54.5],[1516222800,54.4],[1516309200,54.4],[1516395600,54.7],[1516482000,54.3],[1516568400,53.9],[1516654800,53.9],[1516741200,53.8]]},{"label":"Name 2","data":[[1515704400,54.3],[1515790800,54.8],[1515963600,54.8],[1516050000,54.7],[1516136400,53.2],[1516222800,53.7],[1516309200,53.6],[1516395600,54.9],[1516482000,54.7],[1516568400,54.3],[1516654800,53.9],[1516741200,53.9]]}];
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
mode: "time",
timeformat: "%y/%m/%d",
}
};
$.plot("#chart", data, options);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.time.js"></script>
<div id="chart" style="width: 600px; height: 200px;">
</div>Изменение формата на стороне клиента может быть в следующем виде:
var data = [{
"label":"Name 1",
"data":[{"1515704400":"54.3","1515790800":"54.7","1515963600":"54.7"}]
},{
"label":"Name 2",
"data":[{"1515704400":"54.3","1515790800":"54.8","1515963600":"54.8",}]
}
];
$.each(data, function(idx, v){
v.data = $.map(v.data[0], function(v,k){ return [[ +k, +v]]})
});
console.log(data);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>для пхп, например так
$someData = [ 1515704400 => 54.3, 1515790800 => 54.7, 1515963600 => 54.7, 1516050000 => 54.9 ];
$data = [
'label' => 'name1',
'data' => array_map(function($k, $v){ return [$k, $v];}, array_keys($someData), $someData)
];
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
- Почему SERVER_ADDR имеет не тот IP 50338 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31948 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26311 visits
- Как через css изменить цвет png изображения? 11766 visits
- Blob video url download 11314 visits
- Php curl запрос через прокси с авторизацией 10722 visits
- Работа с captcha vk api 9518 visits
© "hostciti.net" 25.3.2026 | 12:34