CanvasJS:使用data.php、json encode和ajax(带宽计)制作动态图表
CanvasJS: Making a chart dynamic with data.php, json encode and ajax(bandwidth meters)
首先,我试图从使用json编码来响应数据点的data.php文件解析数据。每次请求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>
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 动态分配GA增强型电子商务跟踪器
- onkeyup无法动态创建多个文本区域
- 使用javascript将动态表从一个html页面打印到另一个html页
- 如何使Javascript动态html表及其上的事件
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- 如何使用javascript从主svg对象动态创建svg视图框
- 试图在引导模式内动态生成图表,得到offsetWidth错误
- 通过在Dojo mobile ViewController.openExternalView中动态更改打开同一外部视图的
- 如何在Google柱状图中动态添加行/列
- 困在逻辑中试图定位动态的东西
- 在动态创建的元素上获取对特定选择器的引用
- 如何动态插入jquery代码
- 使用Google Visualization动态调用构造函数
- 使用jQuery动态添加表并在其中动态添加行
- d3基于用户选择动态更新节点
- D3.js动态数据/带宽标签为y轴
- CanvasJS:使用data.php、json encode和ajax(带宽计)制作动态图表