Build Interactive Analytical Dashboard in Django

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 and a few other tools.

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