Cómo construir un gráfico en tiempo real usando JavaScript y Pusher

El mundo necesita todo ultrarrápido ahora. Hay muchos flujos de datos generados por diferentes sistemas todos los días. Sirven para tomar decisiones en muchas industrias. El monitoreo y el análisis en tiempo real se han vuelto muy importantes en la actualidad. Los flujos de datos incluyen el monitoreo en tiempo real del tráfico del sitio web, el rendimiento del servidor, las actualizaciones meteorológicas y los sensores IOT. Es importante analizar e interpretar esta ráfaga de datos, para lo cual los cuadros y gráficos interactivos son una excelente solución.

En este artículo, crearemos un servidor Node.js para exponer las API y proporcionar datos históricos para una métrica (en este caso, el clima en Londres). También proporcionará una API para ingerir nuevos puntos de datos. También crearemos una aplicación frontal con un gráfico de líneas para mostrar los cambios de temperatura en el clima de Londres en tiempo real. La aplicación que construimos se verá así:

Registrarse en Pusher

El primer paso para comenzar este tutorial es registrarse en Pusher o iniciar sesión con sus credenciales existentes si ya tiene una cuenta. Después de iniciar sesión, deberá crear una nueva aplicación y seleccionar Vanilla JavaScript para el front-end junto con Node.js para el back-end. A continuación, se le llevará a una página de destino que contiene el código de "inicio" tanto para el front-end como para el back-end, que utilizaremos más adelante en el tutorial.

API del servidor Node.js para el sistema de supervisión y análisis

Las API esenciales para cualquier sistema de análisis para cualquier métrica o entidad son:

  1. API de ingestión: una API para ingerir los nuevos puntos de datos para cualquier entidad en particular. En nuestro servidor para esta publicación de blog, crearemos una API para ingerir nuevos datos de temperatura en un momento particular para Londres. Esta API puede ser invocada por cualquier sistema meteorológico global o cualquier sensor IOT.
  2. API de datos históricos: esta API devolverá todos los datos dentro de un rango desde esta fecha en el tiempo. Para nuestro servidor, crearemos una API simple. Devolverá algunos datos históricos estáticos con puntos de datos limitados para los valores de temperatura de Londres para cualquier día.

Esqueleto del servidor Express de Node.js

Crearemos un Express Server básico junto con la instanciación de la instancia del servidor de biblioteca Pusher. Crearemos una nueva carpeta para nuestro proyecto y crearemos un nuevo archivo server.js . Agregue el siguiente código a este archivo:

API para obtener datos históricos de temperatura

Ahora, agregaremos algunos datos estáticos sobre la temperatura de Londres en ciertos momentos durante un día y los almacenaremos en cualquier variable de JavaScript. También expondremos una ruta para devolver estos datos cada vez que alguien los invoca mediante una llamada GET HTTP.

API para ingerir punto de datos de temperatura

Ahora agregaremos el código para exponer una API para ingerir la temperatura en un momento particular. Expondremos una API HTTP GET con la temperatura y el tiempo como parámetros de consulta. Validaremos que no sean parámetros vacíos. Los almacenamos insertando la matriz dataPoints de nuestra variable estática de JavaScript londonTempData . Agregue el siguiente código al archivo server.js

En el código anterior, además de almacenar en la fuente de datos, también activaremos un evento 'nueva temperatura' en un nuevo canal 'london-temp-chart' . Para cada fuente de datos única o un gráfico, puede crear un nuevo canal.

El evento desencadenado por nuestro servidor será procesado por el front-end para actualizar el cuadro / gráfico en tiempo real. El evento puede contener todos los datos importantes que el gráfico necesita para mostrar el punto de datos correctamente. En nuestro caso, enviaremos la temperatura a la nueva hora a nuestro front-end.

Creación de la aplicación front-end con Vanilla JavaScript y Chart.js

Ahora, crearemos la aplicación front-end. Mostrará un gráfico de líneas que representa los cambios de temperatura de la ciudad de Londres en diferentes momentos durante el día. El enfoque clave para mostrar gráficos en tiempo real es:

  1. Tenemos que hacer una llamada Ajax inicial para obtener datos históricos y representar el gráfico con los datos existentes.
  2. Nos suscribiremos a cualquier evento para los nuevos puntos de datos que se almacenan en un canal en particular.

Plantilla HTML básica

Crearemos una nueva carpeta llamada pública en la raíz de nuestro proyecto y luego crearemos un nuevo archivo index.html en esta carpeta. Este archivo contendrá el código HTML básico para representar un encabezado simple y un subencabezado con el nombre de la aplicación junto con algunos iconos. También importaremos la biblioteca de JavaScript Pusher desde su URL de CDN.

