Ajax добавляет значение JSON для каждой диаграммы

Question

У меня есть Arduino через Ethernet-экран, каждый раз выдающий значение через AJAX. Я хотел бы рассчитать это значение в Flot. Это требует, чтобы значение положить в формате JSON, как этот

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

Так мне было интересно, если вы могли бы помочь мне использовать JavaScript/AJAX (или PHP, если вы думаете, что это уместно) каждый второй получить это значение и добавьте его в JSON внутри .txt-файла (используется для хранения предыдущих значений), поэтому Flot может считывать все значения и создавать временные диаграммы этих значений, но обновлять график каждую секунду через AJAX.

Вот основной процесс, который должен происходить каждую секунду.

1. Arduino обновления Значение (я сделал это немного)
2. Javascript или PHP-файл, который добавляет это значение в формате JSON к с меткой времени
3. обновления ФЛОТ и графы новое значение.

Вот какой-то код, который я начал, но его нужно будет вызывать 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.

Вы могли бы назвать свой PHP скрипт из браузера через AJAX, ваш клиентский код должен выглядеть следующим образом.

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