Data visualisation is one of the best ways to suitcase a dataset.Picturizing a data will help us to convey the information in a efficient way.In this blog,we are going to use charts.js within our Django project to create a website that visualise a dataset.Charts.js is a javascript library which is used to create charts.We are going to integrate this library with our Django project.We are going to query a database and visualise it with the help of models.Let’s get started

create a Django project

>>django-admin startproject Django_charts

create an app inside the django project

>>python manage.py startapp charts

create a view which fetches the data from the model and renders a html page.In this HTML page,we are going to write scripts with charts.js to display a chart.

To begin with,Let’s create a model from which we are going to get the data.Move to models.py and start working in it.Here,we are going to visualize the dataset of text-editor users.So,our model will have two attributes,Text editor name and the number of people uses it.

In our models.py-

create a model in the following model.Initially,we are going to add the data to the table manually using the admin panel and query the table to visualise the data

To migrate the data,we have to set up the database connection.Go the settings.py file and set-up your database.Here,we are using Mysql as our database and the setup will be

Use migrate comments to migrate the table to the database

\>>python manage.py makemigrations

\>>python manage.py migrate

Now,we create a super user to access the data so that we can add data to the table via admin panel

\>>python manage.py createsuperuser

\>>create a superuser with a password

charts>>admin.py —

Import the model and register it

Now,we run our server to see check whether the model iss added or not.To use admin panel,

\>>python.manage,py runserver

\>>url will be Site administration | Django site admin

Now,enter your username and password

We can use the add option to add data to the table.

Now,we create a view to fetch the data and render a html page to visualise the data

\>>views.py

Create a template folder and create a html file inside the template folder.

join the template folder with the base directory.This can be done in settings.py

\>>settings.py\>>templates

Now,include our app in the project.Move to urls.py in django_charts

Create a urls.py file inside our charts app to map our view with a url

Now,all setup is done and lets work on views.py file to fetch the data and Html page to create a chart.

In views.py file

Query the table to fetch the data and pass it to the html page.

In admin panel,we add some text_editors to our model for sample

All done,now we work on html file to dispaly the chart

To do so,firstly, we have to install django-chartjs

\>>python -m pip install charts.js

Go to the official site of charts.js and get a template for the chart.you can find a number of templates for different type of charts.The only thing you have to do is to pass the value from the database to the html

Modify the views.py in the following way

This will query the db and get us the fields..

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

This script should be added to the html page

link for charts.js — https://www.chartjs.org/docs/latest/samples/line/line.html

A canva tag must be created to display the chart

<canvas id=”myChart” width=”400" height=”100"></canvas>

Then,pass the value through for loop

The modified html page wis shown above.The background color is added apart from the documentation data.

Now,we can run our server and the output chart will be displayed in the webpage

The resultant webpage:

Change the backgroundcolor field to get a colored chart

backgroundColor: [
                        'rgba(255, 99, 132, 0.2)', 
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],

Summary:

— Create an app

— Create a model

— fetch data from the model

— install charts.js

— pass the values

Data visualisation-Django with django-chartjs

The resultant webpage: