Contenido

TimePlot, lo nuevo de SIMILE, está vez mejora las estadísticas

31 jul

+ 6

Hace unos meses conocí SIMILE Timeline, un sistema que despues fue usado para crear BlogoEdad, en el que me aproveché de la funcionalidad de Timeline nos ofrece para mostrar la edad de los 1.715 bloggers registrados.

blogoedad.jpg

Ahora la gente de SIMILE, nos deleita con TimePlot, un sistema de gráficas para estadísticas muy elegante y vistosa que nos permite una gran personalización, una personalización tan interesante que nos permite además de los datos que conformarán la gráfica, insertar hitos que indicarán eventos concretos en una linea temporal formada por la gráfica. Osea que podremos tener una gráfica basada en tiempo a la que se le añadirán eventos que nos servirán de referencia para los datos obtenidos.

simile_timeplot_example.jpg

Todo ello, está desarrollado mediante una API en Javascript, realmente extensa que podemos usar de forma completamente gratis ya que se trata de un software open source.

Ejemplo

<html>
  <head>
    <script src="http://static.simile.mit.edu/timeplot/api/1.0/timeplot-api.js" type="text/javascript"></script>
	<script type="text/javascript">
	var timeplot;
	
	function loadNow() {
	  var eventSource = new Timeplot.DefaultEventSource();
	  var eventSource2 = new Timeplot.DefaultEventSource();

	  var timeGeometry2 = new Timeplot.DefaultTimeGeometry({
	        gridColor: new Timeplot.Color("#000000"),
	        axisLabelsPlacement: "top"
	  });
	
	  var valueGeometry = new Timeplot.DefaultValueGeometry({
	        gridColor: "#000000",
	        min: 0,
	        max: 100
	  });

	  var plotInfo = [
	       Timeplot.createPlotInfo({
	          id: "plot1",
	          dataSource: new Timeplot.ColumnSource(eventSource,1),
	          timeGeometry: timeGeometry2,
	          valueGeometry: valueGeometry,
	          lineColor: "#ff0000",
	          fillColor: "#cc8080",
	          showValues: true
	        }),
	        Timeplot.createPlotInfo({
	          id: "plot2",
	          dataSource: new Timeplot.ColumnSource(eventSource,3),
	          timeGeometry: timeGeometry2,
	          valueGeometry: valueGeometry,
	          lineColor: "#D0A825",
	          showValues: true
	        }),
	        Timeplot.createPlotInfo({
	          id: "plot3",
	          timeGeometry: timeGeometry2,
	          eventSource: eventSource2,
	          lineColor: "#03212E"
	        })
	  ];

	  timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);
	  timeplot.loadText("data.txt", ",", eventSource);
	  timeplot.loadXML("events.xml", eventSource2);
	}

	var resizeTimerID = null;
	function onResize() {
	    if (resizeTimerID == null) {
	        resizeTimerID = window.setTimeout(function() {
	            resizeTimerID = null;
	            timeplot.repaint();
	        }, 100);
	    }
	}
	</script>
  </head>
  <body>
  <body onload="loadNow();" onresize="onResize();">
   <div id="my-timeplot"></div>
  </body>
</html>

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.