Diferencias

Muestra las diferencias entre dos versiones de la página.

--- acemu:articulos:articulos_tecnicos:software:graficando_con_javascript [2015/03/25 17:45] – [Ejemplo] arreglos mínimos kenneth
+++ acemu:articulos:articulos_tecnicos:software:graficando_con_javascript [2015/06/01 12:02] (actual) – kenneth
@@ Línea 1: / Línea 1: @@
+[[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.
@@ Línea 18: / Línea 22: @@
 ===== Ejemplo =====
-A continuación incluimos un ejemplo donde explicamos cómo se emplea cada uno de estos //tags// para armar un gráfico:
+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:
+<code html 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>
+</code>
+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):
 <code html ejemplo>
@@ Línea 44: / Línea 89: @@
       }
   },
+  showRangeSelector: true,
+  rangeSelectorHeight: 30,
+  rangeSelectorPlotStrokeColor: 'blue',
+  rangeSelectorPlotFillColor: 'lightyellow',
   strokeWidth: 2.3,
   drawPoints: false,
@@ Línea 102: / Línea 151: @@
    }
   },
+  showRangeSelector: true,
+  rangeSelectorHeight: 30,
+  rangeSelectorPlotStrokeColor: 'blue',
+  rangeSelectorPlotFillColor: 'lightyellow',
   strokeWidth: 2.3,
   drawPoints: false,
@@ Línea 110: / Línea 163: @@
 </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.
+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 [[http://dygraphs.com|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>
+<HTML>
+<h4>Funcionamiento del Panel Solar y la Batería: abril y mayo de 2015</h4>
+<div id="bat"></div>
+</HTML>
+<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>
+----
+[[acemu:articulos:articulos_tecnicos:software:|Retorno a la página anterior]]