Example of rendering a matplotlib image directly to Flask view

flaskplotlib.py

from flask import Flask, make_response
app = Flask(__name__)

@app.route("/simple.png")
def simple():
    import datetime
    import StringIO
    import random

    from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
    from matplotlib.figure import Figure
    from matplotlib.dates import DateFormatter

    fig=Figure()
    ax=fig.add_subplot(111)
    x=[]
    y=[]
    now=datetime.datetime.now()
    delta=datetime.timedelta(days=1)
    for i in range(10):
        x.append(now)
        now+=delta
        y.append(random.randint(0, 1000))
    ax.plot_date(x, y, '-')
    ax.xaxis.set_major_formatter(DateFormatter('%Y-%m-%d'))
    fig.autofmt_xdate()
    canvas=FigureCanvas(fig)
    png_output = StringIO.StringIO()
    canvas.print_png(png_output)
    response=make_response(png_output.getvalue())
    response.headers['Content-Type'] = 'image/png'
    return response


if __name__ == "__main__":
    app.run()

Yo this is awesome. Thank you and works perfectly out of the box.

Yo this is awesome. Thank you and works perfectly out of the box.

Thanks, this has given me some ideas!

Thanks, this has given me some ideas!

Thanks! I teaching my stats class using Python and this is very helpful.

Thanks! I teaching my stats class using Python and this is very helpful.

Just what I was looking for. Thanks!

Just what I was looking for. Thanks!

I have a problem that when render matplot image directly into flask view , I loose my basic features of matplot image(like now it donot show coordinates when hovering over the image ,now I cannot zoom into a particular portion of image etc ) . Can you suggest how can I render matplotimage into flask and still having these features of images ? (I am able to do that using pygal but not matplot lib)
Thanks in advance :)

I have a problem that when render matplot image directly into flask view , I loose my basic features of matplot image(like now it donot show coordinates when hovering over the image ,now I cannot zoom into a particular portion of image etc ) . Can you suggest how can I render matplotimage into flask and still having these features of images ? (I am able to do that using pygal but not matplot lib)
Thanks in advance :)

Thanks Andy. :)

Thanks Andy. :)

Great! thanks that works wonderfully.
Is there a way that I can do something like that and using Drawnow() and plotting a PNG image that will show my graph and also interactive mode.
I was trying to figure that ourt and I am getting always Error with $DISPLAY.
Thanks.

Great! thanks that works wonderfully.
Is there a way that I can do something like that and using Drawnow() and plotting a PNG image that will show my graph and also interactive mode.
I was trying to figure that ourt and I am getting always Error with $DISPLAY.
Thanks.

thanks !

thanks !

Patch to make this work with python 3

15:18 $ diff -u /tmp/fa2.py /tmp/fa.py 
--- /tmp/fa2.py	2017-01-25 15:18:03.000000000 -0500
+++ /tmp/fa.py	2017-01-25 15:13:33.000000000 -0500
@@ -5,7 +5,7 @@
 @app.route("/simple.png")
 def simple():
     import datetime
-    import StringIO
+    from io import BytesIO
     import random
 
     from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
@@ -26,7 +26,7 @@
     ax.xaxis.set_major_formatter(DateFormatter('%Y-%m-%d'))
     fig.autofmt_xdate()
     canvas=FigureCanvas(fig)
-    png_output = StringIO.StringIO()
+    png_output = BytesIO()
     canvas.print_png(png_output)
     response=make_response(png_output.getvalue())
     response.headers['Content-Type'] = 'image/png'

Patch to make this work with python 3

15:18 $ diff -u /tmp/fa2.py /tmp/fa.py 
--- /tmp/fa2.py	2017-01-25 15:18:03.000000000 -0500
+++ /tmp/fa.py	2017-01-25 15:13:33.000000000 -0500
@@ -5,7 +5,7 @@
 @app.route("/simple.png")
 def simple():
     import datetime
-    import StringIO
+    from io import BytesIO
     import random
 
     from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
@@ -26,7 +26,7 @@
     ax.xaxis.set_major_formatter(DateFormatter('%Y-%m-%d'))
     fig.autofmt_xdate()
     canvas=FigureCanvas(fig)
-    png_output = StringIO.StringIO()
+    png_output = BytesIO()
     canvas.print_png(png_output)
     response=make_response(png_output.getvalue())
     response.headers['Content-Type'] = 'image/png'

Hi Thanks for the example. What is I want to put he result back to same home url. What changes I have to do?

Hi Thanks for the example. What is I want to put he result back to same home url. What changes I have to do?

This is a good example but what if i wanted to show this image in my Html <img> tag dynamically without downloading it. I mean within my Markup.

This is a good example but what if i wanted to show this image in my Html <img> tag dynamically without downloading it. I mean within my Markup.

This works quite well. However, after reloading the image a few times, I get errors like this:

Exception RuntimeError: RuntimeError('main thread is not in main loop',) in <bound method PhotoImage.__del__ of <Tkinter.PhotoImage instance at 0x7f5889efcc68>> ignored Tcl_AsyncDelete: async handler deleted by the wrong thread Aborted (core dumped)

or
Tcl_AsyncDelete: cannot find async handler

This works quite well. However, after reloading the image a few times, I get errors like this:

Exception RuntimeError: RuntimeError('main thread is not in main loop',) in <bound method PhotoImage.__del__ of <Tkinter.PhotoImage instance at 0x7f5889efcc68>> ignored Tcl_AsyncDelete: async handler deleted by the wrong thread Aborted (core dumped)

or
Tcl_AsyncDelete: cannot find async handler