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:
Step #1 - Make a Model
I want to show my product sales report on the Chart. To do this, I created a model with the following structure in models.py:
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:
To do this, We add a function to our model to extract the data:
from django.db import modelsfrom django.db.models import Sumfrom django.db.models.functions import TruncYearclassSale(models.Model): ...@classmethoddefget_sales_report(cls): annotates ={'total_amount':Sum('amount')} sales = cls.objects.annotate( year=TruncYear('created_time') ).values('product_name', 'year').order_by().annotate(**annotates) data ={}for sale in sales:# This loop is for building data structures.if sale['year'].year notin 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
Step #2 - Create View
In view.py, we just need to call this function and create the structure needed for the chart. As follows:
import jsonfrom django.shortcuts import renderfrom app.models import Saledefindex(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 })returnrender(request, 'YOUR_TEMPLATE', context)
This is the structure of our chart, And it must be in JSON to be displayed in JS function.
Step #3 - Show in Template
In your template, just call your chart and send the data to JS Function. For example: