Build Interactive Analytical Dashboard in Django
Tags: canvasjs, django, python, charts
Published: 2023-02-14 12:40:48


Django is a powerful Python Web Framework that makes building web applications and dashboards a breeze. There are open-source dashboards built with Django that come with modern UI Kits, and developers can create analytic dashboards in a Django app. In this article, let's explore how to build a beautiful dashboard in Django using Bootstrap, [CanvasJS Python Charts](https://canvasjs.com/python-charts/) and a few other tools.


![Django Dashboard using CanvasJS Python Charts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo4cmirykz4ab7h26m9e.png)
## Project Setup
Create a new Django project. And create a new app within the project.
```
django-admin startproject dashboard
python manage.py startapp charts
```
## Create View
Create a new file in the charts app called views.py. In this file, we'll define the view that will render our dashboard. Here's an example view that renders a template called index.html
```
from django.shortcuts import render
 
def dashboard(request):
    return render(request, 'index.html')
```
## Create Template
Create a new file in the charts/templates directory called dashboard.html. Define the layout of the dashboard using Bootstrap.
```
<div class="container-fluid">
	<div class="row">
		<nav class="col-md-2 d-none d-md-block bg-light sidebar">
			<!-- Sidebar content goes here -->
		</nav>

		<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
			<!-- Main content goes here -->
		</main>
	</div>
</div>
```
## Add Charts to the Dashboard
CanvasJS is a powerful charting library that lets you create interactive charts for dashboards. To add CanvasJS charts to the project, download the library and include it in the template.
- Download the library from CanvasJS website.
- Extract the files to 'charts/static' folder.
- Include canvasjs.min.js in the template.
```
<script src="{% static canvasjs.min.js' %}"></script>
```
### Create Charts
Now, that CanvasJS is included in the template, you can start creating different of charts like line, column, pie, etc. to show them in the dashboard.
```
/* index.html */
<div id="chartContainer" style="width: 100%; height: 360px;"></div>
<script>
    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            title:{
                text: "Column Chart"
            },
            data: [{
                dataPoints: {{ datapoints | safe }}
        });
        chart.render();
    }
</script>
```
Update the view to return the data for the chart.
```
/* views.py */
from django.http import HttpResponse
from django.shortcuts import render
from django.template import loader
 
def index(request):
    datapoints= [
        { "label": "Jan", "y": 10000 },
        { "label": "Feb", "y": 30162 },
        { "label": "Mar", "y": 26263 },
        { "label": "Apr", "y": 18394 },
        { "label": "May", "y": 18287 },
        { "label": "Jun", "y": 28682 },
        { "label": "Jul", "y": 31274 },
        { "label": "Aug", "y": 33259 },
        { "label": "Sep", "y": 25849 },
        { "label": "Oct", "y": 24159 },
        { "label": "Nov", "y": 32651 },
        { "label": "Dec", "y": 31984 }
    ]
    return render(request, 'index.html', { "datapoints" : datapoints })
```

## Customize the Dashboard
Now that you have added one chart to the dashboard, add few more charts and customize the look and feel of the charts to match your dashboard. You can change the color & font-family of all the textual content of the chart to match it with the theme of dashboard.

Github Link: [https://github.com/vishwas-r/Django-Dashboard-using-CanvasJS-Python-Charts](https://github.com/vishwas-r/Django-Dashboard-using-CanvasJS-Python-Charts)