Graficando con Javascript

En este artículo vamos a mostrar cómo podemos graficar datos que tengamos en algún archivo CSV, empleando alguna biblioteca de Javascript y desplegando el resultado en una página web, más particularmente dentro de esta wiki.

Existen infinidad de bibliotecas para hacer gráficos en Javascript y es imposible cubrir todas las posibilidades, así que vamos a limitarnos a ilustrar algun ejemplos empleando una biblioteca gráfica particular: dygraph

El problema adicional que se plantea es que queremos embeber estas gráficas dentro de DokuWiki, que es lo que estamos usando para desplegar contenido web. Para eso debemos buscar la forma de embeber código Javascript tanto en el cabezal (<head>) del código HTMl que devuelve Dokuwiki como en el cuerpo (<body>) del mismo y hacer referencia a una división (<div>) dentro de la cual aparecerá el resultado de ejecutar ese Javascript.

Para eso hay que primero habilitar la opción htmlok de Dokuwiki y luego instalar el plugin InlineJS de Dokuwiki.

Ahora viene la parte interesante: InlineJS habilita 3 tags que debemos emplear para indicarle qué código html o Javascript queremos insertar y donde:

<PRELOAD>: que permite declarar qué bibliotecas de Javascript queremos cargar en el cabezal del HTML
<HTML>: que permite insertar código HTML en el cuerpo de la página, donde entre otras cosas podemos declarar la <div> dentro de la cual queremos desplegar el gráfico
<JS>: dentro del cual metemos tódo el código Javascript necesario para armar el gráfico

No hace falta aclarar que a cada uno de estos tags les corresponde un tag de cierre </>, obviamente.

Ejemplo

A continuación incluimos un ejemplo donde explicamos cómo se emplea cada uno de estos tags para armar un gráfico. Primero presentamos el código crudo en HTML que deberíamos escribir para poder presentar el gráfico en el navegador:

grafico.html

<html>
<head>
  <script type="text/javascript"
       src="dygraph-combined-dev.js">
  </script>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
  g = new Dygraph(document.getElementById("graphdiv"),"datos.csv",
{
  xlabel: "fecha",
  ylabel: "T(&deg;C)",
  animatedZooms: true,
  height: 320,
  width: 800,
  colors: ["rgb(255,50,10)","rgb(0,80,255)"],
  series: {
      'EMA': {
  strokePattern: [5,3]
   }
  },
  showRangeSelector: true,
  rangeSelectorHeight: 30,
  rangeSelectorPlotStrokeColor: 'blue',
  rangeSelectorPlotFillColor: 'lightyellow',
  strokeWidth: 2.3,
  drawPoints: false,
  showRoller: true,
  hideOverlayOnMouseOut: false,
  stepPlot: false
});
</script>
</body>
</html>

Ahora bien, si colocamos ese archivo grafico.html en un servidor web, y accedemos a él mediante un navegador, lo que vamos a ver es simplemente el gráfico generado por dygraph. Para poder hacer algo similar pero embebido en Dokuwiki, tenemos que separar el código HTML y Javascript dentro de los 3 tags que nos habilita InlineJS, de la siguiente manera (compárese el código anterior con éste):

ejemplo

<PRELOAD>
http://acemu.org/metero/dygraph-combined-dev.js
</PRELOAD>
 
<HTML>
<h4>Temperaturas tomadas en el campo de vuelo de la EMA</h4>
<div id="graphdiv"></div>
</HTML>
 
<JS>
  g = new Dygraph(document.getElementById("graphdiv"),"http://acemu.org/metero/datos.csv",{
  xlabel: "fecha",
  ylabel: "T(&deg;C)",
  animatedZooms: true,
  height: 300,
  width: 600,
  colors: ["rgb(255,50,10)","rgb(0,80,255)"],
  series: {
      'EMA': {
             strokePattern: [5,3],
             showInRangeSelector: true,
      }
  },
  showRangeSelector: true,
  rangeSelectorHeight: 30,
  rangeSelectorPlotStrokeColor: 'blue',
  rangeSelectorPlotFillColor: 'lightyellow',
  strokeWidth: 2.3,
  drawPoints: false,
  showRoller: true,
  hideOverlayOnMouseOut: false,
  stepPlot: false
});
</JS>

En la sección <PRELOAD> le indicamos a Dokuwiki que queremos cargar la biblioteca javascript que se encuentra en esta URL: http://acemu.org/metero/dygraph-combined-dev.js

Observese que no usamos la sintáxis de javascript <script…></script>, sino que el propio plugin InlineJS se encarga de eso en la sección PRELOAD. Ojo, es importante tener claro esto, porque si se incluyen los tags <script> el resultado no funciona (se puede ver en el fuente de la página que el código resultante está mal).

