How to plot graph in Django using Plotly?
What is Plotly?
Plotly is an open source application that lets you plot and draw any type of graph. It is an interactive graph. Check out plotly.com for more info and documentation.
Setup the graph
In this example, I wanted to graph my server’s status in percentage (%) according to its status update date.

Install Plotly
I used python3.8, so in this tutorial I will will use pip3 command to install plotly.
pip3 install plotly
Add to Django’s project settings.py
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'plotly',
'monitoring',
]
Create table in models.py
from django.db import models
class Status(models.Model):
statusid = models.IntegerField(primary_key=True)
server = models.CharField(max_length=20)
mirrorpercent = models.IntegerField(null=True, blank=True)
status_updatedate = models.CharField(max_length=30, null=True, blank=True)
addeddate = models.DateTimeField()
updatedate = models.DateTimeField()
class Meta:
verbose_name_plural = 'Statuses'
def __str__(self):
return self.server
Configure application views.py
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render
from django.db.models import Max, Min, Subquery, Count
from monitoring.models import Status
from plotly.offline import plot
from plotly.graph_objs import Scatter
import plotly.graph_objs as go
def plotlygraph(request, servername):
x_data = Status.objects.all().filter(server=str(servername)).values_list('status_updatedate', flat=True).order_by('statusid')
x_data = list(x_data)
y_data = Status.objects.all().filter(server=str(servername)).values_list('mirrorpercent', flat=True)
y_data = list(y_data)
fig = go.Figure()
fig.update_layout(
height=600,
yaxis_title="Status Percentage (%)",
yaxis_range=[0, 100],
yaxis_dtick=20,
legend_title="Legend Title",
font=dict(
#family="Courier New, monospace",
size=13,
#color="RebeccaPurple"
)
)
scatter = go.Scatter(x=x_data, y=y_data,
mode='lines', name='status percent',
opacity=0.8, marker_color='green')
fig.add_trace(scatter)
drawgraph = plot(fig, output_type='div', include_plotlyjs=False, show_link=False, link_text="")
context = {'drawgraph': drawgraph, 'servername':servername}
return render(request, 'monitoring/interactive_graph/interactive_graph.html', context)
Configure application’s urls.py
from django.urls import path, re_path, include
from . import views
urlpatterns = [
path('', views.index, name='Home Page'),
path('interactive_graph/<str:servername>', views.plotlygraph, name='interactive_graph'),
]
Setup html file
Go to your application template and add the context from your view.py.
vim /var/www/myproject/myapplication/template/monitoring/interactive_graph/interactive_graph.html
{% extends "monitoring/base.html" %}
{% block content %}
<div class="red-header monitoring-header-primary">
<h4><i class="fa fa-line-chart"></i> {{ servername }} Interactive Historical Graph</h4>
</div>
<div class="mirrorpercentgraph">
{% autoescape off %}
{{ drawgraph|safe }}
{% endautoescape %}
</div>
{% endblock content %}
Please comment down below if this does not work for you. Perhaps I could give you a recommendation or work around.