title: Creating HTML wrapper in django for matplotlib images
body: <p>I would like to take python generated matplotlib images and embed them into an HTML page that is generated by django. I am relatively new to django and have been struggling to get this to work.  I can successfully generate a matplotlib image alone on a webpage but have been unable to embed into an HTML page.  Django makes sense as my application will have many users that will have custom views with different data and frequently changing data coming from a database.  I would like to avoid creating many static files.</p>
  
  <p>I have looked at several posts but I am clearly missing something.  For example:
  <a href="https://stackoverflow.com/questions/5660838/generating-dynamic-charts-with-matplotlib-in-django">Generating dynamic charts with Matplotlib in Django</a>, <a href="https://stackoverflow.com/questions/14587438/images-on-django-site-from-matplotlib">images on django site from matplotlib</a> and <a href="https://stackoverflow.com/questions/14824522/dynamically-serving-a-matplotlib-image-to-the-web-using-python">Dynamically serving a matplotlib image to the web using python</a>.  </p>
  
  <p>I generate my matplotlib image view with temp and I think the wrapper is detail.  detail does not seem to work.  The filename plotdata.py and under the django tutorial example polls</p>
  
  <pre><code>from datetime import datetime, time
  from django.http import HttpResponse
  from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
  from matplotlib.figure import Figure
  from django.contrib.auth.decorators import login_required
  from django.shortcuts import render
  
  @login_required()
  def temp(request,x_id):
  
      #... code to generate fig for ploting - works well
  
      #This works but does not seem to pass file to HTML
      canvas = FigureCanvas(fig)
      response = HttpResponse(content_type='image/png')
      canvas.print_png(response)
      return response
  
  @login_required()
  def detail(request, x_id):
      render(request, 'polls/plotdata.html', {'x_id': x_id})
  </code></pre>
  
  <p>My urls.py is as follows.  temp works fine</p>
  
  <pre><code>from django.conf.urls import patterns, url
  from django.views.generic import DetailView, ListView
  from polls.models import Poll
  from polls import plotdata
  
  urlpatterns = patterns('',
      #polls url chopped out for brevity - follows tutorial
      url(r'^(?P&lt;x_id&gt;\d+)/plotdata/temp.png$', plotdata.temp, name='temp'),
      url(r'^(?P&lt;x_id&gt;\d+)/plotdata/detail$', plotdata.detail, name='detail'),
  )
  </code></pre>
  
  <p>My plotdata.html is as follows</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;title&gt;{% block title %}Plotting Template{% endblock %}&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="content"&gt;
          {% block content %}
          &lt;img src="{% url 'temp' x_id %}" &gt;
          {% endblock %}
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The error generated is as follows.</p>
  
  <pre><code>NoReverseMatch at /polls/1303070002/plotdata/detail
  Reverse for 'temp' with arguments '('1303070002',)' and keyword arguments '{}' not found.
  </code></pre>
  
  <p>This probably not the only problem with the above. I am certain I have missed something critical.  </p>
  
  <p>I tried hardcoding, as a test, to</p>
  
  <pre><code>&lt;img src="/polls/1303070002/plotdata/temp.png" &gt;
  </code></pre>
  
  <p>but it generated the following error</p>
  
  <pre><code>ValueError at /polls/1303070002/plotdata/detail
  The view polls.plotdata.detail didn't return an HttpResponse object.
  </code></pre>
  
  <p>I would like to get this framework working so I can put text and buttons around the data plot.  I am open to other ways to more efficiently create a solution.  Thank you very much for helping out!</p>
  
  <p>Repaired code, plotadata.py, is as follows</p>
  
  <pre><code>    #same header information from above before this line        
      canvas = FigureCanvas(fig)      #This needs to remain for savefig or print_png command
      response = HttpResponse(content_type='image/png')
      fig.savefig(response, format='png')     #Produces all white background
      return response
  
  def detail(request, salesorder_id):
      return render(request, 'rsa/plotdata.html', {'x_id':x_id})
  </code></pre>
  
  <p>I included return before render this time...  Changed path to hmtl file to avoid confusion with polls app.  Using savefig versus print_png as it formats more generically.  urls.py is the same.  I am trying to get plotdata.html to work as above, passing a variable to url via {{ x_id }} but I am missing something. Same error as above, NoReverseMatch. If I replace, in plotdata.html</p>
  
  <pre><code>&lt;img src="{% url 'temp' x_id %}" &gt;
  </code></pre>
  
  <p>with</p>
  
  <pre><code>{% load staticfiles %}
  &lt;img src="{% static '/rsa/1303070001/plotdata/temp.png' %}" &gt;
  </code></pre>
  
  <p>the image is embedded as desired.  Now adding a dynamic path such as</p>
  
  <pre><code>&lt;img src="{% static '/rsa/{{ x_id }}/plotdata/temp.png' %}" &gt;
  </code></pre>
  
  <p>just escapes the literal x_id => /rsa/%7B%7B%20x_id%20%7D%7D/plotdata/temp.png.  Trying x_id|safe ends up escaping the pipe and including literal safe...  %7B%7B%20x_id%7Csafe%20%7D%7D.  Hence I am trying to go back to using url versus static. Seems cleaner.  I think there is something wrong with the variable I am passing, x_id</p>