simple matplotlib as embedded image in web page generated by flask

Question

I am working through this example https://www.kite.com/python/answers/how-to-plot-a-bar-chart-using-a-dictionary-in-matplotlib-in-python

I am just not sure how to use flask or matplot lib to return as a web page or as an image

@app.route('/visualize')
def visualize():


    a_dictionary = {"a": 1, "b": 2, "c": 3}
    keys = a_dictionary.keys()
    values = a_dictionary.values()
    plt.bar(keys, values)
    bytes_image = io.BytesIO()
    plt.savefig('img')

    return send_file(img,mimetype='img')

I am trying to embed the result like this into a html page

<img src="{{ url_for('visualize') }}" alt="Result" style="width:100%">

I am getting confused how to apply other works on the internet into this case. There seem to be different solutions about which modules are imported, some using seaborn.

Can anyone help please?

Christopher · Accepted Answer · 2020-12-26 20:43:04Z

2

The clearest explain solution can be found here Passing a matplotlib figure to HTML (flask) So I have adapted the code above which builds a matplotlib graph from a dictionary, and below I show how it can be passed to a html page

In the init.py

import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
from flask import Flask, render_template
from io import BytesIO
import base64


app = Flask(__name__)

@app.route('/plot')
def plot():


    img = BytesIO()


    a_dictionary = {"a": 4, "b": 20, "c": 6}
    keys = a_dictionary.keys()
    values = a_dictionary.values()
    plt.bar(keys, values)

    plt.savefig(img, format='png')
    plt.close()
    img.seek(0)
    plot_url = base64.b64encode(img.getvalue()).decode('utf8')

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

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

In the templates folder

templates/plot.html

<!doctype html>
<title>heatmap - </title>
<section>
  <h2>Heatmap</h2>
  <img src="data:image/png;base64, {{ plot_url }}">
</section>

answered Dec 26, 2020 at 20:43

Christopher

6473 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ChsharpNewbie Nov 28, 2024 at 12:35

You should not use pyplot for Flask etc. Source matplotlib.org/stable/gallery/user_interfaces/…

Collectives™ on Stack Overflow

simple matplotlib as embedded image in web page generated by flask

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related