en: Sin categoría
Ayer escribíamos una entrada que comentaba lo útil que puede lleagr a ser Timeplot de SIMILE Project.
Cómo ya comentamos SIMILE se trata de un proyecto de MIT Libraries y MIT CSAIL que se centra en el desarrollo de robustas herramientas (Open Source) basadas en la Web Semántica.
En concreto Timeplot tiene a mi parecer un enorme potencial, en este caso vamos a ver como podríamos hacer una aplicación que nos sirva como lector y visualizador de estadísticas de páginas, el resultado como se puede ver en el ejemplo es extraordinario ya que conseguiremos generar una gráfica muy parecida a las ofrecidas por Google Analytics.
Visualizador de gráficas estadísticas con Timeplot
Lo primero será leernos la documentación necesaria para crear un ejemplo de gráfica con Timeplot.
En estos enlaces puedes encontrar la documentación necesaria para crear un simple ejemplo con TimePlot:
Para hacer un visualizador de gráficas necesitaremos una fuente de datos, en nuestro caso utilizamos las estadísticas obtenidas gracias a Statcounter de estos dos últimos años.
Archivo de texto con estadisticas
Visualizador de estadísticas con Timeplot
Como fuente de datos vale con que tengamos un fichero de datos que separe los campos por comas y el único requisito indespensable es que el primer campo sea el dato fecha.
2006-11-27,9572,7227,6487,2740 2006-11-28,5697,4527,4170,2357 2006-11-29,5070,3974,3643,2331 2006-11-30,5234,3907,3568,2339 2006-12-01,5011,3702,3399,2303 2006-12-02,4171,3263,3059,2204 2006-12-03,3754,3098,2931,2167 2006-12-04,13329,9757,7844,3913
Una vez tenemos los datos y como se puede ver en la documentación podremos cambiar bastante el aspecto de las gráficas.
Cuando ya tenemos nuestra fuente de datos podremos pasar a definir cuáles son las columnas que queremos mostrar en la gráfica, en nuestro caso se trata de las visitas únicas y las páginas vistas.
Este es un ejemplo bastante simple y podemos seguir fácilmente el código leyendo la documentación de Timeplot, este sería el código fuente que generaría nuestro visualizador de gráficas estadísticas con Timeplot.
<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 onLoad() { var eventSource = new Timeplot.DefaultEventSource(); var timeGeometry = new Timeplot.DefaultTimeGeometry({ gridColor: new Timeplot.Color("#000000"), axisLabelsPlacement: "top" }); var valueGeometry = new Timeplot.DefaultValueGeometry({ gridColor: "#000000", min: 0, max: 10000 }); var plotInfo = [ Timeplot.createPlotInfo({ id: "plot1", dataSource: new Timeplot.ColumnSource(eventSource,1), timeGeometry: timeGeometry, valueGeometry: valueGeometry, lineColor: "#ff0000", fillColor: "#cc8080", showValues: true }), Timeplot.createPlotInfo({ id: "plot2", dataSource: new Timeplot.ColumnSource(eventSource,2), timeGeometry: timeGeometry, valueGeometry: valueGeometry, lineColor: "#D0A825", showValues: true }) ]; timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo); timeplot.loadText("data_estadisticas.txt", ",", eventSource); } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; timeplot.repaint(); }, 100); } } </script> </head> <body> <div id="my-timeplot" style="height: 150px;width:600px"></div> <script type="text/javascript"> onLoad(); </script> </body> </html>