How to render and return plot to view in flask?

Question

How do I render a plot to the view in flask?

devices.py:

@devices_blueprint.route('/devices/test/')

def test():
    y = [1,2,3,4,5]
    x = [0,2,1,3,4]
    plot_url = plt.plot(x,y)
    return render_template('devices/test.html', plot_url=plot_url)

test.html

<div class="container">
      <h2>Image</h2>    
      <img src= {{ resized_img_src('plot_url') }} class="img-rounded" alt="aqui" width="304" height="236"> 
    </div>

Im trying to use seaborn with this, but even with matplolib I couldn’t get any result.

Note: I don’t want to save image and load it after.

Actually you could use [`io.BytesIO`](https://docs.python.org/3/library/io.html#io.BytesIO) in this case. — Remi Guan, Dec 28 '15 at 11:00

score 8 · Accepted Answer · edited May 27 '19 at 13:05

With matplotlib you can do:

#Add this imports
import StringIO
import base64

@devices_blueprint.route('/devices/test/')
def test():

    img = StringIO.StringIO()
    y = [1,2,3,4,5]
    x = [0,2,1,3,4]

    plt.plot(x,y)
    plt.savefig(img, format='png')
    plt.close()
    img.seek(0)

    plot_url = base64.b64encode(img.getvalue())

    return render_template('test.html', plot_url=plot_url)

In your Html put:

<img src="data:image/png;base64, {{ plot_url }}">

If you want to use seaborn, you just need to import seaborn and set the styles you want, e.g.

...
import seaborn as sns
...

@devices_blueprint.route('/devices/test/')
def test():

    img = StringIO.StringIO()
    sns.set_style("dark") #E.G.

    y = [1,2,3,4,5]
    x = [0,2,1,3,4]

    plt.plot(x,y)
    plt.savefig(img, format='png')
    plt.close()
    img.seek(0)

    plot_url = base64.b64encode(img.getvalue())

    return render_template('test.html', plot_url=plot_url)

Python 3 removed `StringIO`, and added it to the `io` library as `io.StringIO`. Just replace that statement to `from io import StringIO` if you're using py3. — Axiumin_, Nov 24 '19 at 04:18

score 0 · Answer 2 · answered May 26 '19 at 16:36

I was getting an "Assetion failed" error trying to send the plot using anaconda(python 2.7) on macOS. I managed to fix the bug by explicitly closing plt before returning. Thanks for this piece of code!

#Imports for Python 2.7.16
from cStringIO import StringIO
import base64

@devices_blueprint.route('/devices/test/')
def test():
    img = StringIO()
    y = [1,2,3,4,5]
    x = [0,2,1,3,4]

    plt.plot(x,y)
    plt.savefig(img, format='png')
    plt.close()
    img.seek(0)

    plot_url = base64.b64encode(img.getvalue())

    return render_template('test.html', plot_url=plot_url)

How to render and return plot to view in flask?

2 Answers2

Linked