Binary Coffee

Usando Chart.js en Django

django python chart
Te ense√Īar√© a crear y configurar tu primer gr√°fico de l√≠neas con Chart.js y Django de la manera m√°s sencilla que conozco, lo √ļnico que necesitas tener: es un proyecto con Django. Django es un framework de desarrollo web de c√≥digo abierto, escrito en Python, que respeta el patr√≥n de dise√Īo conocido como MVC. Chart.js es una biblioteca JavaScript gratuita de c√≥digo abierto para la visualizaci√≥n de datos, que admite 8 tipos de gr√°ficos: barra, l√≠nea, √°rea, pastel, burbuja, radar, polar y dispersi√≥n. **Recomendado:** > Aprende a [generar c√≥digos qr](https://binary-coffee.dev/post/generando-codigos-qr-con-python). ## Creando nuestro modelo Vamos a crear un modelo que va a guardar visitas a una p√°gina web. ``` # models.py from django.utils import timezone class View(models.Model): ip = models.CharField(max_length=15) created_at = models.DateTimeField(default=timezone.now) ``` Una vez creado recuerda crear y aplicar las migraciones para que los cambios se reflejen en la base de datos, ``` $ python manage.py makemigrations $ python manage.py migrate ``` ## Crear la vista Lo que mostraremos en el gr√°fico es la cantidad de visitas diarias, por lo que tenemos que darle formato a nuestra informaci√≥n. Adicionalmente debemos mandar estos datos en formato JSON, que es el que recibe Chart.js, creemos la vista. ``` # views.py from django.shortcuts import render from .models import View import json def stats(request): views = ( View.objects.all() .annotate(date=TruncDay("created_at")) .values("date") .annotate(y=Count("id")) .order_by("-date") ) view_s = json.dumps(list(views), cls=DjangoJSONEncoder) return render(request, 'stats.html', { 'view_s': view_s, } ``` ## Registramos la vista en las urls ``` # urls.py from django.conf.urls import url from app.views import stats from django.contrib import admin urlpatterns = [ path('admin/', admin.site.urls), url('', stats), ] ``` ## Creamos y configuramos nuestra plantilla En nuestro HTML agregaremos las dependencias de Chart.js, tanto los archivos javascript como los estilos que necesita para funcionar correctamente. ``` <!-- templates/stats.html --> <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" /> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> <div style="width: 100%; height: 20em; margin-top: 3em;"> <canvas id="myChart" style="margin-bottom: 30px; width: 90%; height: 100%;"></canvas> </div> <script> const ctx = document.getElementById('myChart').getContext('2d'); const views = {{ view_s | safe }}; views.forEach((d) => { d.x = new Date(d.date); }); // Render the chart const chart = new Chart(ctx, { type: 'line', data: { datasets: [ { label: 'Visitas', data: views, borderColor: 'rgba(20,20,220,0.5)', backgroundColor: 'rgba(0, 0, 0, 0)' }, ], }, options: { responsive: true, scales: { xAxes: [ { type: 'time', time: { unit: 'day', round: 'day', displayFormats: { day: 'MMM D', }, }, }, ], yAxes: [ { ticks: { beginAtZero: true, }, }, ], }, }, }); </script> </body> </html> ``` Una vez hecho esto simplemente tenemos que agregar algunos datos desde la administraci√≥n y acceder a [localhost:8000](http://localhost:8000) y deber√≠as ver un gr√°fico como el de abajo. ![Gr√°fico con Chart.js](https://api.binary-coffee.dev/uploads/72c8a0f18a604a30948137a112e24363.png) Y esto es todo, si tienes dudas o sugerencias e incluso si encuentras un bug d√©jame saber en los comentarios, Saludos. > Keep Calm And Drink Binary Coffee
Opiniones