2010-09-25 19 views
25

Vorrei costruire un grafico di dati in tempo reale basata sul web e sto guardando le diverse opzioni come:Tempo reale grafico dei dati

  • Html5 tela
  • librerie JS con il supporto grafico di tale come Extjs

In tempo reale intendo, sia il client che esegue il polling del server web che ogni secondo o l'utilizzo di reverse ajax; il server invia i dati al client quando disponibili.

Potete raccomandare per favore?

+1

ciò che è in tempo reale? Ogni giorno, ora, anno, millisecondo? Cosa mostra il grafico? Indici azionari, wheater, tornado, luoghi di persone? –

+0

dovrebbe essere configurabile, o il client che esegue il polling del server dice ogni secondo o tramite reverse ajax, il server spinge i dati al client quando disponibile ... – ken

+0

si dovrebbe controllare questo post http://www.techrepublic.com/blog/ five-apps/create-real-time-graphs-with-these-five-free-web-app-app/ – pedrorijo91

risposta

14

È possibile considerare l'utilizzo di Flot, una libreria di stampa open source basata su jQuery.

Suppongo che in tempo reale intendi che il grafico si aggiorni automaticamente. Di seguito è come il codice potrebbe apparire come se si dovesse andare a prendere e riportare i dati utilizzando AJAX polling ad intervalli di 1 secondo:

function fetchData() { 
    $.ajax({ 
     url:  'json_fetch_new_data.php', 
     method: 'GET', 
     dataType: 'json', 
     success: function(series) { 
     var data = [ series ]; 

     $.plot($('#placeholder'), data, options); 
     } 
    }); 

    setTimeout(fetchData, 1000); 
} 

Assicuratevi di controllare il seguente demo per vederlo in azione (clicca sul pulsante "Sondaggio per dati"):

per ulteriori informazioni sul Flot:

14

C'è anche SmoothieCharts che è stato progettato più per questo caso d'uso.

+0

SmoothieCharts è ottimo, sebbene mostri solo una breve finestra scorrevole delle serie temporali. Devo ancora trovare qualcosa che assomigli a SmoothieCharts ma comprime l'asse orizzontale man mano che le serie temporali aumentano (assicurando che le serie temporali complete vengano sempre visualizzate, indipendentemente da quanto grande sarà). – Peter

+1

Ho provato Smoothiecharts, ed è proprio quello di cui avevamo bisogno per la visualizzazione in tempo reale di dati dinamici su strip chart. Wow - così facile da implementare e funziona su FF Chrome IE. –

Problemi correlati