# Making charts and output them as images to the browser in Django

Simple graph made with matplotlib

Lets say you are working on a website made in Django. And you want to make some nice looking graphs real time, as images from dynamic data. This can be done by using the python 2D graph library matplotlib. The library can be found in the debian package python-matplotlib. A simple graph showing a sine curve, seen to the right, can be generated in regular python using the following code(taken from this example):

from pylab import *   t = arange(0.0, 2.0, 0.01) s = sin(2*pi*t) plot(t, s, linewidth=1.0)   xlabel('time (s)') ylabel('voltage (mV)') title('About as simple as it gets, folks') grid(True) show()

#### Output graph to browser from a Django view

If you want to output this graph as a PNG image to the browser from a view in Django, you can store the image in a string buffer and output this buffer using the HttpReponse class in Django and set the mime type to image/png.

from django.http import HttpResponse from matplotlib import pylab from pylab import * import PIL, PIL.Image, StringIO   def showimage(request): # Construct the graph t = arange(0.0, 2.0, 0.01) s = sin(2*pi*t) plot(t, s, linewidth=1.0)   xlabel('time (s)') ylabel('voltage (mV)') title('About as simple as it gets, folks') grid(True)   # Store image in a string buffer buffer = StringIO.StringIO() canvas = pylab.get_current_fig_manager().canvas canvas.draw() pilImage = PIL.Image.fromstring("RGB", canvas.get_width_height(), canvas.tostring_rgb()) pilImage.save(buffer, "PNG") pylab.close()   # Send buffer in a http response the the browser with the mime type image/png set return HttpResponse(buffer.getvalue(), mimetype="image/png")

### 10 Responses

1. You don’t need io or cStringIO. You can just do:
canvas = FigureCanvasAgg(f)
response = HttpResponse(content_type=’image/png’)
canvas.print_png(response)
plt.close(f)
return response

2. Anton says:

-pylab.cose()
+pylab.close()

3. Derek says:

Can you show an example that involves creating and sending multiple chart images to the same page – I cannot get this to work.

4. Satvir says:

Thanku it was really helpful.

5. noemi says:

Hi! Thanks for your website, it is really useful. About the output graph to browser from a Django view, I wonder if instead of using HttpResponse we can use render_to_response and represent the graph in a specific html page. I’ve done something like this:

# serialize to HTTP response
response = HttpResponse(buffer.getvalue(), mimetype=”image/png”)
return render_to_response(‘eQL/dev/showImage.html’, {‘response’:response})

But I don’t know how to plot it in the html file.

Thanks

• Erik Smistad says:

Images on websites are sent in separate http responses, so I don’t think that’s possible

6. masood says:

whats the book you prefer to learn python with that

• Erik Smistad says:

I don’t have a Python book, I use the manual on the web instead

7. Nathan Moos says:

you could use cStringIO…its faster

• Erik Smistad says:

I tried using cStringIO instead of StringIO and measured execution time using datetime. Both buffer types ran in about 0.25 seconds. I think this is because the code only performs one large write to the buffer. If you have a buffer with several writes and reads, cStringIO will probably be notably faster