Para esta publicación, se han instalado dos sensores para la recolección de datos en tiempo real, los cuales están actualmente en funcionamiento en la ciudad de Guayaquil: uno para medir la humedad y otro para medir la temperatura. Ambos sensores utilizan tecnología LoRA para enviar la información recopilada a un Gateway. Este Gateway actúa como punto central de conexión, recibiendo los datos de los sensores y enviándolos a la plataforma de Google Cloud a través de una conexión celular LTE.
Una vez que los datos están almacenados en la plataforma de Google Cloud, se ha creado una interfaz web personalizada. Esta interfaz permite la visualización y el análisis de los datos recolectados por los sensores, ofreciendo una representación clara y fácilmente accesible para los usuarios.
Leaflet viewer with OpenStreetMap
En este post, vamos a explorar cómo visualizar datos en tiempo real provenientes de Google Cloud utilizando JavaScript y la poderosa librería de gráficos, Chart.js. El objetivo es crear un entorno interactivo que muestre información valiosa de manera visual y dinámica.
El código que mostramos es una introducción emocionante a la visualización de datos en tiempo real. Lo primero que notarás es que la página web cuenta con un título llamativo, "Visualización de datos en tiempo real", que establece el propósito principal de la página.
El cuerpo de la página contiene un lienzo de gráfico <canvas> y un botón "Descargar CSV". La magia comienza en el script JavaScript incrustado en el código HTML. Este script tiene tres funciones clave:
- loadSheetData(): Esta función se encarga de cargar los datos desde una hoja de cálculo de Google Cloud. Utiliza la API de Google Cloud para obtener información sobre la temperatura, humedad y temperatura de la CPU, desde la segunda fila de la hoja de cálculo. Estos datos son luego utilizados para crear un gráfico dinámico utilizando la biblioteca Chart.js. El gráfico de líneas muestra la evolución de estas variables a lo largo del tiempo.
- convertToCSV(dataArray): Esta función convierte los datos obtenidos de Google Cloud a un formato CSV (valores separados por comas) que es comúnmente utilizado para el intercambio de datos. Esto permitiría a los usuarios descargar los datos en formato CSV para su uso externo.
- downloadCSV(): Aquí, se utiliza la funcionalidad de conversión a CSV para descargar un archivo CSV que contiene todos los datos disponibles en la hoja de cálculo de Google Cloud. Al hacer clic en el botón "Descargar CSV", se genera y descarga automáticamente el archivo con los datos para su uso posterior.
Aquí está la lista de lenguajes de programación utilizados en para la visulizacion de los datos:
- HTML: Utilizado para estructurar la página web.
- JavaScript: Utilizado para realizar operaciones dinámicas, interactuar con la API de Google Sheets, manipular fechas, filtrar datos y crear gráficos.
- Chart.js: Biblioteca de JavaScript utilizada para renderizar gráficos interactivos en el lienzo HTML.
En resumen, se hace uso de HTML para la estructura, JavaScript para la lógica y manipulación de datos, y la biblioteca Chart.js para la visualización de datos en forma de gráficos.
Este código es un primer paso emocionante hacia la visualización de datos en tiempo real desde Google Cloud. Es un punto de partida excelente para aquellos interesados en comprender cómo acceder y mostrar datos en un formato gráfico atractivo y accesible.
Visualización de datos en tiempo real
Visualización de datos en tiempo real
Read related topics
Comments
Post a Comment