Gráficas dinámicas con django

Para crear una gráfica dinámica con django necesitaremos un script que podemos descargar desde cualquier página su nombre es: Chart.js o bien Chart.min.js, este script sirve para dibujar la gráfica, no solo en django sino en cualquier framework también necesitaremos un paquete que proporciona Django json

Para crear gráficas en Django, se asumirá que ya se han creado sus modelos, las vistas etc.. primero debemos añadir el script Chart.js a nuestro proyecto, solo vamos a nuestro archivo base.html importamos el script que extenderemos a los demas archivos .html por ejemplo:

En el block de javaScript cargamos el script Chart.js

Ahora nos vamos a views.py de nuestra aplicación, y ahí mandaremos los datos a nuestra página donde se mostrarán las gráficas... Definimos un método o una clase que se encargará de este proceso, en este caso decidí hacer un método: def index también podría ser una clase class index como parametro escribes el request de la página.

También si es un objeto en especifico puedes poner como parametro el id del objeto para luego llamar ese objeto en especifico, esto en caso que el objeto que se necesite la gráfica sea de una relación de muchos a muchos de uno a muchos y necesites uno en especifico de ser asi el código solo cambiaria al inicio:

def index(request, objeto_id): datos = get_object_or_404(Objeto, pk= objeto_id) todo lo demas sería exactamente igual

Bien, ahora ya tenemos los datos que vamos a enviar pero necesitamos recibirlos en el archivo html, en este caso le llame index.html

En las etiquetas canvas irán las gráficas que realizaremos, en este caso solo dos tipos de gráficas, con chart se pueden mostrar varios tipos

Ahora ya tenemos casi todo listo, solo necesitamos el Script para que nos muestre las graficas:

en el script recogemos los datos que mandamos en el contexto del views.py, creamos una nueva variable pero esta vez en javaScript con var= {{nombre_contexto|safe}} es muy importante esta parte hacerlo

Luego simplemente metes los datos en las variables a mandar a graficar con chart.js, hasta en este punto esque utilizamos este scripts pues solo nos sirve para dibujar las graficas

El resultado sería algo como esto: