HomeBlogs

How to Build a Real-Time Dashboard With Django & Chart.JS

Django

August 4, 2023

In today’s fast-paced world, businesses and organizations rely on real-time data to make informed decisions. A real-time dashboard is a powerful tool that allows you to monitor and visualize data in real-time, enabling you to react quickly to changing trends and patterns. In this blog post, we will explore how to build a real-time dashboard using Django, a popular Python web framework, and Chart.js, a flexible JavaScript charting library.

To read more about the importance of django rest framework, refer to our blog What are the Key Features & Best Practices of Django Rest Framework

Prerequisites:

Before we dive into the implementation, let’s go over the prerequisites for this tutorial:

Basic knowledge of Python and Django.
Familiarity with HTML, CSS, and JavaScript.
A working Django project.

Step 1: Setting up the Django project

Start by creating a new Django project or using an existing one. Install Django if you haven’t already. Open a terminal and run the following command:

$ pip install django

Once Django is installed, create a new Django project using the following command:

$ django-admin startproject dashboard_project

Step 2: Creating the Django app

Next, create a Django app within your project. This app will contain the necessary views and templates for our real-time dashboard. In your terminal, navigate to the project directory and run the following command:

$ cd dashboard_project
$ python manage.py startapp dashboard_app

Step 3: Configuring Django URLs

In the `dashboard_project` directory, open the `urls.py` file and configure the URL patterns for the dashboard app. Add the following code:

from django.urls import path
from dashboard_app import views

urlpatterns = [
    path('', views.dashboard, name='dashboard'),
]

Step 4: Creating the Dashboard view

Inside the `dashboard_app` directory, create a new file called `views.py` if it doesn’t exist already. Open the file and define a function-based view called `dashboard`:

from django.shortcuts import render

def dashboard(request):
    return render(request, 'dashboard.html')

Step 5: Creating the Dashboard template

Create a new directory called `templates` inside the `dashboard_app` directory if it doesn’t exist. Within the `templates` directory, create a new file called `dashboard.html` and add the HTML structure for the dashboard. This file will contain the Chart.js configuration and the necessary JavaScript code to update the chart in real-time.

Step 6: Installing Chart.js

To use Chart.js, you need to include it in your project. You can either download the library and add it to your project’s static files or use a CDN. In your `dashboard.html` file, include the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Real-Time Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="chart"></canvas>
    
    <script>
        // JavaScript code to update the chart in real-time
    </script>
</body>
</html>

Step 7: Fetching real-time data

To make the dashboard truly real-time, you need to fetch data from a data source and update the chart dynamically. In your `dashboard.html` file, add the following JavaScript code to fetch data using AJAX and update the chart.

<script>
    // Fetch data from the server
    function fetchData() {
        // AJAX code to fetch data
        // Update the chart with the fetched data
    }

    // Update the chart every few seconds
    setInterval(fetchData, 5000);
</script>

Step 8: Configuring Chart.js

To configure Chart.js and update the chart with real-time data, add the necessary JavaScript code inside the `fetchData` function. Refer to the Chart.js documentation for detailed information on configuring different types of charts.

To read more about creating a powerful CRUD App using Django, refer to our blog How to Create a Powerful CRUD App Using Django

Conclusion:

In this blog post, we have explored how to build a real-time dashboard using Django and Chart.js. By following the steps outlined above, you can create a dynamic and interactive dashboard that fetches data in real-time and visualizes it using Chart.js. Real-time dashboards provide valuable insights and help businesses make informed decisions quickly. With Django and Chart.js, you have a powerful combination to build your own real-time dashboard tailored to your specific needs. So, go ahead and start building your real-time dashboard today!

Horilla Editorial Team Author

Horilla Editorial Team is a group of experienced writers and editors who are passionate about HR software. We have a deep understanding of the HR landscape and are committed to providing our readers with the most up-to-date and informative content. We have written extensively on a variety of HR software topics, including applicant tracking systems, performance management software, and payroll software etc. We are always looking for new ways to share our knowledge with the HR community. If you have a question about HR software, please don't hesitate to contact us.