How to Use Chart.js with Django

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.

Image: https://www.chartjs.org/

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.

Download Base App

Initial Look: Download Initial Template

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.

Entries For the Model

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

Final Look:-https://github.com/FalseG0d/DjangoChartJs/

Leave a Reply

Your email address will not be published. Required fields are marked *