Tengo un modelo Django que se llama ScanBatch. El lote de escaneo se compone de campos como la marca de tiempo (campo de fecha y hora), el dominio (campo de caracteres) y las identificaciones totales encontradas (campo de enteros).
El código de mi gráfico es:
const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: [], datasets: [] }, options: { scales: { yAxes: [{ id: 'A', type: 'linear', position: 'left', }, { id: 'B', type: 'linear', position: 'right', ticks: { max: 1, min: 0 } }] } } });el código de los modelos es
class ScanBatch(models.Model): domain = models.CharField(max_length=255) timestamp = models.DateTimeField(auto_now_add=True) valid_ids_found = models.IntegerField(default=0)¿Cómo hago para que el gráfico muestre históricamente los datos por lotes de django y luego los envíe al gráfico?
Quiero mostrar los lotes históricamente por fecha y también agrupar por dominio.
ejemplo de cómo son los datos para graficar son:
www.algunejemplo.com | 2022-09-03 | 34
www.algunejemplo.com | 2022-09-04 | 55
Primero, debe obtener las marcas de tiempo como fecha, junto con el dominio. Entonces tendrá que resumir todas las identificaciones, ¿no? (Para cada día)
Para hacer eso, puedes obtenerlo de:
chartdata = ScanBatch.objects.all().values('timestamp__date','domain').annotate(models.Sum('valid_ids_found'))Luego pásalo a la plantilla.
En la plantilla, para preparar los datos, debe iterarlo en javascript. Al igual que:
const chartData = {{ chart_data |safe }}; let arr = []; let arrlabels = []; let domainlabels = []; for (let value of Object.values(chartData)) { arr.push(value.valid_ids_found__sum); arrlabels.push(value.timestamp__date); domainlabels.push(value.domain) } console.log(chartData)Ahora tiene los datos de su gráfico preparados, listos para usar en el gráfico.
const chartData = {{ chart_data |safe }}; let arr = [] let arrlabels = [] for (let value of Object.values(chartData)) { arr.push(value.valid_ids_found__sum); arrlabels.push(value.timestamp__date); } const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: arrlabels , datasets: arr }, options: { scales: { yAxes: [{ id: 'A', type: 'linear', position: 'left', }, { id: 'B', type: 'linear', position: 'right', ticks: { max: 1, min: 0 } }] } } });Esta es la primera parte al menos, no tengo suficiente conocimiento de Chart.js para diferenciar entre dominio también. Lo siento amigo. ¡Aunque podría ayudarte!