javascript — CanvasJS: создание динамической диаграммы с использованием data.php, json encode и ajax (измерители пропускной способности)

Question

javascript — CanvasJS: создание динамической диаграммы с использованием data.php, json encode и ajax (измерители пропускной способности)

Перво-наперво, я пытаюсь проанализировать данные из файла data.php, который использует json encode для отображения точки данных. Точка данных обновляется каждый раз, когда запрашивается файл data.php, но не в серии точек данных. Вместо этого он просто изменяет значение времени и обновляет его содержимое y. Я не нашел работающего способа сделать php-файл эхо-серией точек данных и не обновить ни одного.

Затем диаграмма анализирует файл data.php, и он действительно показывает точку данных. НО я хочу обновлять эту диаграмму каждую секунду и добавлять новые точки данных при каждом обновлении, чтобы у меня был рабочий график пропускной способности.

Вот мой код:

index.php:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="canvasjs.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
$.getJSON("data.php", function (data_points) {
var dps = data_points
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
panEnabled: true,
animateEnabled: true,
data: [ {
type: "splineArea",
xValueType: "label",
y: "y",
dataPoints: dps } ]
});
chart.render();
});
});
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>

data.php:

<?

session_start();
session_destroy();
session_start();

$rx[] = @file_get_contents("/sys/class/net/wlan0/statistics/rx_bytes");
sleep(1);
$rx[] = @file_get_contents("/sys/class/net/wlan0/statistics/rx_bytes");

$rbps = $rx[1] - $rx[0];

$round_rx=round($rbps/1, 2);

$time=date("Y-m-d H:i:s");
$_SESSION['rx'] = $round_rx;
$data_points['label'] = $time;
$data_points['y'] = $_SESSION['rx'];

echo json_encode([$data_points]);

?>

Если кто-нибудь знает, как сделать эту карту динамичной, то, пожалуйста, помогите мне.
Пример вывода файла data.php (что он повторяет) выглядит следующим образом:

[{"label":"2015-09-12 21:34:12","y":1500}]

Заранее благодарю за любую предоставленную помощь.

1

ajax canvasjs javascript json php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Чтобы обновить диаграммы таким образом, вам нужно создать диаграмму только один раз (вне запроса ajax) и продолжать добавлять новые dataPoints через запрос ajax каждую секунду, как показано ниже.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
var chart = new CanvasJS.Chart("chartContainer", {

zoomEnabled: true,
panEnabled: true,
animateEnabled: true,
data: [ {
type: "splineArea",
xValueType: "label",
y: "y",
dataPoints: []
} ]

});

function updateChart(){
$.getJSON("data.php", function (data_points) {
for(var i = 0; i < data_points.length; i++){
chart.options.data[0].dataPoints.push(data_points[i]);
}

chart.render();
});
}

var updateInterval = 1000;

setInterval(function(){
updateChart()
}, updateInterval);

});

</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 500px;"></div>
</body>
</html>

1