Learn how to effectively render data on a Web App by creating charts in Django Web App. Adding beautiful charts onto you web app increases it’s readability and user friendliness. Render large database into any type of graph or chart greatly enhancing its readability by employing charts on to your web app.
This can very easily be achieved using Chart.js an open source solution for creating charts which can very easily be integrated with Django to develop dynamic charts for our Web App.
Requirements:- System Loaded With Django, BaseApp, OS like Windows, Linux etc.
What Can We Make using Chart.js?
- Bar Charts
- Line Chart
- Area Chart
- Scatter Chart
- Pie Chart
Import and Installation
The chart.js can be simply added into your HTML template using the JavaScript tag. You can go to the official page for this or simply add the script tag into your template.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
Sample Project
Lets build a simple admin dashboard for our website to render these charts onto the dashboard to increase the readability of data.
In the model we will be using is a simple sales models with the bare minimums. You of course can build up on this according to your project.
Create an app for the model you wish to view
python manage.py startapp company
Create a models.py file and add the following model
class Company(models.Model):
name = models.CharField(max_length=30)
profit = models.FloatField()
Add some data into your database to be later made into the graph.
Update the views.py
The views.py is changed to change data to make the chart data dynamic from the static one we have here. The ChartData class is updated.
class ChartData(APIView):
authentication_classes = []
permission_classes = []
def get(self, request, format=None):
qs=Company.objects.all()
labels = []
default_items = []
for item in qs:
labels.append(item.name)
default_items.append(item.profit)
data = {
"labels": labels,
"default": default_items,
}
return Response(data)
The final project will look like this
