How to render default values from Django Serializer for charting purposes? - django-rest-framework

Question

I'm using Django Rest to aggregate some data for my front end to render (through Chart.js)
Say I want to have a chart with the months (Jan-Dec) on the x-axis and total_cost values on the y-axis. How can I make sure to always spit out all 12 months and provide "0" for the y-axis if no value for that month is found?
E.g, this serialized data from Django rest is missing values for November and December, but I still need those labels for Chart JS to properly render
[
{
"month": "2020-01-01",
"total_cost": "199.00"
},
{
"month": "2020-02-01",
"total_cost": "222.00"
},
{
"month": "2020-03-01",
"total_cost": "399.00"
},
{
"month": "2020-04-01",
"total_cost": "414.00"
},
{
"month": "2020-05-01",
"total_cost": "555.00"
},
{
"month": "2020-06-01",
"total_cost": "615.00"
},
{
"month": "2020-07-01",
"total_cost": "700.00"
},
{
"month": "2020-08-01",
"total_cost": "913.00"
},
{
"month": "2020-09-01",
"total_cost": "552.00"
},
{
"month": "2020-10-01",
"total_cost": "1000.00"
}
]
Perhaps this is a matter for the frontend rather than the backend?
If it helps, my django query looks like this:
queryset = Expense.object.annotate(month=TruncMonth('expense_date'))
.values('month')
.annotate(total_cost=Sum('cost'))
.values('month', 'total_cost')
.order_by('month')

Answer 1

As you correctly guessed, this is best handled in the the frontend rather than in the backend.
You can define your x-axis as a time cartesian axis that accepts the data of your dataset as individual points through objects containing x and y properties each. Given the base data present in an array named baseData, such data can be created through Array.map() as follows:
baseData.map(o => ({ x: o.month, y: Number(o.total_cost) }))
To make sure, all 12 months are included in the chart, you'll further have to define ticks.min and ticks.max options on the x-axis.
ticks: {
min: '2020-01',
max: '2020-12'
}
Please take a look at the following runnable code and see how it works.
Note that Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
const baseData = [
{ "month": "2020-01-01", "total_cost": "199.00" },
{ "month": "2020-02-01", "total_cost": "222.00" },
{ "month": "2020-03-01", "total_cost": "399.00" },
{ "month": "2020-04-01", "total_cost": "414.00" },
{ "month": "2020-05-01", "total_cost": "555.00" },
{ "month": "2020-06-01", "total_cost": "615.00" },
{ "month": "2020-07-01", "total_cost": "700.00" },
{ "month": "2020-08-01", "total_cost": "913.00" },
{ "month": "2020-09-01", "total_cost": "552.00" },
{ "month": "2020-10-01", "total_cost": "1000.00" }
];
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
datasets: [{
label: 'My Dataset',
data: baseData.map(o => ({ x: o.month, y: Number(o.total_cost) })),
fill: false,
backgroundColor: 'green',
borderColor: 'green'
}]
},
options: {
responsive: true,
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month',
tooltipFormat: 'MMM YYYY'
},
ticks: {
min: '2020-01',
max: '2020-12'
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 200
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>