Convert Flot Chart so that it dynamically updates at 60 second intervals

问题

I have a .php page that renders out a line plot Flot chart by querying my database. I would love some assistance in creating some ajax (or otherwise) code to dynamically update it every 60 seconds. Below is what I have. Thanks in advance:)

<!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 is an example but it uses random number generation instead of a database dip.

回答1:

There are two ways you can do that

SOLUTION 1

*1.*If you want to dynamically refresh only the chart part of your page then do the following,

1.1.create a php page (e.g. chart-data.php) which fetches data from db and returns json as you have coded.

just to make it clear as seen in your code

<?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.add in your js code an ajax request,

/*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

SOLUTION 2

*2.*If you are populating the js data from php while rendering the page, as you have already coded, you need to refresh your page every 60s from js or php with something like,

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

PHP

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

来源：https://stackoverflow.com/questions/19464576/convert-flot-chart-so-that-it-dynamically-updates-at-60-second-intervals

标签

javascript

ajax

flot