[[acemu:articulos:articulos_tecnicos:software:|Retorno a la página anterior]] ---- ====== 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: [[http://dygraphs.com|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 (////) del código HTMl que devuelve Dokuwiki como en el cuerpo (////) del mismo y hacer referencia a una división (//
//) 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 [[https://www.dokuwiki.org/plugin:inlinejs|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: * '''': que permite declarar qué bibliotecas de //Javascript// queremos cargar en el cabezal del //HTML// * '''': que permite insertar código //HTML// en el cuerpo de la página, donde entre otras cosas podemos declarar la ''
'' dentro de la cual queremos desplegar el gráfico * '''': 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:
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): http://acemu.org/metero/dygraph-combined-dev.js

Temperaturas tomadas en el campo de vuelo de la EMA

g = new Dygraph(document.getElementById("graphdiv"),"http://acemu.org/metero/datos.csv",{ xlabel: "fecha", ylabel: "T(°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 }); En la sección '''' 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 '''', 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 ''