Chartjs-How to display django models with datetime field in chart using chartjs?

by

0👍

First, you need to get the timestamps as date, together with the domain. Then you will need to sum up all the ID’s right? (For each day)

To do that, you can get it from:

Added domain

Edit start

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

Then pass that onto the template.

In the template, to prep the data you need to iterate over it in javascript.
Like so:

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)

Edit end

Now you have your chart data prepped, ready to use in the chart.

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

This is the first part at least, I do not have enough knowledge of Chart.js to differentiate between domain also. Sorry bud. Might help you along though!

Leave a comment