Graphs overlap each other when showing them in a Flask application

Question

I would like to show multiple graphs on a webpage, build with flask. The graphs work fine when I run them separately, but when I try to show them on the same page, they overlap.

main.py

@main.route('/filetypebarchart', methods=["GET"])
def filetypebarchart():
    fig1 =plt.figure("1")

    df = pd.read_csv('./export_dataframe.csv') 
 
    df.value_counts()
    fig1 = df.type.value_counts().plot(kind = 'barh').get_figure()
    fig1.savefig('./project/filetypebarchart.png')

    return send_file("filetypebarchart.png",mimetype='img/png')


@main.route('/filetypesum', methods=["GET"])
def filetypesum():
    fig2 = plt.figure("2")

    df = pd.read_csv('./export_dataframe.csv')  
    
    fig2 = sns.barplot(data=df, x="type", y="size", estimator="sum", palette="pastel")
    fig2.figure.savefig('./project/filetypesum.png')

    return send_file("filetypesum.png",mimetype='img/png')

html code

<div> 
  <img src="/filetypebarchart" alt="Chart" height="auto" width="100%">
  <br><br>
  <img src="/filetypesum" alt="Chart" height="auto" width="100%">
</div>

The outcome

score 0 · Accepted Answer · answered Nov 25 '22 at 17:02

Ooh meanwhile, I found out myself. I needed to add the following line to close the plot.

plt.close(fig1)

So now it looks like this.

@main.route('/filetypebarchart', methods=["GET"])
def filetypebarchart():
    fig1 =plt.figure("1")

    df = pd.read_csv('./export_dataframe.csv') 
 
    df.value_counts()
    fig1 = df.type.value_counts().plot(kind = 'barh').get_figure()
    fig1.savefig('./project/filetypebarchart.png')

    plt.close(fig1)

    return send_file("filetypebarchart.png",mimetype='img/png')

Graphs overlap each other when showing them in a Flask application

1 Answers1