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 dashboardpython 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 renderdef 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>    <div>        <nav>            <!-- Sidebar content goes here -->        </nav>        <main>            <!-- 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></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 HttpResponsefrom django.shortcuts import renderfrom django.template import loaderdef 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