Ajax爲JSON添加值，每秒鐘繪製圖形

Question

我有一個Arduino通過Ethernet Shield通過AJAX每秒打印出一個值。我想在Flot中繪製這個值。這要求值被放在一個JSON格式像這樣

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

所以我在想，如果你能幫助我使用JavaScript/AJAX（或PHP，如果你認爲它是合適的），以每秒得到這個值，將它添加到.txt文件（用於存儲以前的值）內的JSON中，因此Flot可以讀取所有值並創建這些值的基於時間的圖形，但每秒都會通過AJAX更新圖形。

以下是每秒需要發生的基本過程。

1. Arduino的更新值（我已經做了位），它到JSON使用時間戳
2. 海軍報的更新將該值和圖表的新值
3. Javascript或PHP文件。

下面是我已經開始的一些代碼，但它必須每秒由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

看看源海軍報的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();