2010-09-25 30 views
25

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

  • canvas de HTML5
  • bibliotecas JS con el apoyo gráfico de este tipo como Extjs

En tiempo real quiero decir, o bien el cliente que realiza el sondeo del servidor web dice cada segundo o usa el ajax inverso; el servidor envía datos al cliente cuando están disponibles.

¿Puede recomendar alguno?

+1

lo es en tiempo real? Todos los días, horas, años, milisegundos? ¿Qué muestra el gráfico? Índices de acciones, desastres, tornados, ubicaciones de personas? –

+0

debe ser configurable, ya sea que el cliente interrogue al servidor cada segundo oa través de ajax inverso, el servidor envía datos al cliente cuando esté disponible ... – ken

+0

debe consultar esta publicación http://www.techrepublic.com/blog/ five-apps/create-real-time-graphs-with-these-five-free-web-based-apps/ – pedrorijo91

Respuesta

14

Es posible que desee considerar el uso de Flot, una biblioteca de creación de fuente abierta basada en jQuery.

Supongo que en tiempo real quiere decir que el gráfico se actualizará automáticamente. La siguiente es la forma en que su código se vería como si usted fuera a buscar y representar los datos utilizando AJAX sondeo 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 echa un vistazo a la siguiente prueba para verlo en acción (Haga clic en la botón "Encuesta de datos"):

para más información sobre Flot:

14

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

+0

SmoothieCharts es genial, aunque solo muestra una ventana deslizante corta de la serie de tiempo. Todavía tengo que encontrar algo que se vea tan bien como SmoothieCharts, pero comprime el eje horizontal a medida que crece la serie temporal (garantizando así que siempre se muestre la serie de tiempo completo, sin importar cuán grande sea). – Peter

+1

Probé Smoothiecharts, y es justo lo que necesitábamos para la visualización de gráficos dinámicos en tiempo real. Wow, es muy fácil de implementar y funciona en FF Chrome IE. –

Cuestiones relacionadas