Representación de datos en Google Charts

Una vez ya hemos almacenado los datos en el canal de ThingSpeak (ver Implementación de la estación meteorológica) vamos a proceder a representarlos en Google Charts. Para graficar los datos de ThingSpeak en Google Charts hay que desarrollar un código HTML que puede ser escrito en cualquier editor de texto. En adición, hará falta la Read API Key del canal de ThingSpeak que se logra en la pestaña API Keys dentro del canal correspondiente, además del identificador del canal o Channel ID.

Google Charts permite distintos tipos de gráficos. Para está ocasión haremos un line chart del tipo Curving lines. Accediendo a la página ayuda de Google Charts obtenemos un texto HTML que nos servirá como guía. En este fichero HTML seguiremos una serie de pasos para conseguir una representación gráfica de los datos en el navegador de Internet. Primero, hay que obtener el JSON con los datos de cada campo del canal, obtenemos los feeds. Para esto hay que especificar el Read API Key y el Channel ID de nuestro canal, además del número de resultados que se quieren leer de cada campo. Después cargamos unos paquetes que permitirán la realización del gráfico. Los datos obtenidos en el JSON son almacenados en una tabla de datos, especificando el nombre y el tipo de cada variable en las columnas y rellenando las filas con los valores de las variables. También se añaden detalles como la leyenda para identificar cada variable, el color de cada curva, el título del gráfico o el título de cada eje. A continuación podemos ver el código comentado:

  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        var jsonData;
        function myCallback(dataWeGotViaJsonp){
        jsonData=dataWeGotViaJsonp['feeds'];    <!-- jsonData es un array, contiene los datos de los canales. -->
        };
    </script>
    <script type="text/javascript" src="https://api.thingspeak.com/channels/400244/feeds.json?api_key=TD2ZJEWDGJDL6X4E&results=8&callback=myCallback"></script> 
                                                <!-- Obtenemos el feed del canal en el JSON antes declarado. -->
                                                <!-- Hay que usar el channel ID y la Read API Key, y especificar -->
    <script type="text/javascript">                             <!-- el numero de datos que se quieren obtener, en este caso 8 (results=8) -->
      google.charts.load('current', {'packages':['corechart']}); <!-- Cargamos los paquetes. -->
      google.charts.setOnLoadCallback(drawChart); <!-- Cuando se haya ejecutado el paquete ejecutamos la función para dibujar el grafico drawChart. -->

      function drawChart() {
        var data = new google.visualization.DataTable();  <!-- Almacenamos en la tabla de datos los distintos datos que tenemos en el canal,-->
            data.addColumn('datetime','Time');<!-- declarandolos en las columnas de estas junto con el tiempo. -->
            data.addColumn('number','Temperature');
            data.addColumn('number','Pressure');
                    data.addColumn('number','Humidity');
                    data.addColumn('number','Heat Index');
                data.addColumn('number','Dew Point');
        
        for(var i=0;i<jsonData.length;i++){ <!-- Un bucle for para añadir las filas de la tabla, que corresponden a los valores de los parametros del canal.--> 
            var timestamp=jsonData[i]['created_at']; <!-- Se añaden tantas filas como datos haya en el JSON. -->
            var T=jsonData[i]['field1'];
            var P=jsonData[i]['field2'];
            var H=jsonData[i]['field3'];
            var HI=jsonData[i]['field4'];
            var DP=jsonData[i]['field5'];
            data.addRow([new Date(timestamp),parseFloat(T),parseFloat(P/100000),parseFloat(H),parseFloat(HI),parseFloat(DP)]); 
                         <!-- En esta ocasion la presion se ha pasado a bares para obtener un grafico mas ajustado -->
        };               <!-- ya que con Pascales se obtienen valores del orden de 100000 -->

        var options = {
          title: 'Weather Station',legend:{position:'bottom'}, <!-- Se le da un titulo al grafico. Se especifica el tipo de curva y los colores para las distintas variables.-->
          curveType: 'function', colors:['red','blue','green','yellow','purple'],
          series:{0:{targetAxisIndex: 0},1:{targetAxisIndex:1},2:{targetAxisIndex:0},3:{targetAxisIndex:1},4:{targetAxisIndex:1}}, <!-- Distribuimos los datos en dos ejes verticales.-->
          vAxes:{0:{title:'Temp. (ºC) and Humidity (%)'},1:{title:'Pressure (bar), Heat Index (ºC) and Dew Point (ºC)'}}   <!-- Asignamos un titulo a dichos ejes -->
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); <!-- Se ancla la grafica a la linea del body, y luego se dibuja. -->

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
  <div id="curve_chart" style="width: 1500px; height: 1000px"></div> <!-- Se define el cuerpo, especificando el tipo de grafico y el tamaño del mismo -->
  </body>
</html>


Una vez generado el HTML lo ejecutamos y obtenemos el gráfico correspondiente en nuestro navegador de Internet:


Comentarios

Publicar un comentario

Entradas Populares

Desarrollo y pruebas de algoritmo Adaboost

El algoritmo Adaboost es un metaclasificador, es decir, obtiene un nuevo clasificador a partir de un conjunto de clasificadores (pool de clasificadores), consiguiendo así un clasificador más eficiente. La salida del Adaboost es el signo de la suma ponderada de las salidas de cada uno de los clasificadores ante un vector de características xi (puede dar el valor 1 o -1). El cálculo de los coeficientes de ponderación (alfas) se realiza de manera progresiva, haciendo un testeo de los clasificadores con datos de entrenamiento. Se asignan penalizaciones a los clasificadores según el error cometido y dependiendo de ese porcentaje de error se pueden calcular los pesos. Este cálculo de las alfas se calcula en base a la relación entre la suma de los pesos correctos, Wc, y erróneos, We.
Leer más

Ajuste de regulador PI con el algoritmo PSO

  Introducción PSO permite optimizar un problema a partir de una población de soluciones candidatas, denotadas como "partículas", moviendo éstas por todo el espacio de búsqueda según reglas matemáticas que tienen en cuenta la posición y la velocidad de las partículas. El movimiento de cada partícula se ve infulido por su mejor posición local hallada hasta el momento, así como por las mejores posiciones globales encontradas por otras partículas a medida querecorren el espacio de búsqueda. El fundamento teórico de esto es hacer que la nube de partículas converja rápidamente hacia las mejores soluciones.
Leer más

Algoritmo P&O para placas solares

En este documento se estudiara el algoritmo de búsqueda del extremo de una función. En primer lugar se realizara una explicación teórica del funcionamiento de un algoritmo de búsqueda de extremo, seguidamente se detallara el algoritmo elegido para nuestro caso particular, que será el algoritmo de P&O. Finalmente se simulara en PSIM el algoritmo estudiado. Los algoritmos de seguimiento del punto de máxima potencia ( MPPT ) se utilizan en sistemas fotovoltaicos para maximizar la energía entregada por los mismos, dicho seguimiento se realiza básicamente variando el valor del duty-cycle de un convertidor de potencia. Existen gran variedad de algoritmos de seguimiento del punto de máxima potencia, como por ejemplo: perturbar y observar (que es el que se va a utilizar en este proyecto), basados en lógica difusa, basados en redes neuronales artificiales, RCC (Ripple Correlation Control), conductancia incremental (INC) entre otros. Estos algoritmos varían en su complejidad, su vel...
Leer más

e-meeting

e-Meeting es una nueva forma de reunirse, la que se hace de forma electrónica. La forma más conocida es a través de Internet utilizando cualquier software o web destinados para este fin. Por ejemplo, en el mundo de la empresa, se ha vuelto una herramienta indispensable ya que permite a los empleados comunicarse y tener reuniones a distancia sin que tener que desplazarse ahorrando en medios y tiempo. La mayoría de estas plataformas software electrónicas permiten que los participantes se comuniquen entre ellos en tiempo real utilizando un protocolo VOIP (Voice Over Internet Protocol). Este elimina permite la ausencia de un teléfono y permite una comunicación visual entre los participantes. Numerosos paquetes de reuniones online tienen herramientas, como pizarras virtuales que habilitan a los participantes a escribir, dibujar gráficos y otro tipo de actividades en tiempo real. Además la reuniones pueden ser grabadas y almacenadas de modo que, en caso de que alguien no haya podido...
Leer más