Actualizar Google Chart en tiempo real con el cometa

Question

Quiero utilizar Google Chart para crear un gráfico de barras que se actualiza en tiempo real. Cuando el usuario carga la página, quiero mostrar los resultados actuales. Pero tan pronto como cambien los datos en mi base de datos, me gustaría llevar estos cambios al cliente y actualizar el gráfico.

Aquí está un ejemplo gráfico de barras de la página de Google Charts:

<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> 

supongo que podría utilizar un Ajax-Solicitud para tirar de los datos cada algunos segundos y volver a dibujar el gráfico. Pero tal vez hay algún método inbuild en Google Charts que me falta. También leí mucho acerca de Comet, pero nunca implementé ese concepto.

¿Alguien más ha tenido este problema?

Answer 1

La implementación de AJAX en un temporizador es la solución más fácil:

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

uso de un servicio Comet es un poco más complicado de implementar, ya que requiere la creación de algo así como Socket.Io en javascript y en su servidor.

El uso de un servicio Comet garantizará los datos más frescos en el gráfico en todo momento, mientras que AJAX es más fácil de implementar. Comet requiere mantener una conexión activa a su servidor mientras AJAX realiza múltiples solicitudes independientes.