Returning plt.show() on HTML with Python Flask

Question

I'm using Python Flask to take input from a simple html file. The HTML asks the user to input a state and when they do that I would like for the output to be a plot.

I have the following code that's creating the Python Flask but when a user inputs a state, the plot outputs in my Jupyter Notebook file instead of on the HTML page.

I've seen methods using Figure() to get the plot to show on the HTML page but I'm not sure how to recreate my current plot using the figure function.

app = Flask(__name__)

@app.route('/')
def form():
    return render_template("flask_form.html")

@app.route('/', methods = ['POST'])
def form_post():
    state = request.form['userinput']
    
    dff = df[df['state'] == state]
    dff['total_icu_beds_7_day_avg'] = dff['total_icu_beds_7_day_avg'].astype(float)
    dff['total_beds_7_day_avg'] = dff['total_beds_7_day_avg'].astype(float)
    dff['inpatient_beds_7_day_avg'] = dff['inpatient_beds_7_day_avg'].astype(float)
    
    pivot = np.round(dff.pivot_table(index = ["collection_week"], values = ["total_icu_beds_7_day_avg", "total_beds_7_day_avg", "inpatient_beds_7_day_avg"], aggfunc = [np.mean]), 0)
    pivot.columns = ['Inpatient 7 day Avg', 'Total Beds 7 day Avg', 'Total ICU Beds 7 day Avg']
    pivot = pivot.reset_index()
    
    x = pivot['collection_week']
    y1 = pivot['Inpatient 7 day Avg']
    y2 = pivot['Total Beds 7 day Avg']
    y3 = pivot['Total ICU Beds 7 day Avg']
    
    title = str(state + " State Staffed Beds")

    plt.figure(figsize=(16,6))
    plt.plot(x, y1, label = 'Inpatient AVG', color = 'blue')
    plt.plot(x, y2, label = 'Total Beds AVG', color = 'red')
    plt.plot(x, y3, label = 'Total ICU Beds AVG', color = 'cyan')
    plt.legend()
    plt.title(title, fontweight = 'bold')
    plt.ylabel("Number of Staffed Beds")
    plt.xlabel("Date")
    plt.show()

Here's my HTML code, I know the plot needs to be in the output but not sure how to code it:

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>Hospital Capacity by State</h1>
    <p>Enter the abbreviation of your desired state:</p>
    <form action="." method="POST">
        <input type="text" name="userinput">
        <input type="submit" name="my-form" value="Send">
        <output> </output>
    </form>
</body>
</html>

@Henry, I don't know how to to reproduce my current plot using Figure() — amatof
– amatof, Commented Apr 18, 2022 at 2:08

amatof · Accepted Answer · 2022-04-19 16:23:33Z

1

The Python Flask code:

app = Flask(__name__)

@app.route('/')
def form():
    return render_template("flask_form_plot.html")

@app.route('/', methods = ['POST'])
def form_post():
    state = request.form['userinput']
    
    dff = df[df['state'] == state]
    dff['total_icu_beds_7_day_avg'] = dff['total_icu_beds_7_day_avg'].astype(float)
    dff['total_beds_7_day_avg'] = dff['total_beds_7_day_avg'].astype(float)
    dff['inpatient_beds_7_day_avg'] = dff['inpatient_beds_7_day_avg'].astype(float)
    
    pivot = np.round(dff.pivot_table(index = ["collection_week"], values = ["total_icu_beds_7_day_avg", "total_beds_7_day_avg", "inpatient_beds_7_day_avg"], aggfunc = [np.mean]), 0)
    pivot.columns = ['Inpatient 7 day Avg', 'Total Beds 7 day Avg', 'Total ICU Beds 7 day Avg']
    pivot = pivot.reset_index()

    x = pivot['collection_week']
    y1 = pivot['Inpatient 7 day Avg']
    y2 = pivot['Total Beds 7 day Avg']
    y3 = pivot['Total ICU Beds 7 day Avg']
    
    plt.figure(figsize=(16,6))
    plt.plot(x, y1, label = 'Inpatient AVG', color = 'blue')
    plt.plot(x, y2, label = 'Total Beds AVG', color = 'red')
    plt.plot(x, y3, label = 'Total ICU Beds AVG', color = 'cyan')
    plt.legend()
    plt.title(str(state) + " State Staffed Beds", fontweight = 'bold')
    plt.ylabel("Number of Staffed Beds")
    plt.xlabel("Date")

    img = io.BytesIO()
    plt.savefig(img, format = 'png')
    img.seek(0)
    plot_data = urllib.parse.quote(base64.b64encode(img.read()).decode())
    return render_template('flask_form_plot.html', plot_url = plot_data)

The HTML code:

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>Hospital Capacity by State</h1>
    <p>Enter the abbreviation of your desired state:</p>
    <form action="." method="POST">
        <input type="text" name="userinput">
        <input type="submit" name="my-form" value="Send">
        <br>
        <br>
        <output> <img src="data:image/png;base64, {{ plot_url }}" width="1000" height="500" alt="graph"> </output>
    </form>
</body>
</html>

answered Apr 19, 2022 at 16:23

amatof

1952 silver badges15 bronze badges

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

5 Comments

user_2215528 Over a year ago

You're not supposed to add your code as an answer. You can edit your question, and add it there if necessary.

user_2215528 Over a year ago

Answer should've been an edit to the question, instead of being posted as an answer.

amatof Over a year ago

@OussamaelBachiri then why is there a button that says "Answer Your Question"

user_2215528 Over a year ago

I actually didnt check your code, is this the answer to your own question? If so, it would be nice to mention that, and perhaps explain what you did. Would be very helpful for people who are having a similar problem

Tornike Kharitonishvili Over a year ago

hello, is this code without save png?

Collectives™ on Stack Overflow

Returning plt.show() on HTML with Python Flask

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related