Crear gráficas estadísticas con Django y Google Visualization API

Vamos a ver cómo combinar django-qsstats para generar estadísticas y Google Visualization API para representarlas gráficamente.

django-qsstats permite obtener estadísticas agregadas sobre querysets de forma sencilla. Vamos a crear una vista que nos dé el número de usuarios registrados cada día para los últimos 14 días. Para ello crearemos una QuerySetStats a partir del campo date_joined del modelo User de django.contrib.auth. Usaremos time_series pasándole la fecha inicial y final, para obtener un listado de tuplas tipo (fecha, valor) diario con la fecha y el número de usuarios registrados cada día. Necesitaremos pasar a nuestra plantilla nuestra clave de la API de javascript de Google. Si no tienes una clave puedes conseguirla aquí.

Crearemos la siguiente vista en views.py:

from django.template import RequestContext
from django.shortcuts import render_to_response
from django.contrib.auth import User
import datetime
import qsstats

def estadisticas(request):

    GOOGLE_API_KEY = 'clave'

    qs = User.objects.all()
    qss = qsstats.QuerySetStats(qs, 'date_joined')

    hoy = datetime.date.today()
    hace_2_semanas = hoy - datetime.timedelta(weeks=2)

    users_stats = qss.time_series(hace_2_semanas, hoy)

    return render_to_response('estadisticas.html', locals(), context_instance=RequestContext(request))

En user_stats tendremos una lista de tuplas con un elemento por cada día de las dos semanas.

En nuestra plantilla estadisticas.html cargaremos la API de javascript de Google. Crearemos una tabla de datos con DataTable y utilizaremos un gráfico tipo LineChart para su representación. La plantilla quedará de la siguiente manera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1>Nuevos usuarios en las últimos 2 semanas</h1>
    <div id="usuarios_14_dias"></div>
</body>
</html>

<script type="text/javascript" src="http://www.google.com/jsapi?key={{ GOOGLE_API_KEY }}"></script>
<script type="text/javascript"><!--
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(function() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Día');
        data.addColumn('number', 'Usuarios nuevos');
        data.addRows({{ users_stats|length }});

        {% for s in users_stats %}  
            data.setValue({{ forloop.counter0 }}, 0, '{{ s.0|date:"d M" }}');
            data.setValue({{ forloop.counter0 }}, 1, {{ s.1 }});
        {% endfor %}

        var chart = new google.visualization.LineChart(document.getElementById('usuarios_14_dias'));
        chart.draw(data, {width: 620, height: 200, legend:'none'});
    });
//--></script>

Obtendremos un gráfico como el siguiente:

Publicado por Antonio Melé el Domingo 15 de Agosto de 2010 Compártelo: Twitter: | Categorías: plantillas, tutorial

Entradas similares

Generar archivos PDF con Django y Pisa

Pisa es un conversor de HTML/XHTML a PDF escrito en Python. Vamos a ver cómo utilizar Pisa en nuestras vistas para convertir nuestras ...

Agrupar mediante el templatetag {% regroup %} con una función propia

El templatetag {% regroup %} del lenguaje de plantillas de Django nos permite agrupar un listado de objetos por una propiedad. Generalmente utilizamos un campo por ...

oEmbed y Django: incrusta contenidos de servicios web con django-oembed

oEmbed es un formato que permite usar una representación embebida de una URL en sitios web de terceros. La API de oEmbed permite a ...

Settings accesibles desde las plantillas

Muchas veces deseamos acceder a los settings de nuestro proyecto desde alguna de nuestras plantillas. Lo ideal es crear un context processor que nos ...