绘制实时MySQL数据

Question

我有下面的代码，它从数据库中获取值，并做一个简单的行图(警报响应时间与UTC时间)。它在静态时工作得很好，但现在我想要以“实时”的方式获取数据(只是为了测试它，例如，每2秒获得一个元素，即2000毫秒)。下面是以静态方式工作的代码：

 <?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM data";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<table><tr><th>User</th><th>Zulu</th><th>Server Time</th><th>Sample</th><th>Response Time</th></tr>";
     // output data of each row
    $dataset1 = array();
    while($row = $result->fetch_assoc()) {
        echo "<tr><td>" . $row[""]. "</td><td>" . $row[""]. "</td><td>" . $row[""]. "</td><td>" . $row[""]. "</td><td>" . $row[""]. "</td></tr>";
        $dataset1[] = array(floatval($row[""]),intval($row[""]));
    }
    echo "</table>";
} else {
     echo "0 results";
}

$conn->close();
?>

正如我们所看到的，数据存储在$dataset1变量中，然后我只有一个简单的脚本来绘制它：

    <script>
        //put array into javascript variable
        var dataset1 = <?php echo json_encode($dataset1); ?>;
        var data = [
                    {
                        data: dataset1,
                    }    
                    ];
                    var options = {
                    };
        $(function () {
             $.plot($("#placeholder"), data,options);
        });
</script>

我的问题是：，我怎么能用这个$dataset1“玩具”来每2000毫秒绘制一次？。

我得到的是：

​

Answer 1

如果您希望每2秒使用一次.setTimeout()，那么.setInterval()可能是不准确的。

您可能需要在getData函数的每个调用上设置这个星期才能得到要坚持的值。最好的方法是将它们存储在传递给函数的元素中。

我需要你发布你的代码，如果你想让我测试它，并为它创建一个JS小提琴。

(function($){

    $(function(){  //document.ready

    });

    (function getData(element){

            var xval = xval ? xval : 0;
            var yVal1 = Math.floor(Math.random()*11);
            var yVal2 = Math.floor(Math.random()*11);
            var datum1 = [xVal, yVal1];
            var datum2 = [xVal, yVal2];
            var data = data ? data : [[],[]];              
            var plot = $.plot(element, data);
            data[0].push(datum1);
            data[1].push(datum2);
            if(data[0].length>10){
                data[0] = data[0].splice(1);
                data[1] = data[1].splice(1);
            }
            xVal++;
            plot.setData(data);
            plot.setupGrid();
            plot.draw();
        }
            setTimeout(function(){
                getData(element);
            }, 2000);

    })($('#chart4'));



})(jQuery);