Creating charts and output them as images to the browser in Django using Python matplotlib library.

Posted by: ganesh 6 years, 9 months ago

(Comments)

Matplotlib is a Python 2D plotting library which produces publication quality figures in a variety of hardcopy formats and interactive environments across platforms.

In this article we will see how to make use of matplotlib library and make some nice looking graphs in real time, as images from dynamic data.

First you need to install matplotlib. To do that run the following commands in your terminal.

python -m pip install -U pip setuptools
python -m pip install matplotlib

For more information regarding installation you can visit this page https://matplotlib.org/users/installing.html

Let us look at a simple example of how to generate a graph from a function in python.

from matplotlib import pylab
from pylab import *

x = arange(0, 2*pi, 0.01)
s = cos(x)**2
plot(x, s)

xlabel('xlabel(X)')
ylabel('ylabel(Y)')
title('Simple Graph!')
grid(True)
show()

The above code will result in the graph as shown below.

alt text

Now let's see how we can output this graph to browser using Django view

from django.http import HttpResponse
from matplotlib import pylab
from pylab import *
import PIL, PIL.Image, StringIO

def getimage(request):
    # Construct the graph
    x = arange(0, 2*pi, 0.01)
    s = cos(x)**2
    plot(x, s)

    xlabel('xlabel(X)')
    ylabel('ylabel(Y)')
    title('Simple Graph!')
    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")

Here we are storing the image in a string buffer and returning this buffer using the Django HttpResponse Class with minetype as image/png.

We can show more than one graph in the same image. See the below example code.

from matplotlib import pylab
from pylab import *

x = arange(0, 2*pi, 0.01)
s = sin(x)
c = cos(x)
plt.plot(x, s)
plt.plot(x,c)

xlabel('xlabel(X)')
ylabel('ylabel(Y)')
title('Simple Graph!')
grid(True)
plt.show()

The above code will result in following graph.

alt text

We can also make this dynamic by allowing the user to input the function and domain using django forms and creating graphs using those inputs and displaying the graphs in real time.

Say for example user inputs following function and domain in the input fields provided using django forms:

alt text

we can plot the graph by modifying our code like this 

def getimage(request):
    domain = request.data["domain"]
    function = request.data["function"]
    x = arange(domain[0], domain[1], 0.01)
    s = function
    plot(x, s)

    xlabel('xlabel(X)')
    ylabel('ylabel(Y)')
    title('Simple Graph!')
    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")

Here I am assuming the data to the view is in the form of {"domain": [0, 2pi], "function": sin(x)exp(-x)} The output graph for the above user input will be as shown below

alt text

These are the simple examples. One can use matplotlib to show complex functions as graphs. To learn more visit matplotlib and don't forget to play with this beautiful 2D graph libray.

Comments

Recent Posts

Archive

2022
2021
2020
2019
2018
2017
2016
2015
2014

Tags

Authors

Feeds

RSS / Atom