Question

我有一个.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>

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

Answer 1

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

解决方案1 

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

1.1。创建一个php页面（例如chart-data.php），它从db中获取数据并在编码时返回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" >

转换Flot Chart，使其以60秒的间隔动态更新

1 个答案: