title: How to embed matplotlib graph in Django webpage?
body: <p>So, bear with me as I'm VERY new to Django, Python, and web-development in general. What I want to do is display a graph that I've made using matplotlib. I had it working to where the home page automatically redirects to the png of the graph (basically a tab in the browser with the graph displayed). However, now what I want is to see the actual homepage with the graph simply embedded. In other words, I want to see the navigation bar, etc. and then the graph in the body of the site. </p>
  
  <p>So far, I've searched and I sort of have an idea of how to accomplish this. What I'm thinking is having a special view that simply returns the graph. Then, somehow accessing this png image from an img src tag in my template that I will use to display my data. </p>
  
  <p>Graph Code: </p>
  
  <pre><code>from django.shortcuts import render
  import urllib
  import json
  from django.http import HttpResponse
  from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
  from matplotlib.figure import Figure
  import datetime as dt
  import pdb
  
  def index(request):
      stock_price_url = 'https://www.quandl.com/api/v3/datatables/WIKI/PRICES.json?ticker=GOOGL&amp;date.gte=20151101&amp;qopts.columns=date,close&amp;api_key=KEY'
  
      date = []
      price = []
  
      #pdb.set_trace()
      source_code = urllib.request.urlopen(stock_price_url).read().decode()
  
      json_root = json.loads(source_code)
      json_datatable = json_root["datatable"]
      json_data = json_datatable["data"]
  
      for day in json_data:
          date.append(dt.datetime.strptime(day[0], '%Y-%m-%d'))
          price.append(day[1])
  
      fig=Figure()
      ax = fig.add_subplot(1,1,1)
  
      ax.plot(date, price, '-')
  
      ax.set_xlabel('Date')
      ax.set_ylabel('Price')
      ax.set_title("Google Stock")
  
      canvas = FigureCanvas(fig)
      response = HttpResponse(content_type='image/png')
      #canvas.print_png(response)
      return response
  </code></pre>
  
  <p>Template Code:</p>
  
  <pre><code>{% extends "home/header.html" %}
    {% block content %}
    &lt;p&gt;Search a stock to begin!&lt;/p&gt;
    &lt;img src="home/graph.py" /&gt;
  
    {% endblock %}
  </code></pre>
  
  <p>What I'm getting now:</p>
  
  <p><a href="https://i.stack.imgur.com/R7k3B.png" rel="noreferrer">Current Page</a></p>