Как отобразить модели django с полем datetime на графике с помощью chartjs

Привет всем я застрял на проблеме, у меня есть модель django, которая называется ScanBatch, теперь этот Scan batch состоит из таких полей как метка времени (поле datetime), домен (поле char) и общее количество найденных id (целочисленное поле)

Мой код графика: 

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
                }
              }]
            }
          }
    });

код модели является

class ScanBatch(models.Model):
   domain = models.CharField(max_length=255)
   timestamp = models.DateTimeField(auto_now_add=True)
   valid_ids_found = models.IntegerField(default=0)

вопрос с подвохом в том, как мне сделать так, чтобы график показывал пакетные данные исторически из django, а затем выводил их на график

Я хочу показывать партии исторически по дате, а также группировать по домену

Примером того, какие данные нужно построить, являются : www.someexample.com | 2022-09-03 | 34

www.someexample.com | 2022-09-04 | 55

Сначала нужно получить значения и правильно просуммировать все ID. (Для каждого дня). Чтобы сделать это, вы можете получить их из:

Добавлен домен

Пуск редактирования

chartdata = ScanBatch.objects.all().values('timestamp__date').annotate(models.Sum('valid_ids_found'),domain=models.F('domain'))

Затем передайте это в шаблон.

В шаблоне, чтобы подготовить данные, нужно выполнить итерацию по ним в javascript. Например, так:

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)

Конец редактирования

Теперь у вас есть подготовленные данные, готовые к использованию на графике.

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
                }
              }]
            }
          }
    });

Это первая часть, по крайней мере, у меня нет достаточных знаний о Chart.js, чтобы различать и домен. Извини, дружище. Хотя это может помочь тебе!

Вернуться на верх