aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace unos días estuve testeando librerías JS para mostrar gráficas. Realmente he encontrado librerías geniales, pero protoChart ha sido la que más me ha gustado. Para hacer pruebas, estuve usando datos de aNieto2k, y así de paso veía estadísticas del blog de una forma rápida y clara.

He preparado un zip con el que podreis mostrar vuestras estadísticas de la misma forma. En principio, únicamente mostraría estadísticas relacionadas con los posts, comentarios y pingbacks, comparativas con años anteriores, … y si tienes StatPress tendrás además estadísticas de visitas por horas del día actual y del día anterior, además de las visitas del mes (para ello tendremos que tener la opción de 30 días activada en el plugin).

Modificaciones

Para hacer las pruebas creé una clase a la que le podemos pasar una sentencia SQL con la que poder obtener datos X e Y y componer una gráfica.

var posts = [<?=$stat->getResults('line', "SELECT count(post_date) as data, DAY(post_date) as label FROM ".$wpdb->posts." WHERE MONTH(post_date) = ".$month." and YEAR(post_date) = $year AND post_parent = ''  GROUP BY 2 ORDER BY 2 ASC;")?>];

Simplemente hemos de respetar los valores que devolvemos con nuestra SQL. Los nombre data y label deben mantenerse ya que serán usados para mostrar leer los resultados.

Para añadir un nuevo campo a las estadísticas deberemos añadir el elemento HTML nuevo y las líneas necesarias del JS al final del fichero.

// HTML
<h2>Comparativa de comentarios por meses del año (<?=$year?>)</h2>
<div id="commentYear" style="width:100%; height:300px"></div>

// Javascript
var results1 = [<?=$stat->getResults('line', "SQL1")?>];
var results2 = [<?=$stat->getResults('line', "SQL2")?>];
new Proto.Chart($('commentYear'),
[
    {data: results1, label: "Resultados de SQL1"},
    {data: results2, label: "Resultados de SQL2"}
],
{
	xaxis: {min: 1, max: 31, tickSize: 1, tickDecimals: 0},
	lines: {show: true, fill: true},
	points: {show: true},
	legend: {show: true}
});

Tambien podemos hacer uso de gráficas de «quesitos», para ello pasaremos el parámetro ‘pie’ a la método getResults() de la clase stats.

// HTML
<h2>Navegadores de los usuarios (StatPress)</h2>
<div id="navegadores" style="width:100%; height:300px"></div>

// Javascript
new Proto.Chart($('navegadores'),
[
    <?=$stat->getResults('pie', $sql)?>
],
{
	pies: {show: true, autoScale: true},
	legend: {show: true}
});

Hay una infinidad de opciones para hacer tus gráficos más profesionales.

Instalación

1. Descargamos el ficheros
2. Descomprimimos y subimos a la raiz de nuestro WordPress.
3. Accedemos a la ruta http://tublog/stats.php

Descargar

El fichero se compone de:

• stats.php
• js/prototype.js
• js/protochart.js
• js/excanvas.js // Para Internet Explorer 6

[Descargar] [Ejemplo]