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.