Come tracciare in tempo reale il grafico (istogramma) utilizzando i dati ottenuti in un file di testo

StackOverflow https://stackoverflow.com/questions/1728937

Domanda

Ho un continuo generato i dati (file di testo) generato da un programma sul server.Voglio tracciare i dati di un grafico in tempo reale, proprio come powergrid fa.Questo è stato il mio approccio:

Come vengono generati i dati continuamente sul server in un file di testo, ho scritto uno script PHP che legge il file(get_file_contents), le uscite, i punti di dati e tracciare il grafico utilizzando sparkline jQuery plugin.Ma il problema è che non legge il file tutto in una volta.Inoltre, il file di testo è in continua crescita.Qualcuno può suggerirmi un metodo migliore?

È stato utile?

Soluzione

Come stai parlando con un Javascript tramando soluzione è effettuare le seguenti operazioni:

  • al caricamento della pagina, è possibile creare il grafico, attraverso la lettura di file di testo completo e ricordando la sua dimensione.
  • dopo che la pagina è caricata, è creare una funzione Javascript che regolarmente sondaggi di uno specifico script sul server tramite AJAX-tecniche (XMLHttpRequest e passa l'ultima dimensione del file di testo come parametro.
  • il polling script che prende il filesize parametro, si apre il file di testo, salta il file finché non si raggiunge il punto dal quale ultima leggere il file (filesize-parametro).
  • il polling script restituisce tutti i dati disponibili dal filesize alla fine del file e il nuovo filesite
  • Javascript legge in AJAX risposta e aggiunge il necessario tracciare i punti per il grafico
  • è quindi possibile avviare più di polling script sul lato server con le nuove dimensioni del file come parametro

Questa procedura comporta server-side e client-side programming, ma può essere realizzato facilmente.

Il seguente è un esempio di polling script che richiede index parametro che indica lo script da quale grado di leggere il file di testo e restituisce un JSON con codifica elenco di trama e il nuovo indice puntatore.

// poll.php
$index = (isset($_GET['index'])) ? (int)$_GET['index'] : 0;
$file = fopen('path/to/your/file.txt', 'r');
$data = array(
    'index' => null,
    'data'  => array()
);
// move forward to the designated position
fseek($file, $index, SEEK_SET);
while (!feof($file)) {
    /*
     * assuming we have a file that looks like
     * 0,10
     * 1,15
     * 2,12
     * ...
     */
    list($x, $y) = explode(',', trim(fgets($handle)), 2);
    $data['data'][] = array('x' => $x, 'y' => $y);
}
// set the new index
$data['index'] = ftell($file);
fclose($file);

header('Content-Type: application/json');
echo json_encode($data);
exit();

Il corrispondente Javascript/jQuery frammento potrebbe essere:

// the jQuery code to poll the script
var current = 0;
function pollData() {
    $.getJSON('poll.php', { 'index': current }, function(data) {
        current = data.index;
        for (var i= 0; i < data.data.length; i++) {
            var x = data.data[i].x;
            var y = data.data[i].y;
            // do your plotting here
        }
    });
}
// call pollData() every 5 seconds
var timer = window.setInterval(pollData, 5000);

Si prega di prestare attenzione che questo è solo un esempio e che manca un controllo di errore (ad es.chiamate simultanee per pollData() nella stessa pagina sarà problematico).

Altri suggerimenti

Suona come si dispone la visualizzazione in parte ha funzionato.Se il set di dati è troppo grande per ri-calcolare, si potrebbe desiderare di guardare in tecniche per il mantenimento della incrementale istogrammi.Qui ci sono alcune carte che possono aiutare:

Prima di tutto, non vorrei generare il grafico a lato utente.Di semplici motivi:Non tutti hanno JavaScript abilitato (ok, dipende dal vostro gruppo target), e probabilmente non è molto veloce.

Dal momento che si sta già utilizzando PHP, vorrei, pertanto, consigliamo di utilizzare un pacchetto come pChart per la creazione di grafici sul lato server.Un altro effetto collaterale positivo di questo è che il pacchetto viene fornito con la cache, troppo.Questo, ad esempio, permettono di creare il grafico solo quando i dati del file di testo è cambiato (supponendo che si genera con PHP, troppo altrimenti si può semplicemente controllare se il file è stato modificato ogni volta che il tuo script PHP viene eseguito) e così risparmio un sacco di risorse ;)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top