Agregar biblioteca de gráficos

En las aplicaciones de JavaScript y HTML, tenemos que usar SVG o Canvas para construir componentes gráficos para representar gráficos matemáticos. Existen numerosas bibliotecas de código abierto que pueden ayudarlo a representar diferentes tipos de gráficos. Estos incluyen gráficos de barras, gráficos circulares, gráficos de líneas y gráficos de dispersión.

Para nuestro proyecto, elegiremos Chart.js ya que tiene una API bastante simple y genera gráficos robustos usando una etiqueta HTML de Canvas. Puede elegir cualquier biblioteca de gráficos, pero tenga en cuenta que la biblioteca debe tener un medio para actualizar el gráfico sin volver a renderizarlo por completo. Chart.js proporciona un método en cualquier gráfico instanciado para actualizarlo.

Agregue el siguiente código a su archivo index.html en los lugares apropiados

Adición de archivos JavaScript y creación de instancias de la biblioteca del lado del cliente de Pusher

Ahora crearemos un nuevo archivo app.js en nuestra carpeta pública y también agregaremos el siguiente código para crear una instancia de la biblioteca del lado del cliente de Pusher.

En el código anterior, también hemos agregado algunos métodos de utilidad para realizar una llamada Ajax y también mostrar u ocultar elementos de la API DOM.

Agregar código para obtener datos históricos

Ahora, agregaremos el código para obtener los datos históricos de temperatura para mostrar el gráfico con los valores iniciales. También crearemos una instancia de un nuevo objeto Chart con una configuración específica para representar un gráfico de líneas. Puede leer más sobre cómo construir estas configuraciones en la documentación de Chart.js.

Agregue el siguiente código al archivo app.js:

En el código anterior, hemos agregado una función llamada renderWeatherChart. Esto se utilizará para representar el gráfico con los datos más recientes que están incrustados en la variable chartConfig en los conjuntos de datos clave . Si queremos dibujar varios gráficos de líneas en el mismo lienzo, podemos agregar más elementos a esta matriz.

La clave de datos en cada uno de los elementos de la matriz mostrará los diferentes puntos en el gráfico. Haremos una solicitud ajax a la api / getTemperature para obtener todos los puntos de datos y ponerlos en esta clave. Entonces llamaremos al método de renderizado para mostrar el gráfico. Ahora podemos ejecutar el comando node server.jsy luego ir al navegador con la siguiente URL para ver el gráfico inicial renderizado usando los datos.

//localhost:9000/

Para diseñar correctamente nuestra aplicación, agregue el siguiente CSS en un nuevo archivo style.css dentro de la carpeta pública. Agregue el siguiente código a ese archivo:

Código para actualizar el gráfico en un nuevo evento recibido

Ahora queremos suscribirnos al canal único en el que nuestro servidor enviará eventos de actualización para este gráfico. Para nuestro proyecto, el canal se llama london-temp-chart y el evento se llama new-temperature . Agregue el siguiente código para procesar el evento y luego actualice el gráfico en tiempo real:

Para ver este código en acción, debe actualizar el navegador y verá el gráfico inicial. Ahora tenemos que ingerir un nuevo punto de datos. Debería llamar a la siguiente API utilizando alguna herramienta de llamada de API simulada o utilizando la siguiente URL con diferentes valores en el navegador.

//localhost:9000/addTemperature?temperature=17&time=1500

Para probar el código de actualización de su gráfico, puede usar el siguiente código temporal en su archivo app.js. Realizará solicitudes Ajax ficticias a la URL anterior después de un intervalo de tiempo específico.

Aquí está el repositorio de GitHub para referencia al código completo.

Conclusión

Finalmente, nuestra aplicación de análisis en tiempo real está lista. Veremos el gráfico de temperatura meteorológica de la ciudad de Londres actualizándose en tiempo real.

Podemos usar el código de esta publicación de blog para cualquier biblioteca de gráficos. También puede representar cualquier tipo de gráfico como gráfico de barras, gráfico de dispersión o gráfico circular para actualizar en tiempo real.

Este código también se puede utilizar en varias aplicaciones empresariales. Por ejemplo, paneles de control, informes analíticos, aplicaciones de regulación de sensores y aplicaciones financieras. La biblioteca Pusher nos ayuda a enviar eventos en tiempo real a todas las aplicaciones del lado del cliente conectadas. Estas aplicaciones pueden consumir los datos para actualizar los gráficos en tiempo real.

Este artículo se publicó originalmente en el blog de Pusher.