Communicate better than your colleagues. All open-source. Get exclusive access.

Quickly Create Interactive Charts in Django

Quickly Create Interactive Charts in Django

The Plotly python library is an open-source library for rendering interactive charts. With Plotly, we can visualize data using several plots like a bar, box, histogram, line, etc.

Plotly supports over 40 chart kinds, encompassing a wide range of statistical, financial, geographic, scientific, and 3-dimensional applications. Plotly enables Python users to create beautiful interactive web-based visualizations.

In this tutorial, we’ll be looking at integrating Plotly in Django by building a simple Gantt chart project.

GitHub Repository


To follow along with this tutorial, we must have the following:

  • Python3 installed.
  • A basic understanding of Django.

Setup Project

Let’s start by creating a new virtual environment.

A virtual environment allows us to create a virtual space on our computer. By creating a virtual environment, we separate the necessary library installation for a project without installing them globally.

Now, let’s create a virtual environment env by running the command below:

python -m venv env

We tell Python to create the virtual environment in a folder named env in the current directory.

On creation, we activate the virtual environment using the following command:

source env/bin/activate

On activating the environment, install Django using the following command:

pip install django

Now, let’s create a new Django project django_plotly using:

django-admin startproject django_plotly

Then, we navigate to the django_plotly directory and create a Django app:

cd django_plotly
django-admin startapp charts

Let’s add our app to the list of already installed apps. Navigate to the django_plotly directory and edit the file:


Now let’s install plotly by running the following command:

pip install plotly==5.6.0

And finally, we need to install pandas by running the following command:

pip install pandas

Creating a model

This tutorial will create an interactive chart that visualizes data from different projects in our application.

For our model, we’ll be creating a couple of fields:

  • name -The name field.
  • start_date - The start date field
  • responsible - The user/owner field
  • week_number - The week number field
  • finish_field - The finish date field

Under the charts directory, copy and paste the following code in the file:

from django.db import models
from django.contrib.auth.models import User

class Chart(models.Model):
    name = models.CharField(max_length=200) 
    start_date = models.DateField()
    responsible = models.ForeignKey(User, on_delete=models.CASCADE)
    week_number = models.CharField(max_length=2, blank=True)
    finish_date = models.DateField()

#string representation method
    def __str__(self):
        return str(
#overiding the save method
    def save(self, *args, **kwargs):
        if self.week_number == "":
            self.week_number = self.start_date.isocalendar()[1]
        super().save(*args, **kwargs)

Now, let’s register the model Chart in the file to modify it in the Django admin section:

from django.contrib import admin
from .models import Chart

Next, we need to migrate our model to the database.

Django's migrations allow us to publish changes to our models into the database schema. As a result, when we create a new model, we migrate to the database and create the needed table.

We migrate by running the following command:

python makemigrations # migrating the app and database changes
python migrate        # final migrations

A superuser has the permissions to create, edit, update and delete data in Django admin. Create a superuser by running the command below:

python createsuperuser

We may now access the admin page. To log in to the admin part of the server, use the following command.

python runsever

Next, go to http://localhost:8000/admin, and log in with our superuser credentials.

admin dashboard

Creating a view

A view in Django is a function that accepts a web request and returns a web response.

Now, let’s create a file in our leading project directory django_plotly and add the following code:

from django.shortcuts import render
from charts.models import Chart
import pandas as pd
from plotly.offline import plot
import as px
def index(request):
    qs = Chart.objects.all()
    projects_data = [
            'Start': x.start_date,
            'Finish': x.finish_date,
            'Responsible': x.responsible.username
        } for x in qs
    df = pd.DataFrame(projects_data)
    fig = px.timeline(
        df, x_start="Start", x_end="Finish", y="Project", color="Responsible"
    gantt_plot = plot(fig, output_type="div")
    context = {'plot_div': gantt_plot}
    return render(request, 'index.html', context)

Let’s take a closer look at our view:

  • We imported pandas , a library we installed earlier.
  • We also imported some modules from plotly.
  • We created a function index , which takes in a request. Then we defined a queryset that grabs all the data in our database.
  • Next, we created an object in projects_data to prepare the data for our chart. The represents our project name, Start:start_date represents our project start date, Finish:finish_date represents our project end date and finally Responsible:responsible.username represents the creator of a project displayed on the chart.
  • Then we used plotly’s timeline to plot our chart, where the x_start and x_end make up the x-axis, and y make up the y-axis. The colour helps us distinguish between projects by assigning different colours.
  • plot_div is what we will use in our template, which we will create soon.

Creating templates

We start by creating a templates directory in our base directory. This templates directory will house our index.html and base.html file.

base.html is the skeleton for all pages in the application.

Next, we add the following lines of code to the base.html file.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap css -->
    <link href="" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Plotly Chart</title>
    <div class="container mt-3">
        {% block content %}
        {% endblock content %}
    <!-- Bootstrap Js -->
    <script src="" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Next, we display our charts by adding the following code in our index.html

{% extends "base.html" %}
{% block content %}
    {% autoescape off %}
        {{ plot_div }}
    {% endautoescape %}}
{% endblock content %}

Next, we need to update the DIRS to the path of the templates folder in our file.

        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [ BASE_DIR / 'templates' ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [

Next, we edit our by adding the following code:

from django.contrib import admin
from django.urls import path
from .views import index
urlpatterns = [
    path('', index)

Now, let’s add a few projects and another user to our Django admin.

Click on the chart, then click Add Editor to add a project.

web project

One more project

django project

Let’s test this out by starting the server with the following command:

python runserver

Gantt chart


This article introduced Plotly, building a Gantt chart, and, most importantly, integrating Plotly in Django.


Related Blogs

Libraries vs. Frameworks: Which is right for your next web project?


Mon Aug 21 2023

Libraries vs. Frameworks: Which is right for your next web project?

Read Blog

Why you Should Use GraphQL APIs in your Next Project
Amarachi Iheanacho

Amarachi Iheanacho

Fri Feb 10 2023

Why you Should Use GraphQL APIs in your Next Project

Read Blog

Create a Real-time Data Analysis Platform in Nuxtjs
Tosin Moronfolu

Tosin Moronfolu

Thu Feb 02 2023

Create a Real-time Data Analysis Platform in Nuxtjs

Read Blog


Join Our Technical Writing Community

Do you have an interest in technical writing?


Have any feedback or questions?

We’d love to hear from you.

Managing a business is hard enough, let us handle your content.

Managing a business is hard enough,Let us handle your content.


Create 5x faster, engage your audience, & never struggle with the blank page.