0

データベースにクエリを実行して、ライン プロット フロット チャートをレンダリングする .php ページがあります。60 秒ごとに動的に更新する ajax (またはそれ以外の) コードを作成する際に、何らかの支援が必要です。以下は私が持っているものです。前もって感謝します：）

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

以下に例を示しますが、データベース ディップの代わりに乱数生成を使用します。

4

1 に答える 1

2

それを行うには2つの方法があります

解決策 1

* 1. *ページのグラフ部分のみを動的に更新する場合は、次のようにします。

1.1.db からデータをフェッチし、コーディングしたとおりに json を返す php ページ (例: chart-data.php) を作成します。

コードに見られるように明確にするためだけに

<?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 データを入力している場合は、既にコーディングしたように、js または php から 60 秒ごとに次のような方法でページを更新する必要があります。

JS

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

また

PHP

<meta http-equiv="refresh" content="60" >
于 2013-10-21T09:25:10.800 に答える