Render matplotlib graph into html via views in django

Question

I have a django view as follows. I am using matplotlib to generate a bargraph.

def myview(request, pk, sub):
    x=[1,2,3,4,5,6]
    y=[5,2,6,8,2,7]
    plot(x,y, linewidth=2)
    xlabel('x-axis')
    ylabel('yaxis')
    title('sample graph')
    grid(True)

    buffer = StringIO.StringIO()
    canvas = pylab.get_current_fig_manager().canvas
    canvas.draw()
    graphIMG = PIL.Image.fromstring("RGB", canvas.get_width_height(), canvas.tostring_rgb())
    graphIMG.save(buffer, "PNG")
    pylab.close()

    assgn = MyModel.objects.filter(data=pk, subject=sub)
    return render_to_response('mypage.html', {'assgn':assgn})

How do i pass the bargraph along with my query in my render_to_response ? Also how will i plot this graph in my html?

Morten Engelsmann · Accepted Answer · 2020-11-19 09:10:21Z

You have to save the plot as an image file and pass the link to this file to your template. I am not familiar with the library that you work on but I assume the following line would save the graph to an actual png file:

graphIMG.save(buffer, "PNG")

Once this is saved to disk, you should have a file path to it. Make sure this file is accessible by Django (i.e. put your file inside the folder specified by MEDIA_ROOT in your settings.py file).

Now, pass the path of your graph to your template:

from django.shortcuts import render

def myview(request, pk, sub):
    ...
    imagepath = ...
    context = {'imagepath': imagepath}
    return render_to_response('mypage.html', context}

Then, in your template:

<img src="{{ imagepath }}">

It is likely that you won't get this for the first try (i.e. image not showing up). To debug it, open your webpage and inspect the link to your image, copy the link and paste it in your browser to see if you can access it. If not, check your urls.py and add the following line so that Django will serve the image files:

urlpatterns = patterns('',
    ...,

    url(r'^images/(.*)$', 'django.views.static.serve',
        {'document_root': settings.MEDIA_ROOT}), 
)

Note the r'^images/(.*)$' part, your settings might be different from mine.

Here is the documentation: https://docs.djangoproject.com/en/1.4/howto/static-files/

The documentation is for django 1.4 (so click on the version that you use) but it applies to later versions of django as well. The documentation also provides a 'shortcut' version of this solution. So read it.

As mentioned in the documentation, this solution is only suitable for development. In production, you might want to use apache or nginx to serve static contents.

@RogerFederer glad to hear! what minor changes did you have to make?

Collectives™ on Stack Overflow

Render matplotlib graph into html via views in django

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related