4. Visualización de datos mediante Google Charts

Debido a que no en todas las plataformas se puede instalar un software de visualización e interpretación de datos como Matlab debido a la gran cantidad de recursos que consumen, podría parecer que estamos un poco limitados a la hora de trabajar con los datos de temperatura y humedad que hemos adquirido hasta el momento tal y como se ha comentado en las entradas anteriores.

Sin embargo la integración de navegadores web está generalizada en un gran número de dispositivos, que junto con los recursos proporcionados por Google Charts nos permiten visualizar los datos que tenemos almacenados en nuestra cuenta de ThingSpeak sin consumir elevados recursos.

De todas las opciones de visualización proporcionadas por Google Charts hemos escogido la opción del gráfico de lineas ya que es la forma más intuitiva de interpretar los datos de temperatura y humedad que estamos midiendo.

A la hora de desarrollar el código usando HTML, lo primero que debemos realizar es el almacenamiento de los datos de cada uno de los canales de ThingSpeak en dos variables, de las cuales posteriormente seleccionaremos los datos adecuadamente para poder graficar su información.

El segundo paso es indicar la dirección de los canales de ThingSpeak a través de los cuales se va a realizar la recogida de datos.

A continuación se definen las funciones que grafican la información que ha sido previamente almacenada en las variables que hemos creado.

Finalmente se hace una llamada a cada una de estas gráficas.

Nosotros hemos decidido que la mejor forma de mostrar la información es hacerlo a través de dos gráficas independientes, una para la temperatura y otra para la humedad. Obteniendo el resultado que se muestra a continuación.

Como siempre os  adjuntamos el código por si os animaís a intentarlo o incluso hacer alguna mejora.