Binary Coffee
Usando Chart.js en Django
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.
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
Relacionado
Python: convertir de binario a decimal y viceversa
Generando códigos QR con Python
Generando permutaciones en Python
3 Formas de darle estilos a tus formularios de Django
Clasificando imágenes con Python
Aprende a desplegar un bot de Telegram en Heroku
Creando una API con Django y Graphene
Enviar correos con Python usando Gmail
Manejando Hojas de Cálculo con Python
Opiniones
class Relacionado {
Python: convertir de binario a decimal y viceversa
Generando códigos QR con Python
Generando permutaciones en Python
3 Formas de darle estilos a tus formularios de Django
Clasificando imágenes con Python
Aprende a desplegar un bot de Telegram en Heroku
Creando una API con Django y Graphene
Enviar correos con Python usando Gmail
Manejando Hojas de Cálculo con Python
}
Copyright ©2021|Todos los derechos reservados
Hecho con por DC's Community