Estadísticas de nuestra página con Timeplot

Por el 22 de julio de 2008

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

Crear gráficas personalizadas 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:

Visualizador de gráficas 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>

Resultado del ejemplo

Visualizador de gráficas estadísticas con Timeplot

  • Entradas relacionadas:
  • No hay coincidencias

Dejar un comentario