Representando datos con Javascript

Desde hace tiempo tengo curiosidad por la representación de datos en páginas web. No me refiero a mostrar un fichero gráfico, sino algo más interactivo. Por ejemplo, gráficos en los que se pueda hacer zoom, o que muestren los valores cuando pasamos el ratón por encima.

Investigando un poco encontré unas cuantas librerías de código abierto para hacer esto, pero la que más me gustó es Dygraphs. Esta es una librería en Javascript que es utilizada por Google, Eutelsat, NOAA y muchos más. Muchos aficionados a la meteorología también la usan para publicar los datos de sus estaciones meteorológicas en una web. Por lo que he podido leer hasta ahora es muy flexible, permitiendo cambiar muchas cosas de las gráficas hasta dejarlas completamente a nuestro gusto. Personalmente las que resultan de usar Dygraphs me parecen además las gráficas más atractivas visualmente de entre todas las que he visto en la web.

Entre ayer y hoy estuve trasteando un poco con esta librería y aquí muestro mi primera gráfica, todavía bastante cutre pero que da una idea de lo más básico que se puede hacer y algunas funcionalidades interesantes. Los datos representados son las concentraciones de PM10 diarias en la estación de El Río (Tenerife) entre los días 1 de enero y 31 de marzo de 2014. Los datos son de la Red de Vigilancia y Calidad del Aire del Gobierno de Canarias, que ofrece datos en varios formatos. Uno de esos formatos es el .csv y de uno de esos .csv extraje la información.

Hay varias maneras de entrar los datos en Dygraphs. Una de ellas es simplemente cargar un fichero .cvs desde la web. Otra manera es incluir los datos en el script, como en el primer script de este tutorial. En este caso, como no son muchos datos, yo lo hice de la última manera. Todavía no he jugado con la configuración de los ejes, sus etiquetas o los colores de las gráficas, así que como dije antes mi gráfica todavía es muy primitiva.  

Como puedes comprobar, si pasas el cursor por encima de los datos se puede ver, para cada punto, su valor (fecha y concentración de PM10 y microgramo/metro cúbico). Si marcas un área haciendo click con el ratón puedes hacer zoom en  cualquier zona que quieras, y si haces doble click en cualquier punto de la gráfica vuelves a la vista original. Esto me parece muy práctico.

Para ejecutar un código en Javascript en WordPress, que es el gestor de contenidos que uso para este  blog, hay que hacer alguna cosilla que no es necesaria en un .html de los de toda la vida. Primero tienes que subir el código .js (en este caso, dygraph-combined.js que puedes encontrar aquí) en un directorio de tu web. Yo entré por FTP y creé un nuevo directorio llamado "scripts", y ahí copié el dygraph-combined.js. Luego tienes que incluir el script que llama a dygraph-combined.js en el post o página donde quieras añadir la gráfica. Para eso tienes que usar el modo Texto en el editor de WordPress y copiar el código. Si así no puedes ver la página una vez publicada tu entrada, instala el plugin llamado Text Control y en el post o página y cuestión indica "Ningún formato" y "Ningún formato de caracteres". Ahora se supone que debería funcionar. Ojo, a mí nunca me funcionó ver la gráfica haciendo vista previa de este post. Tuve que publicarlo para poder verla (no sé si en cualquier instalación de WordPress ocurrirá igual).

Como dije antes, el código que usé es una modificación del primero que aparece en el tutorial de Dygraphs.

Lógicamente, debes escribir la dirección de tu web y el directorio donde tengas el script en el campo src="dygraph-combined.js". Por ejemplo, src="http://www.miweb.com/scripts/dygraph-combined.js".

Ahora solo queda meterse más de lleno con Dygraphs, porque las posibilidades que ofrece son muchísimas.