Skip to main content

Django Chart Example

How To showcase information in Django

To display data on a chart, you must extract data from your model or anywhere else and send it to the JS function as JSON. For example, I did this through the following work flow:

✅ Create a new Model

I want to show my product sales report on the Chart. To do this, I created a model with the following structure in

from django.db import models

class Sale(models.Model):
amount = models.FloatField()
product_name = models.CharField(max_length=40)
created_time = models.DateTimeField()
updated_time = models.DateTimeField(auto_now=True)

class Meta:
verbose_name = 'sale'
verbose_name_plural = 'sales'

✅ Import Data

I used django-import-export package to add data through csv, xls, and etc.

Extract Data

In this part, I want to display the annual sales information for each product in the chart (By how much of each product has been sold each year) - the structure of data is as follows:

# Example
data = {

To do this, We add a function to our model to extract the data:

from django.db import models
from django.db.models import Sum
from django.db.models.functions import TruncYear

class Sale(models.Model):

def get_sales_report(cls):
annotates = {'total_amount': Sum('amount')}

sales = cls.objects.annotate(
).values('product_name', 'year').order_by().annotate(**annotates)

data = {}
for sale in sales: # This loop is for building data structures.
if sale['year'].year not in data:
data[sale['year'].year] = {}

data[sale['year'].year][sale['product_name']] = sale['total_amount']

# The labels are our product names. these gonna be shown in the chart
labels = list(sales.values_list('product_name', flat=True).distinct())
return data, labels

✅ Create View/Controller

In, we just need to call this function and create the structure needed for the chart. As follows:

import json
from django.shortcuts import render
from app.models import Sale

def index(request):
context = {'segment': 'index'}

sales, labels = Sale.get_sales_report()

# We need to change the data based on how it is displayed on the chart.
data = [
'y': year,
'a': '{:.2f}'.format(sales[year].get('A')),
'b': '{:.2f}'.format(sales[year].get('B')),
'c': '{:.2f}'.format(sales[year].get('C'))
} for year in sales

# This is the structure of our chart, And it must be in JSON to be displayed in JS function.
context['chart_data'] = json.dumps({
'element': 'morris-bar-chart',
'data': data,
'xkey': 'y',
'barSizeRatio': 0.70,
'barGap': 3,
'resize': True,
'responsive': True,
'ykeys': ['a', 'b', 'c'], # it can be custom
'labels': labels,
'barColors': ['0-#1de9b6-#1dc4e9', '0-#899FD4-#A389D4', '#04a9f5'] # it can be custom

return render(request, 'YOUR_TEMPLATE', context)

This is the structure of our chart, And it must be in JSON to be displayed in JS function.

✅ Show in Template

In your template, just call your chart and send the data to JS Function. For example:

{% raw %}
{% load static %}

<div class="col-xl-12">
<div class="card">
<div class="card-header">
<h5>Products Sales Report</h5>
<div class="card-block">
<div id="morris-bar-chart" style="height:300px"></div>


<!-- Load your JS files -->
<script src="{% static 'assets/plugins/chart-morris/js/raphael.min.js' %}"></script>
<script src="{% static 'assets/plugins/chart-morris/js/morris.min.js' %}
{% endraw %}"></script>

Morris.Bar({{ chart_data|safe }});

In this example, I used Morris.Bar Chart to display the information.

✅ Resources