Zaktualizuj wykres Google w czasie rzeczywistym za pomocą komety

Question

Chcę użyć wykresu Google do utworzenia wykresu słupkowego, który będzie aktualizowany w czasie rzeczywistym. Po załadowaniu strony przez użytkownika chcę wyświetlić bieżące wyniki. Ale jak tylko dane w mojej bazie danych ulegną zmianie, chciałbym wprowadzić te zmiany do klienta i zaktualizować wykres.

Oto przykład wykres słupkowy ze strony Wykresy 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> 

Chyba mogę użyć Ajax-Request do ściągania danych co kilka sekund i przerysować wykres. Ale może brakuje jakiejś metody inbuild w Google Charts. Dużo czytałem także o Comet, ale nigdy nie wdrożyłem tej koncepcji.

Czy ktoś inny napotkał ten problem?

Answer 1

Wdrażanie AJAX na zegar jest najprostszym rozwiązaniem:

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

Korzystanie komety usługę jest nieco bardziej skomplikowany w realizacji, gdyż wymaga utworzenia czegoś podobnego Socket.Io w JavaScript i na serwerze.

Korzystanie z usługi Comet gwarantuje najświeższe dane na wykresie przez cały czas, podczas gdy AJAX jest prostszy w implementacji. Comet wymaga utrzymywania aktywnego połączenia z serwerem, podczas gdy AJAX tworzy wiele niezależnych żądań.