Luego, en la sección <HTML> insertamos un título (en realidad se podría haber hecho con el propio Dokuwiki) y seguido declaramos <div id=“graphdiv”></div> que es la división dentro de la cual el código de Javascript va a insertar el gráfico.

Finalmente en la sección <JS> insertamos el código de Javascript que hace el grafico propiamente dicho. Nuevamente no se insertan los tags <script> de comienzo y finalización del código Javascript porque eso lo hace el <JS>.

Dentro de esta sección, el gráfico se crea al declarar un nuevo objeto Dygraph. El primer argumento de Dygraph dice donde crearlo, dentro de la div cuyo id es graphdiv. el segundo argumento es una URL que apunta al archivo de datos: datos.csv, que es un simple archivo en formato CSV con 3 campos por linea:

fecha,EMA,ACEMU
2015-03-18 16:30:01,20.100000,24.700000
2015-03-18 17:00:01,20.100000,24.500000
2015-03-18 17:30:01,20.100000,24.000000
2015-03-18 18:00:01,20.100000,23.400000
2015-03-18 18:30:01,20.100000,23.000000
...

El primer campo corresponde a fecha/hora, el segundo a la correspondiente temperatura leida de la estación Davies de la EMA y el tercero a la temperatura de nuestra estación ACEMU.

Lo que viene después es una lista de propiedades o atributos de la gráfica que se dibuja.

El resultado que se obtiene es el siguiente:

<PRELOAD> http://acemu.org/metero/dygraph-combined-dev.js </PRELOAD>

<h4>Temperaturas tomadas en el campo de vuelo de la EMA</h4>
<div id="graphdiv"></div>

<JS>

g = new Dygraph(document.getElementById("graphdiv"),"http://acemu.org/metero/datos.csv",{
xlabel: "fecha",
ylabel: "T(&deg;C)",
animatedZooms: true,
height: 300,
width: 600,
colors: ["rgb(255,50,10)","rgb(0,80,255)"],
series: {
    'EMA': {
strokePattern: [5,3],
showInRangeSelector: true,
 }
},
showRangeSelector: true,
rangeSelectorHeight: 30,
rangeSelectorPlotStrokeColor: 'blue',
rangeSelectorPlotFillColor: 'lightyellow',
strokeWidth: 2.3,
drawPoints: false,
showRoller: true,
hideOverlayOnMouseOut: false,
stepPlot: false

}); </JS>

Gracias al código Javascript, el gráfico presenta cierto grado de interactividad: al pasar el ratón por encima, se despliegan los valores graficados. Incluso es posible hacer un zoom, tanto del eje de las x como el de las y, simplemente haciendo click y arrastrando el ratón hasta abarcar la zona que se desea ampliar. Hacer doble click sobre el gráfico para volver al gráfico completo. También hemos habilitado una barra selectora de rangos, que facilita el ampliado de zonas y el escaneado del gráfico.

Para entender los detalles del código javascript que incluimos en la sección <JS>, recomendamos leer la documentación de dygraph

La ventaja de emplear esta biblioteca gráfica de javascript es que toma los datos a graficar de un simple archivo CSV, por lo que no es necesario alterar el código de la página de Dokuwiki para actualizar el gráfico, alcanza con simplemente actualizar el contenido del archivo CSV. Incluso es más, lo que en realidad necesita dygraph es una URL que devuelva los datos en formato CSV, pero bien podría ser la dirección de un código PHP que extraiga los datos a graficar de una base de datos SQL y los entregue en formato CSV.

<PRELOAD> http://acemu.org/metero/dygraph-combined-dev.js </PRELOAD>

<h4>Funcionamiento del Panel Solar y la Batería: abril y mayo de 2015</h4>
<div id="bat"></div>

<JS>

g = new Dygraph(document.getElementById("bat"),"http://acemu.org/metero/baterias.csv",{
xlabel: "fecha",
ylabel: "Voltaje(V)",
valueRange: [6,null],
animatedZooms: true,
height: 300,
width: 600,
colors: ["rgb(255,50,10)","rgb(0,80,255)"],
series: {
    'bat': {
strokePattern: [5,3],
showInRangeSelector: true,
 }
},
showRangeSelector: true,
rangeSelectorHeight: 30,
rangeSelectorPlotStrokeColor: 'blue',
rangeSelectorPlotFillColor: 'lightyellow',
strokeWidth: 1.5,
drawPoints: false,
showRoller: true,
hideOverlayOnMouseOut: false,
stepPlot: false

}); </JS>

Retorno a la página anterior

A.C.E.M.U.

Barra lateral

Graficando con Javascript

Ejemplo

A.C.E.M.U.

Herramientas de usuario

Herramientas del sitio

Barra lateral

Graficando con Javascript

Ejemplo

Herramientas de la página