Cập nhật Biểu đồ của Google trong thời gian thực với sao chổi

Question

Tôi muốn sử dụng Biểu đồ Google để tạo biểu đồ thanh được cập nhật trong thời gian thực. Khi người dùng tải trang, tôi muốn hiển thị kết quả hiện tại. Nhưng ngay sau khi dữ liệu trong cơ sở dữ liệu của tôi thay đổi, tôi muốn đẩy những thay đổi này cho khách hàng và cập nhật biểu đồ.

Dưới đây là một ví dụ biểu đồ thanh từ trang Charts 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> 

Tôi đoán tôi có thể sử dụng một Ajax Yêu cầu để kéo dữ liệu mỗi vài giây và vẽ lại bảng xếp hạng. Nhưng có thể có một số phương pháp inbuild trong Google Charts mà tôi đang thiếu. Tôi cũng đọc rất nhiều về Comet, nhưng tôi chưa bao giờ triển khai khái niệm đó.

Có ai khác đã gặp sự cố đó không?

Answer 1

Thực hiện AJAX trên một giờ là giải pháp đơn giản nhất:

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

Sử dụng một dịch vụ Comet là phức tạp hơn một chút để thực hiện, vì nó đòi hỏi phải thiết lập một cái gì đó giống như Socket.Io trong javascript và trên máy chủ của bạn.

Sử dụng dịch vụ Sao chổi sẽ đảm bảo dữ liệu mới nhất trong biểu đồ mọi lúc, trong khi AJAX đơn giản hơn để triển khai. Comet yêu cầu duy trì kết nối hoạt động với máy chủ của bạn trong khi AJAX thực hiện nhiều yêu cầu độc lập.