Gráfico de datos en tiempo real [cerrado]

Me gustaría construir un gráfico de datos en tiempo real basado en la web y estoy mirando las diferentes opciones como:

  • Html5 canvas
  • Bibliotecas JS con soporte gráfico tales as Extjs

Por tiempo real quiero decir, ya sea que el cliente que sondea el servidor web diga cada segundo o use ajax inverso; el servidor envía datos al cliente cuando está disponible.

¿Puede recomendar alguna?

Author: Chris Seymour, 2010-09-25
Source

3 answers

Es posible que desee considerar el uso de Flot, una biblioteca de gráficos de código abierto basada en jQuery.

Asumo que por tiempo real quiere decir que el gráfico se actualizará automáticamente. Lo siguiente es cómo se vería su código si obtuviera y trazara los datos usando AJAX polling a intervalos de 1 segundo: 

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

Asegúrese de revisar la siguiente demostración para verla en acción (Haga clic en el botón "Encuesta de datos"):

Para más información sobre Flot:

 15
Author: Daniel Vassallo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-25 06:28:15

También Hay SmoothieCharts que está diseñado más para este caso de uso.

 16
Author: scoopr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-22 11:23:15
 5
Author: Rubén Fanjul Estrada,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-03 20:13:51