Diferencias

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

--- acemu:articulos:articulos_tecnicos:software:graficando_con_javascript [2015/03/26 12:04] – agregamos el range selector al gráfico y pusimos el código html/javascript original kenneth
+++ acemu:articulos:articulos_tecnicos:software:graficando_con_javascript [2015/06/01 12:02] (actual) – kenneth
@@ Línea 91: / Línea 91: @@
   showRangeSelector: true,
   rangeSelectorHeight: 30,
-  rangeSelectorPlotStrokeColor: 'yellow',
+  rangeSelectorPlotStrokeColor: 'blue',
   rangeSelectorPlotFillColor: 'lightyellow',
   strokeWidth: 2.3,
@@ Línea 153: / Línea 153: @@
   showRangeSelector: true,
   rangeSelectorHeight: 30,
-  rangeSelectorPlotStrokeColor: 'yellow',
+  rangeSelectorPlotStrokeColor: 'blue',
   rangeSelectorPlotFillColor: 'lightyellow',
   strokeWidth: 2.3,
@@ Línea 168: / Línea 168: @@
 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]]