PASO 4: Codificación Google Charts

Hola a todos, ya solo nos queda realizar el último de los pasos para completar el desarrollo de la Estación Ambiental casera. Si recopilamos lo hecho hasta ahora ya disponemos de una estación de medición y un código que permite registrar la información de los sensores en la nube. 

El siguiente paso consiste en visualizar la información almacenada en la web. Como ya sabréis la herramienta ThingSpeak os muestra los datos que subís a tiempo real sobre unas gráficas. No obstante, vamos a trabajar con una herramienta específica para realizar visualizaciones de información estadística. El motivo es sencillo:
       1- Aprendemos a trabajar con una herramienta nueva. 
       2- Podremos visualizar la información en cualquier sitio web (en mi caso por ejemplo 
           en este blog).
       3- Podremos personalizar el formato de las gráficas en las que se visualizan los datos. 

La herramienta que os voy a proponer usar es GoogleCharts:
Se trata de una aplicación de Google que sirve para realizar estadísticas web y que permite múltiples formatos como Json, JavaScript y plugins que se pueden integrar con otros lenguajes. La forma más común de usar esta aplicación es con JavaScript, por lo que así lo haremos en este proyecto. La ventaja de usar JavaScript es que el código generado puede incrustarse en una página web, lo cual permite la fácil y rápida visualización de los datos. Las opciones de visualización que ofrece esta herramienta van desde simples gráficos de líneas hasta mapas de árboles jerárquicos y dispone de una galería que ofrece formatos predefinidos para que puedan usarse directamente (GoogleCharts_gallery). Destacar que la página oficial de la herramienta proporciona guías (developers_google_chart_docs) que facilitan la programación a los usuarios novatos, yo incluida.

Como os he comentado, la visualización de datos la vamos a desarrollar en JavaScript. Este lenguaje de programación puede aplicarse sobre documentos HTML y se usa para crear interactividad dinámica en los sitios web. En nuestra aplicación lo usaremos para generar un gráfico que muestre la información, a tiempo real, que se va subiendo a ThingSpeak. En mi caso, voy a mostraros los gráficos en un post del blog, pero podrías ponerlo en cualquier página web. Para hacerlo debéis insertar el código que generaremos en el código HTML que da formato al sitio web. Conocido todo esto, vamos a ponernos con el código.

Estructura del Código JavaScript para visualizar los datos:
    Creación de un objeto html: <html>
        Creación de la cabecera del objeto: <head> 
            Importación de la librería de GoogleCharts llamada (Guía ⇒ basic_load_libs) 
            Descargar la información del canal ThingSpeak
            Preparar los datos que quieren visualizarse (Guía ⇒ basic_preparing_data)
            Personalizar el gráfico (Guía ⇒ basic_customizing_chart)
            Instanciar y dibujar el gráfico  (Guía ⇒ basic_draw_chart)
        Cerrar cabecera </head>
        Creación del cuerpo del objeto: <body>
            Crear un elemento <div> para mantener la visualización del gráfico
            (Guía ⇒ basic_draw_chart)
        Cerra la etiqueta del cuerpo: </body>
    Cerrar el objeto html: </html>

El modo de visualizar los datos debéis elegirlo vosotros, no obstante a continuación os dejo tres archivos que mi compañero y yo hemos desarrollado y espero os sirvan de guía o plantilla:
- Creación de un gráfico para visualizar la información del sensor DHT:
   VisualizarInformacion_DHT22
- Creación de un gráfico para visualizar la información del sensor BMP:
   VisualizarInformacion_BMP180
- Creación de un elemento HTML que permita visualizar simultáneamente los gráficos anteriormente
  descritos: VisualizarInformacion_DHT22_BMP180

En el siguiente post os voy a mostrar el aspecto que se obtiene al 'ejecutar' el código que contiene el último archivo de los que he desarrollado junto a mi compañero. 






Comentarios

Publicar un comentario

Entradas populares de este blog

Conociendo ThingSpeak

Hola a todos, como ya os adelanté, os voy a exponer un trabajo en el que se va ha hacer uso de una plataforma IoT llamada Thing Speak. Precisamente por ello, creo preciso explicaros un poco qué es ThingSpeak. ThingSpeak es una API (Interfaz de Programación de Aplicaciones) que trabaja con datos y es abierta para el IoT. Esta API permite recopilar, almacenar, analizar, visualizar y actuar sobre la información recogida en sensores y dispositivos como aplicaciones web y móvil, redes sociales, hardware de código abierto como Raspberry y Arduino, etc. El modo de funcionar de esta API es mediante canales, los cuales contienen campos de datos, ubicación y estado. Para poder trabajar con esta interfaz es preciso crear un canal, donde se recopilará la información de los dispositivos y aplicaciones. Estos datos, podrán ser visualizados en gráficos o bien ser analizados. Ahora que ya conocéis la plataforma IoT que voy a usar, me gustaría animaros a que la probéis. Para hacerlo debéis...
Leer más

Las TICs en la Investigación Científica

Hoy me gustaría que conocierais el uso de las TICs en el ámbito de la investigación científica. Por ello os dejo un enlace a un pequeño artículo que habla sobre el uso de las TICs en la investigación:  TICs Instrumento para la Investigación Adicionalmente, os dejo una pequeña presentación en la cual se proprociona un listado de herramientas que pueden ser útiles en el ámbito de la investigación para resolver problemas como: detección de plagio, corrección de la literatura, etc. TIC en la investigación científica de Sara Alarcón Afón
Leer más

PASO 3: Conocimientos previos

Buenas tardes a todos, como ya sabréis el tercer paso del proyecto es realizar el código de nuestra aplicación. Este tercer paso, implica hacer uso de comunicaciones para enviar la información de un lugar a otro, como por ejemplo: de la Raspberry a Thing Speak. Por ello, creo que estaría bien que antes os explique que dos tipos de protocolos de comunicaciones usaremos y por qué: Comunicaciones HTTP: El Protocolo de Transferencia de Hipertexto o HTTP, si tomamos las siglas en inglés ('Hypertext Transfer Protocol'), es un protocolo que permite la transferencia de información en la web o también conocida como  'World Wide Web' o WWW. Su arquitectura es de tipo Cliente/Servidor, por lo que cualquier petición de datos debe ser iniciada por el Cliente. Por tanto, el Cliente solicita información  mediante un mensaje HTTP ( MetodosPeticion_HTTP ) y el Servidor le responde con otro mensaje HTTP que contiene la información solicitada.  Una característica de HTTP es ...
Leer más