转换地段图，使其以 60 秒的间隔动态更新

我有一个.php页面，通过查询我的数据库来呈现折线图Flot图表。我希望在创建一些 ajax（或其他）代码以每 60 秒动态更新一次它方面得到一些帮助。以下是我所拥有的。提前感谢：）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#placeholder { width: 450px; height: 200px; }
</style>
<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="flot/jquery.js"></script>
<script type="text/javascript" language="javascript" src="flot/jquery.flot.js"></script>
<?php
    $server = "myserver:1234";
    $user="dbuser";
    $password="userpass";  
    $database = "dbname";
    $connection = mysql_connect($server,$user,$password);
    $db = mysql_select_db($database,$connection);
    $query = "SELECT X, Y FROM listener_incr";
    $result = mysql_query($query);        
    $i = -60;
    while($row = mysql_fetch_assoc($result))
    {
        $dataset1[] = array($i,$row['Y']);
        $i++;
    }
    $final = json_encode($dataset1,JSON_NUMERIC_CHECK);
?>  
<script type="text/javascript">
var d1 = <?php echo $final; ?>;
$(document).ready(function () {
    $.plot($("#placeholder"), [
    { 
    label: "Number of items", data: d1, color: "#FB0026"}
    ], {
    xaxis: { show: true, axisLabel: "1hr", ticks: 6 },
    yaxis: { show: true, axisLabel: "", ticks: 12, min: 0, tickDecimals: 0, position: 1 }
    }
    );
});
</script>
</head>
<body>
    <div id="placeholder"></div>
</body>
</html>

下面是一个示例，但它使用随机数生成而不是数据库 dip。

有两种方法可以做到这一点

解决方案 1

*1.*如果您只想动态刷新页面的图表部分，请执行以下操作，

1.1.创建一个PHP页面（例如chart-data.php），它从数据库获取数据并返回你编码的json。

只是为了在您的代码中看到它清晰

<?php
    /*the code here has not been modified, it is used 
          as found from your example*/
    $server = "myserver:1234";
    $user="dbuser";
    $password="userpass";  
    $database = "dbname";
    $connection = mysql_connect($server,$user,$password);
    $db = mysql_select_db($database,$connection);
    $query = "SELECT X, Y FROM listener_incr";
    $result = mysql_query($query);        
    $i = -60;
    while($row = mysql_fetch_assoc($result))
    {
        $dataset1[] = array($i,$row['Y']);
        $i++;
    }
    $final = json_encode($dataset1,JSON_NUMERIC_CHECK);
echo $final;
?>

1.2.在你的JS代码中添加一个AJAX请求，

/*it is not necessary to create a new document ready function, you can use the document ready function you already have in your example. Just place the setInterval code at the bottom of your document ready function*/
$(document).ready(function () {      
setInterval(function(){
        $.ajax({
            dataType:'json',  /*to avoid calling JSON.parse(data) in your callback function*/
            url: '/chart-data.php',
            success: function (data) {
console.log(data);//as mentioned in comments
                //1.either call plot again 
/*calling plot as seen in your code - start*/
                var d1 = data;/* JSON.parse(data) */
                $.plot($("#placeholder"), [{
                    label: "Number of items",
                    data: d1,
                    color: "#FB0026"
                }], {
                    xaxis: {
                        show: true,
                        axisLabel: "1hr",
                        ticks: 6
                    },
                    yaxis: {
                        show: true,
                        axisLabel: "",
                        ticks: 12,
                        min: 0,
                        tickDecimals: 0,
                        position: 1
                    }
                });
/*calling plot as seen in your code - end*/
                /*      
                //2. or just redraw, as found in http://stackoverflow.com/questions/6024474/refresh-reload-flot-in-javascript
    var newData = [[0,2],[1,3],[2,5]];
    plot.setData(newData);
    plot.setupGrid(); //only necessary if your new data will change the axes or grid
    plot.draw();
    */
            }//ajax props
        });//ajax
      },60000);//interval
    });//document ready

解决方案 2

*2.*如果您在渲染页面时从 php 填充 js 数据，正如您已经编码的那样，您需要每 60 秒从 js 或 php 刷新一次页面，如下所示：

.JS

setInterval(function(){
   window.location.reload(true);
    },60000);

或

.PHP

<meta http-equiv="refresh" content="60" >

相关内容

最新更新

热门标签：