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毫秒进行一次PLOT？

这就是我得到的： Duplicated plot

Answer 1

如果你想每2秒钟一次，你应该使用.setTimeout（），因为.setInterval（）可能不准确。

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

如果您希望我测试并为其创建一个JS FIDDLE，我需要您 发布您的HTML代码 。

(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数据

1 个答案: