Aggiorna Google Chart in tempo reale con la cometa

Question

Desidero utilizzare Google Chart per creare un grafico a barre che viene aggiornato in tempo reale. Quando l'utente carica la pagina, voglio mostrare i risultati correnti. Ma non appena i dati nel mio database cambiano, vorrei spingere queste modifiche al client e aggiornare il grafico.

Ecco un esempio grafico a barre dalla pagina Grafici di Google:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn('number', 'Expenses'); 
    data.addRows([ 
     ['2004', 1000, 400], 
     ['2005', 1170, 460], 
     ['2006', 660, 1120], 
     ['2007', 1030, 540] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
    }; 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 
</script> 

Credo che avrei potuto usare un Ajax-Richiesta di tirare i dati ogni qualche secondo e ridisegnare il grafico. Ma forse c'è qualche metodo inbuild in Google Charts che mi manca. Ho letto molto anche su Comet, ma non ho mai implementato questo concetto.

Qualcun altro ha incontrato questo problema?

Answer 1

implementazione AJAX su un timer è la soluzione più semplice:

// using jQuery for simplicity, but you can implement in other libraries or vanilla javascript if you want 
function drawChart() { 
    var options = { 
     title: 'Company Performance', 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
    }; 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 

    function updateChart() { 
     $.ajax({ 
      url: 'path/to/data/source/', 
      data: {/* any parameters you need to pass to the server to get your data back */}, 
      dataType: /* text, json, XML, whatever your server returns */, 
      success: function (response) { 
       // use response to create/update DataTable 
       chart.draw(data, options); 
       // update the chart again in 2 seconds 
       setTimeout(updateChart, 2000); 
      }, 
      error: function (response) { 
       // handle errors 
      } 
     }); 
    } 
    updateChart(); 
} 

Utilizzando un servizio Comet è un po 'più complicato da implementare, in quanto richiede la creazione di qualcosa di simile Socket.Io in javascript e sul vostro server.

L'utilizzo di un servizio Comet garantisce sempre i dati più recenti nel grafico, mentre AJAX è più semplice da implementare. Comet richiede il mantenimento di una connessione attiva al server mentre AJAX effettua più richieste indipendenti.