SERVIDOR
Gráfico de datos de temperaturas
JavaScript
Hace un año que tengo en mi servidor de Gráficas de datos meteorológicos realizado en Python haciendo uso de la librería matplotlib.
Se puede ver el gráfico de temperaturas diaria de Palencia en http://seta43.duckdns.org/seta/webcam/gradia.html.
En este caso, a nivel de programación, la gráfica se realiza en el servidor que crea los ficheros de imagen, los cuales se insertan en la página WEB.
Gráficos utilizando la librería matplotlib.
Existe otra forma de generar gráfica de datos, y esta es utilizando JavaScript.
Haciendo uso de la librería http://www.jqplot.com/ podemos hacer gráficas bastante vistosas.
Gráficos utilizando la librería jqplot.
| index.html |
| <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>TEMPERATURA PALENCIA</title> <link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" /> <script class="include" type="text/javascript" src="jquery.min.js"></script> <script class="include" type="text/javascript" src="jquery.jqplot.min.js"></script> </head> <body> <div align="left"> <h2><font color="#990000">Temperaturas Palencia</font></h2> </div> <br> <div id="ejemplo1" style="height:400px; width:700px;"></div> <script class="code" type="text/javascript"> $(document).ready(function(){ var lineaY = []; //_________________________ var lineaYs = [9.4,9.2,9.2,9.2,9.2,9.3,9.1,9.1,9.1,9.1,9.0,8.9,8.8,8.8,8.8,8.7,8.7,8.7,8.8,8.8,8.8,8.9, 8.9,9.0,9.0,9.0,9.1,9.0,9.0,9.0,9.0,8.9,8.8,8.7,8.5,8.4,8.3,8.3,8.4,8.4,8.7,9.0,9.3,9.4,9.7,10.1,10.2,10.6, 10.8,11.1,11.3,12.2,12.3,12.3,11.8,11.8,12.1,12.0, ,11.6,11.5,11.2,10.8,10.8,10.9,10.8,10.7,10.8,11.0, , , , , , , , , , , , , , , , , , , , , , , , , , , ,] //____________________________ var z=0; for (var i=0; i<24; i+=0.25){ lineaY.push([i, lineaYs[z] ]); z++; } var puntos = $.jqplot('ejemplo1', [lineaY], { title: 'GRÁFICO POR HORAS', seriesDefaults: { showMarker: false, rendererOptions: { smooth: true, animation: { show: true } }, }, series: [ {showMarker:false}, ], axes: { xaxis:{ label:'HORA', pad: 0 }, yaxis:{ label:'Temp.' } } }); }); </script> </body> </html> |
| prugra.sh |
| #!/bin/bash datecreated=`date` echo "GENERANDO GRAFICOS JavaScript" cp $HOME/www/webcam/datos.txt $HOME/www/prugra/datos.txt cd $HOME/www/prugra cat parte1.txt datos.txt parte3.txt > index.html |
Después de muchas pruebas no he conseguido que javaScript cargue automática los datos desde un fichero.
He optado por una opción poco ortodoxa, unir mediante el comando cat 3 ficheros, la cabecera, los datos y el final de fichero, y de esta forma creamos el fichero index.html. Este fichero con código javaScript se ejecuta en el navegador, creando la gráfica.
El problema de crear la gráfica con una librería de javaScript, es que se tiene que cargar la librería jqplot, y el tamaño de esta librería es de 260Kbytes. En estos tiempos no es mucho, pero debemos tener en cuenta el consumo de datos.
Para hacer bonita la gráfica utilizo la opción animation: { show: true } que genera una animación en la creación de la gráfica.
El fichero de datos.txt se crea en el programa de python que obtiene los datos del sensor gratem.py.
Podemos ver funcionando la página en:
http://seta43.duckdns.org/seta/prugra/index.html
Espero que les haya gustado este artículo sobre creación de gráficos en una página web.
Saludos.
Juan Galaz
Bibliografía:
Gráficas de datos metereológicos
http://seta43.duckdns.org/seta/webcam/gradia.html.
http://www.jqplot.com/
