Mostrando Custom Dashboard en Django Admin con Chartjs y Django Suit

La idea a realizar, es crear un index.html para el admin, que mediante una gráfica generada con ChartJS nos muestre a modo visual el número de Users en cada Group de nuestro Django. A partir de este tutorial,puedes hacerte una idea de como agregar nuevos elementos. Otro tipo de gráficas, o cualquier otra info al index del Django-admin.

Requisitos:

Django
Django-Suit

Teniendo en cuenta que tenéis un proyecto con lo anterior instalado y funcionando.
Los gráficos de ChartJS funcionan leyendo la info de un json como el de el siguiente ejemplo (Extraído de su documentación http://www.chartjs.org/docs/):

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
]

La idea es que nosotros generemos desde una vista de Django, un json similar con la información que queremos mostrar en al gráfica.

Imaginemos que en nuestro Django tenemos la app "chartsapp". En el archivo views definiremos la siguiente vista:

@login_required
def countusergroup(request):
    user_list = User.objects.values('groups__name').annotate(ucount=Count('id'))

    data = []
    for user in user_list:
        name = user['groups__name'] or 'Unassigned'
        r = lambda: random.randint(0,255)
        data.append({'value': user['ucount'], 'label': name, 'color': '#%02X%02X%02X' % (r(),r(),r())})

    return HttpResponse(json.dumps(data), content_type='application/json; utf-8')

Una vez tenemos la vista creada, debemos indicar la ruta a la que llamarla en nuestro urls.py

url(r'countusergroup/$', 'chartsapp.views.countusergroup', name="countusergroup"),

Si en este punto accedemos en neustro navegador a http://localhost:8000/countusergroup/, obtendremos algo similar a:

[{"color": "#5D3B74", "value": 2, "label": "Unassigned"}, {"color": "#2BF2F6", "value": 2, "label": "El grupo"}, {"color": "#B8A8E9", "value": 1, "label": "El tercer grupo"}]

Ahora, en vuestro directorio de templates, debeis crear un archivo html, que será el que llamaremos como nuevo index del admin. En mi caso, lo llamé index.html

Lo primero y más importante, es al inicio del fichero agregar:

{% extends "admin/base_site.html" %}

Esto indica que este archivo extiende del index del admin. La lógica que contiene este archivo, no es otra que mediante jQuery hacer una petición AJAX a la URL que hemos preparado antes, pedir la información y mostrarla en un Chart mediante ChartJS.

{% extends "admin/base_site.html" %}

{% block content %}

<script type="text/javascript" src="LA/RUTA/DONDE/TENEMOS/CHARTJS"></script>
<script type="text/javascript">

function drawChart(data){
    var ctx = $("#myChart").get(0).getContext("2d");
    var myNewChart = new Chart(ctx).Doughnut(data);
}

$( document ).ready(function() {
    data = $.ajax({
        url: "{% url 'countusergroup' %}",
        dataType:"json",
        async: false,
        success: function (data) {
            drawChart(data);
        }
    }).responseText

});
</script>

<canvas id="myChart" width="250" height="250"></canvas>

{% endblock %}

Ahora el último paso, indicar a Django, que el nuevo index del admin es el template que hemos creado. Esto se hace en el archivo urls.py tal que así:

Agregando esta línea:

AdminSite.index_template = 'index.html' # Test new index admin

Justo antes de esta otra:

urlpatterns = patterns(

¡Y esto es todo, ya tenemos nuestro flamante admin con su gráfico! :D

Adapté este otro post que hablaba de hacerlo con Google Charts: http://jaljale.com/blog/customize-django-admin-index-page-to-show-custom-dashboard/

Si tienes cualquier problema siguiendo el tutorial, puedes encontrarme en twitter o enviarme un email ;-)

Menu