绘制实时 MySQL 数据

Question

我有以下代码，它从数据库中获取值并绘制一个简单的折线图（对警报的响应时间与 UTC 时间）。它在静态时完美运行，但现在我想获取 "real time" 中的数据（只是为了测试它，例如每 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>

我的问题是：我如何 "toy" 使用此 $dataset1 每 2000 毫秒绘制一次？

这就是我得到的：

Answer 1

如果您希望每 2 秒执行一次，您应该使用 .setTimeout()，因为 .setInterval() 可能不准确。

您可能需要调整它以获取在每次调用 getData 函数时保留的值。最好的方法是以某种方式将它们存储在传递给函数的元素中。

我需要你 post 你的 HTML 代码 如果你想让我测试这个并创建一个 JS FIDDLE。

(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);

绘制实时 MySQL 数据

Plotting real time MySQL data

html

mysql

jquery

plot

flot