• HOME
  • ABOUT US
  • JOBS
    • Find Jobs
    • Job Dashboard
    • Post a Job
  • SERVICES
  • BLOG
    • VIDEOS
    • DOWNLOADS
  • SEARCH
  • SHOP
  • Log In
Toggle navigation Hey! Homeworx
  • HOME
  • ABOUT US
  • JOBS
    • Find Jobs
    • Job Dashboard
    • Post a Job
  • SERVICES
  • BLOG
    • VIDEOS
    • DOWNLOADS
  • SEARCH
  • SHOP
  • Log In

How to plot graph in Django using Plotly?

December 6, 2020December 14, 2020 Hey! Admin 0
Posted in Home School, Learning, Linux, School, Technology

How to plot graph in Django using Plotly?

December 6, 2020December 14, 2020 Hey! Admin 0

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.

Plotly Graph

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.

Articles By Hey! Admin

Author Archives Author Website
Posted in Home School, Learning, Linux, School, Technologycode django graph learn learning linux programming tutorial

Post navigation

Less than Php 18,000 affordable gaming desktop – Intel i3-9100f
Install Python3 with higher version of Sqlite3 3.34 in CentOS and RedHat

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Appreciation Gift

Thank you for sending your gift. It would help me a lot to maintain and update this site.

Follow us ProKids shop on instagram
Follow us ProKids shop on instagram
Bentoshibox like and subscribe to youtube channel
Hey! HomeWorx official logo

Developed by Code Themes .