Skip to main content

Matplotlib in Django

The official django tutorial is very good, it stops short of displaying
data with matplotlib - which could be very handy for dsp or automated
testing. This is an extension to the tutorial. So first you must do the
official tutorial!
Complete the tutorial (as of writing this up to part 4).

Adding an image to a view

To start with we will take a static image from the hard drive and
display it on the polls index page.
Usually if it really is a static image this would be managed by the
webserver eg apache. For introduction purposes we will get django to
serve the static image. To do this we first need to change the

Change the template

At the moment poll_list.html probably looks something like this:

<h1>Django test app - Polls</h1>
{% if object_list %}

{% for object in object_list %}
<li><a href="/polls/{{}}">{{ object.question }}</a></li>

{% endfor %}
{% else %}

<p>No polls are available.</p>
{% endif %}

Change it by adding the line anywhere outside of the special "{% template tags %}"

<img src="/polls/staticImage.png" width="500px">

Now if you reload your page - you should see a placeholder
image, or nothing. If you view the source in your browser you should
see the extra line we added. If we try to view just the image, eg going
to [1] we should see a django 404 (page not found error).

Add the url for the static image into the url handler

Now we must add a line in the file to link the image with a view:
It should end up looking something like the following:

from django.conf.urls.defaults import *
from mysite.polls.models import Poll

info_dict = {
'queryset': Poll.objects.all()

urlpatterns = patterns('',
(r'^$', 'django.views.generic.list_detail.object_list',info_dict),
(r'^(?P<object_id>\d+)/$', 'django.views.generic.list_detail.object_detail',info_dict),
url(r'^(?P<object_id>\d+)/results/$', 'django.views.generic.list_detail.object_detail',dict(info_dict,template_name="polls/results.html"),'poll_results'),
(r'^(?P<poll_id>\d+)/vote/$', ''),
(r'^staticImage.png$', 'mysite.polls.views.showStaticImage'),


This means we have to make a view called showStaticImage.

Add the view for the static image

Add a function to the file as follows - replace the path with your own

def showStaticImage(request):
""" Simply return a static image as a png """

imagePath = "C:/Documents and Settings/thorneb/My Documents/Fiordland_Lake_Marian.png"
from PIL import Image
i =

response = HttpResponse(mimetype='image/png'),'PNG')
return response

This point it is worth noting we have imported PIL the python image library - it is not always included by default.

Now if you try reload your poll index page - you should see whatever image you choose.

Adding a dynamic image

Thats all well and good but we want to plot data, dynamically generated based on changing data.
Keeping going with the polls app - lets plot the results automatically - so the results page shows a graph.

  • Add an image tag somewhere in the results template:

    <img src="result.png">

  • Add another url clause:

    (r'^(?P<poll_id>\d+)/results/result.png$', 'mysite.polls.views.plotResults')

  • Add another new view:

def plotResults(request,poll_id):
import matplotlib
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
from matplotlib.dates import DateFormatter
fig = Figure()

p = get_object_or_404(Poll, pk=poll_id) # Get the poll object from django

x = matplotlib.numpy.arange(1,p.choice_set.count())
choices = p.choice_set.all()

votes = [choice.votes for choice in choices]
names = [choice.choice for choice in choices]

numTests = p.choice_set.count()
ind = matplotlib.numpy.arange(numTests) # the x locations for the groups

cols = ['red','orange','yellow','green','blue','purple','indigo']*10

cols = cols[0:len(ind)], votes,color=cols)

ax.set_xticks(ind + 0.5)



title = u"Dynamically Generated Results Plot for poll: %s" % p.question

canvas = FigureCanvas(fig)
response = HttpResponse(content_type='image/png')

return response

I may have fabricated these votes :-P

Hmm, sorry for the formating of this post - I'll try get back to it if I can find the original wiki page I made while at Tait.


Official Django Site

Popular posts from this blog

Driveby contribution to Python Cryptography

While at PyConAU 2016 I attended the Monday sprints and spent some time looking at a proposed feature I hoped would soon be part of cryptography. As most readers of this blog will know, cryptography is a very respected project within the Python ecosystem and it was an interesting experience to see how such a prominent open source project handles contributions and reviews.

The feature in question is the Diffie-Hellman Key Exchange algorithm used in many cryptography applications. Diffie-Helman Key Exchange is a way of generating a shared secret between two parties where the secret can't be determined by an eavesdropper observing the communication. DHE is extremely common - it is one of the primary methods used to provide "perfect forward secrecy" every time you initiate a TLS connection to an HTTPS website. Mathematically it is extremely elegant and the inventors were the recipients of the 2015 Turing award.

I wanted to write about this particular contribution because man…

My setup for downloading & streaming movies and tv

I recently signed up for Netflix and am retiring my headless home media pc. This blog will have to serve as its obituary. The box spent about half of its life running FreeNAS, and half running Archlinux. I’ll briefly talk about my experience with FreeNAS, the migration, and then I’ll get to the robust setup I ended up with.

The machine itself cost around $1000 in 2014. Powered by an AMD A4-7300 3.8GHz cpu with 8GB of memory. A SilverStone DS380 case is both functional, quiet and looks great. The hard drives have been updated over the last two years until it had a full compliment of 6 WD Green 4TiB drives - all spinning bits of metal though.

Initially I had the BSD based FreeNAS operating system installed. I had a single hard drive in its own ZFS pool for TV and Movies, and a second ZFS pool comprised of 5 hard drives for documents and photos.

FreeNAS is straight forward to use and setup, provided you only want to do things supported out of the box or by plugins. Each plugin is install…

Markdown Editor Component for Angular2

Thought I'd share a component I've been hacking on for angular2: a syntax highlighted markdown editor with rendered preview.

The code including a basic example is available on github. Because Angular2 hasn't yet been released this is really just me kicking the tyres.

This component relies on two libraries:

- marked for rendering markdown as html
- and ace editor for editing markdown
Basic Usage Example Add to your html template:
<markdown-editor (save)="updatedText($event)" [initial-text]="markdownContent"></markdown-editor> Remember to include the Markdowndirective in your @Component annotation:
@Component({ selector:'about', directives: [CORE_DIRECTIVES, Markdown] }) Another Example You can also control the component with external ui:
<button (click)="md.editMode = true">Custom Edit Button</button><markdown-editor [initial-text]="myMarkdownText" [show-edit-but…