Creación de una página web HTML con datos de ThingSpeak

A lo largo de esta entrada se va a describir cómo se han obtenido los datos alojados en un servidor de ThingSpeak y se han graficado por medio de código HTML. Los datos tratados son los provenientes de la estación meteorológica ya descrita en otras entradas (temperatura y humedad).

Además, cabe destacar que se obtiene la información de dos canales. La versión gratuita de ThingSpeak sólo permite subir datos cada 15 segundos. Por tanto, se han creado dos canales en los que se sube un dato de la estación meteorológica cada 20 segundos y combinándolos conseguir un muestreo de 10 segundos. 

A grandes rasgos el código HTML expuesto a continuación obtiene datos de dos URIs distintas con funciones de callback para cada una. Se almacenan los datos de cada canal en una variable y se juntan ordenadamente en una tercera (con lo que se consiguen datos de cada 10 segundos). Finalmente se grafica. 

Paso a paso se va explicando la funcionalidad del código :

   1. Mediante una URI externa se carga la funcionalidad del gráfico:

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  <!--    Código que procede de una  página web -->

   2. Se definen dos funciones de callback con las que obtener los datos de cada canal:

   var jsonData1;
   function myCallback1(dataWeGotViaJsonp) {
     jsonData1 = dataWeGotViaJsonp['feeds'];
   };
   var jsonData2;
   function myCallback2(dataWeGotViaJsonp) {
     jsonData2 = dataWeGotViaJsonp['feeds'];
   };
   <!-- Irá al URI desado donde esté 'feeds' y lo guardara en un array, en feeds están los datos-->


  3. Se accede a las URIs de ThingSpeak obteniendo 30 datos y por medio de las funciones de callback definidas:

 <script type="text/javascript" src=
 "https://api.thingspeak.com/channels/699937/feeds.json?results=30&callback=myCallback1">
 </script>
 <script type="text/javascript" src=
 "https://api.thingspeak.com/channels/699938/feeds.json?results=30&callback=myCallback2">
 </script>


   4. Al tenerlos ya obtenidos de la URI se cargan los gráficos

   google.charts.load('current',{'packages':['corechart']});
   google.charts.setOnLoadCallback(drawchart); <!-- Cuando todo este bien llama a drawChart -->
 

   5. Por medio de una función denominada "drawchart" se añaden los ejes del gráfico y se grafican uno a uno los puntos guardados en sendas variables "jsonData1" y "jsonData2":

   function drawchart(){
     var data = new google.visualization.DataTable();
     data.addColumn('datetime','Time'); <!--Creación de los ejes -->
     data.addColumn('number','Temperatura');
     data.addColumn('number','Humedad');

     if(jsonData1<jsonData2) { <!--Se guarda la longitud del array más corto -->
     var len = jsonData1.length;
     }else{
     var len = jsonData2.length;
     }
     for(var i=0; i< len; i++) { <!--Bucle que recorre los arrays de datos hasta el tamaño del más pequeño-->
       <!--Punto del primer canal-->
       var timestamp1 = jsonData1[i]['created_at'];
       var temp1 = jsonData1[i]['field1'];
       var hum1 = jsonData1[i]['field2'];
       data.addRow([new Date(timestamp1), parseFloat(temp1), parseFloat(hum1)]);
       <!--Punto del segundo canal-->
       var timestamp2 = jsonData2[i]['created_at'];
       var temp2 = jsonData2[i]['field1'];
       var hum2 = jsonData2[i]['field2'];
       data.addRow([new Date(timestamp2), parseFloat(temp2), parseFloat(hum2)]);
  };

   6. Las propiedades del gráfico son almacenadas en una variable:

   var options = {
      title: 'Estacion Meteorologica', legend: {position: 'bottom'},
      curveType: 'function', colors: ['red','blue'],
      series: {0: {targetAxisIndex: 0},1: {targetAxisIndex: 1}},
      vAxes: {0: {title: 'Temperatura'},1: {title: 'Humedad'}}
     };

   7. Finalmente, se grafica:

   var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
   chart.draw(data, options);

En esta misma entrada se ha insertado el código HTML explicado y el resultado es el siguiente: