CanvasJS:使用 data.php、json 编码和 ajax(带宽米)使图表动态化
CanvasJS: Making a chart dynamic with data.php, json encode and ajax(bandwidth meters)
首先,我正在尝试解析 data.php 文件中的数据,该文件使用 json 编码来回显数据点。每次请求 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}]
提前感谢您提供的任何帮助。
为了以这种方式更新图表,您只需创建一次图表(在 ajax 请求之外)并每秒通过 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>
首先,我正在尝试解析 data.php 文件中的数据,该文件使用 json 编码来回显数据点。每次请求 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}]
提前感谢您提供的任何帮助。
为了以这种方式更新图表,您只需创建一次图表(在 ajax 请求之外)并每秒通过 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>