CanvasJS:使用data.php,json编码和ajax(带宽计量器)使图表动态化

第796章

首先,我正在尝试从使用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请求添加新的dataPoints,如下所示。

<!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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用JSON加载数据的canvasJS RangeArea图表

来自分类Dev

如何使用 JSON 数据创建 CanvasJS 图表?

来自分类Dev

使用ng-repeat在<div>内创建多个CanvasJS图表

来自分类Dev

如何使用jsp和CanvasJS在图形中显示信息?

来自分类Dev

计时器和计量器指标的分钟率表示什么?

来自分类Dev

CanvasJS 图表无法使用幻灯片/轮播容器正确呈现

来自分类Dev

动态确定要显示的饼图数量,并使用CanvasJS在单个页面上显示每个饼图

来自分类Dev

图表无法正确呈现,canvasjs

来自分类Dev

CanvasJS中的动态堆积列

来自分类Dev

CanvasJS与Excel兼容并制作图表吗?

来自分类Dev

渲染 Canvasjs 图表后更改 div 边框

来自分类Dev

canvasjs 不在图表中显示条形

来自分类Dev

如何在 canvasjs 图表上隐藏间隔?

来自分类Dev

使用MS SQL,AJAX,PHP和JSON从下拉列表中获取动态页面文本

来自分类Dev

使用php和mysql在两个日期之间的动态Google图表

来自分类Dev

使用 AJAX 和 JQuery 动态操作 JSON API 数据

来自分类Dev

使用PHP和AJAX更新JSON文件

来自分类Dev

使用 ajax、php 和 json 搜索表单

来自分类Dev

如何通过 DOM-Container 访问 canvasJS 图表

来自分类Dev

如何在 CanvasJS 图表中显示格式化的日期时间?

来自分类Dev

Cordova Framework7 使用 CanvasJS 导出图像

来自分类Dev

使用AJAX在Rails中更新了动态ChartJS图表

来自分类Dev

使用AJAX在Rails中更新了动态ChartJS图表

来自分类Dev

图形不与Jinja,Flask和CanvasJS一起显示

来自分类Dev

将CanvasJS中的json对象分配给javascript变量

来自分类Dev

如何使用JSON中的动态数据使用Google图表

来自分类Dev

jQuery ajax使用php json编码获取数据库结果

来自分类Dev

jQuery ajax使用php json编码获取数据库结果

来自分类Dev

如何在ajax响应中使用php获取编码json的值?

Related 相关文章

  1. 1

    使用JSON加载数据的canvasJS RangeArea图表

  2. 2

    如何使用 JSON 数据创建 CanvasJS 图表?

  3. 3

    使用ng-repeat在<div>内创建多个CanvasJS图表

  4. 4

    如何使用jsp和CanvasJS在图形中显示信息?

  5. 5

    计时器和计量器指标的分钟率表示什么?

  6. 6

    CanvasJS 图表无法使用幻灯片/轮播容器正确呈现

  7. 7

    动态确定要显示的饼图数量,并使用CanvasJS在单个页面上显示每个饼图

  8. 8

    图表无法正确呈现,canvasjs

  9. 9

    CanvasJS中的动态堆积列

  10. 10

    CanvasJS与Excel兼容并制作图表吗?

  11. 11

    渲染 Canvasjs 图表后更改 div 边框

  12. 12

    canvasjs 不在图表中显示条形

  13. 13

    如何在 canvasjs 图表上隐藏间隔?

  14. 14

    使用MS SQL,AJAX,PHP和JSON从下拉列表中获取动态页面文本

  15. 15

    使用php和mysql在两个日期之间的动态Google图表

  16. 16

    使用 AJAX 和 JQuery 动态操作 JSON API 数据

  17. 17

    使用PHP和AJAX更新JSON文件

  18. 18

    使用 ajax、php 和 json 搜索表单

  19. 19

    如何通过 DOM-Container 访问 canvasJS 图表

  20. 20

    如何在 CanvasJS 图表中显示格式化的日期时间?

  21. 21

    Cordova Framework7 使用 CanvasJS 导出图像

  22. 22

    使用AJAX在Rails中更新了动态ChartJS图表

  23. 23

    使用AJAX在Rails中更新了动态ChartJS图表

  24. 24

    图形不与Jinja,Flask和CanvasJS一起显示

  25. 25

    将CanvasJS中的json对象分配给javascript变量

  26. 26

    如何使用JSON中的动态数据使用Google图表

  27. 27

    jQuery ajax使用php json编码获取数据库结果

  28. 28

    jQuery ajax使用php json编码获取数据库结果

  29. 29

    如何在ajax响应中使用php获取编码json的值?

热门标签

归档