Custom Dashboard en Django Admin

We Are Cactus
Sep 15, 2015 · 3 min read

Post extraído de nuestro compañero Alberto García. ( http://blog.algargar.com/2015/08/25/agregando-graficas-a-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ónhttp://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 ahttp://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

@albertogargar adaptó este post, desde este otro 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 encontrarnos en twitter o enviarnos un email ;-)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store