Esta sesión se trata de una continuación de la sesión anterior. Se va a tomar el canal de ThingSpeak creado en la sesión anterior y se van a graficar sus datos.
Dicha gráfica va a programarse mediante html usando para ello Notepad++ como editor y Google Charts como el servicio que creará la gráfica.
Notepad++ se trata de un editor de texto con soporte para varios lenguajes de programación. En esta sesión se va a trabajar en html, combinándolo con JavaScript. Al trabajar con html hay que crear una suerte de "árbol" del que luego van "colgando" elementos. Así, dentro de <html>...</html> han de incluirse <head>...</head> y <body>...</body>.
Dentro de <head>....</head> se van a incluir varios <script type="text/javascript">...</script> dentro de los cuáles irá el código en JavaScript. A su vez, dentro de <body>...</body> se va a incluir <div id="curve_chart"></div>.
El código: por partes
La primera línea de código relevante a analizar es la siguiente: <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Con ella se le está indicando al html que tiene un script de tipo JavaScript, y que está en la URI https://www.gstatic.com/charts/loader.js Esto significa que en cada ejecución se va a descargar el código JavaScript de esa URI, por lo que el código está lo más compactado posible. No tiene casi saltos de línea o espacios, y los nombres de las variables son lo más simples posibles: a, bc, e, etc.
El código que aparece en la página de Google Charts trabaja con datos estáticos. Sin embargo, en este caso se quiere trabajar con los datos provenientes de ThingSpeak. Para ello es necesario recuperar esos datos, por lo que se crea la función myCallback, y se utiliza para almacenar los datos.
<script type="text/javascript">
<script type="text/javascript">
var jsonData
function myCallback(dataWeGotViaJsonp) {
jsonData = dataWeGotViaJsonp['feeds'];
};
</script>
function myCallback(dataWeGotViaJsonp) {
jsonData = dataWeGotViaJsonp['feeds'];
};
</script>
<script type="text/javascript" src="https://api.thingspeak.com/channels/[CHANNEL_ID]/feeds.json?api_key=[API_KEY]&results=10&callback=myCallback"></script>
Se observa que se añade &callback=myCallback a la URI. La URI está extraída del propio canal de ThingSpeak, y se trata del Get a Channel Feed que se tiene en la sección Data Import/Export de cada canal.
El siguiente paso sería crear la gráfica, de nuevo usando JavaScript. Para ello se cargan las funciones tal como se indica en la guía de Google, pero se modifica la función de DrawChart de la siguiente manera:
LineCharts
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime','Time');
data.addColumn('number','CPU');
data.addColumn('number','RAM');
for(var i=0; i<jsonData.length; i++) {
var timestamp = jsonData[i]['created_at'];
var cpu = jsonData[i]['field1'];
var ram = jsonData[i]['field2'];
data.addRow([new Date(timestamp), parseFloat(cpu), parseFloat(ram)]);
};
var options = {
title: 'Computer performance', legend: {position: 'bottom'},
curveType: 'function', colors: ['red','blue'],
series: {0: {targetAxisIndex:0},1:{targetAxisIndex:1}},
vAxes: {0: {title: '%CPU'},1:{title: '%RAM'}}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data,options);
}
var data = new google.visualization.DataTable();
data.addColumn('datetime','Time');
data.addColumn('number','CPU');
data.addColumn('number','RAM');
for(var i=0; i<jsonData.length; i++) {
var timestamp = jsonData[i]['created_at'];
var cpu = jsonData[i]['field1'];
var ram = jsonData[i]['field2'];
data.addRow([new Date(timestamp), parseFloat(cpu), parseFloat(ram)]);
};
var options = {
title: 'Computer performance', legend: {position: 'bottom'},
curveType: 'function', colors: ['red','blue'],
series: {0: {targetAxisIndex:0},1:{targetAxisIndex:1}},
vAxes: {0: {title: '%CPU'},1:{title: '%RAM'}}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data,options);
}
Con data.addColumn se añaden los datos deseados, que en este caso son el tiempo, el %CPU y el %RAM. Mediante un for se cargan los datos de ThingSpeak a las variables timestamp, ram y cpu. A continuación se especifican las opciones, que serán las que darán el aspecto visual a la gráfica.
El código: resultados
Todo este código se encuentra dentro un archivo .html, con lo que para ver su resultado se puede abrir el fichero con el navegador.
Finalmente, el código completo está a continuación, donde solo habrá que editar los huecos indicados por [MAYÚSCULAS] según sea necesario.
