Python Forum
Show a plot from matplotlib in a webpage
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Show a plot from matplotlib in a webpage
#1
I would like to create a dashboard webpage with plots. I'm using Visual Studio Code IDE. I went through the tutorials to generate a webpage with variable inputs (the tutorial uses text input). And I went thorugh the Matplotlib example to create a plot. But when I go to my webpage it creates the plot in a new window. I'm not sure how to get it into my webpage.

In Visual Studio Code views.py file:
from django.http import HttpResponse
from django.shortcuts import render
from datetime import datetime

import matplotlib.pyplot as plt
import numpy as np
# matplotlib https://matplotlib.org/

def dashboard(request):
    np.random.seed(2000000)

    x = np.arange(0.0, 50.0, 2.0)
    y = x**1.3 + np.random.rand(*x.shape) * 30.0
    s = np.random.rand(*x.shape) * 800 + 500

    plt.scatter(x, y, s, c="g", alpha=0.5, marker=r'$\clubsuit$', label='luck')
    plt.xlabel("leprechauns")
    plt.ylabel("gold")
    plt.legend(loc='upper left')
    plt.show()
    return render(
        request,
        'dashboard/singleplot.html',
        {
            'plotDisp': plt
        }
    )
in the webpage template I'm not sure what format to show the plot. For instance: <img src={{ plotDisp }} /> or some sort of frame object?

My web address 127.0.0.1:8000/dashboard/ brings up the plot as a popup window (from plt.show(). And when I close that window the webpage is shown but can't find the plot reference. So obviously 'plotDisp': plt is not correct .
Reply
#2
To get this worked, you need do either:
1) save the figure as a file and render the template with appropriate file path, i.e. insert <img src='path/to/plot/saved.png'> somewhere in your template; 'path/to/plot/saved.png' could be passed to django template using variable, e.g. <img src="{{path_to_plot}}">.
2) encode entire image as base64 and pass this to your template. You would probably need to use BytesIO, like here; Note: this is suitable for relatively small images

IMHO, it would be better to use bokeh or render the plot using
a javascript library (nvd3, d3.js etc). In these cases, all computations are performed on the server side. Furhter, you just need to send the data, e.g. as json, and render it as a plot by means of some js-lib.
Reply
#3
Thanks for the help scidam. I never did get the <img... option to work but I did implement bokeh. The key here was to make sure the bokeh version in the html file was the most current version.
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  [Tkinter] Update matplotlib plot correctly Particledust 0 4,609 Apr-20-2020, 04:59 PM
Last Post: Particledust
  How to show graph as a slideshow in PyQt5 using matplotlib binsha 0 3,877 Mar-08-2019, 03:58 AM
Last Post: binsha

Forum Jump:

User Panel Messages

Announcements
Announcement #1 8/1/2020
Announcement #2 8/2/2020
Announcement #3 8/6/2020