Question

我有一个Arduino通过以太网盾每秒通过AJAX打印出一个值。我想在Flot中绘制此值。这需要将值放在像这样的JSON格式

中

[[epochtimestamp, value], [epochtimestamp, value]]

所以我想知道你是否可以帮助我使用JavaScript / AJAX（或PHP，如果你认为合适）每秒获取此值并将其添加到.txt文件中的JSON（用于存储以前的值）），因此Flot可以读取所有值并创建这些值的基于时间的图表，但每秒通过AJAX更新图形。

这是每秒钟都需要发生的基本过程。

Arduino更新价值（我已经完成了这一步）
Javascript或PHP文件，它将此值添加到带有时间戳的JSON
更新并更新新值。

这是我已经开始的一些代码，但它必须每秒都被AJAX调用，并且不会完成整个工作。

<?php
$file    = 'data.txt';
$webpage = 'test.txt';
$t       = time(); // Open the file to get existing content 
$current = file_get_contents($file);
$data    = file_get_contents($webpage);
// Append a new person to the file 
if ($current < 1) {
    $current .= "[[" + $t + "," + $data + "]";
} else {
    $current .= ", " + "[" + $t + "," + $data + "]";
} // Write the contents back to the file 
file_put_contents($file, $current);
echo $current;
?>

我不确定使用Javascript / AJAX会更容易吗？

Answer 1

看看flot real-time updating example.

的来源

您可以通过浏览器中的AJAX调用PHP脚本，您的客户端代码应如下所示。

// Initialize your empty plot
var plot = $.plot("#myPlot", [], {
  series: {
    shadowSize: 0 // Drawing is faster without shadows
  },
  yaxis: {
    min: 0,
    max: 100
  },
  xaxis: {
    show: false
  }
});

function update() {
    // Make an ajax call to your script to get data provided by your script
    // Which reads that data.txt from Arduino.
    $.ajax({
        url: "yourhost/yourscript.php",
        context: document.body
    }).done(function(response) {
        // Get the ajax response
        data = response;

        // If data is not null, set your plot's data.
        if (data != null)
            plot.setData(data);


        // Draw the plot.
        plot.draw();

        // Re-invoke update.
        update();
    });
}

// Initial call to the update func.
update();

Ajax为JSON添加值，每秒都要绘制成图形

1 个答案: