Página principal

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/