Matplotlib in Flask Web Application Server
Tags: labex, python, coding, programming
Published: 2024-07-17 03:24:47


## Introduction

This article covers the following tech skills:

![Skills Graph](https://skills-graph.labex.io/web-application-server-sgskip-49031.jpg)

This tutorial lab will guide you through using Matplotlib in a Flask web application server. You will learn how to create figures using the `.Figure` constructor and save them to in-memory buffers, embed the resulting figures in HTML output, and run the Flask application using the `flask` command-line tool.

### VM Tips

After [the VM](https://labex.io/tutorials/web-application-server-sgskip-49031) startup is done, click the top left corner to switch to the **Notebook** tab to access Jupyter Notebook for practice.

Sometimes, you may need to wait a few seconds for Jupyter Notebook to finish loading. The validation of operations cannot be automated because of limitations in Jupyter Notebook.

If you face issues during learning, feel free to ask Labby. Provide feedback after the session, and we will promptly resolve the problem for you.


## Install Dependencies

Before we get started, make sure you have the necessary packages installed. You can install them using pip.

```python
pip install matplotlib flask
```


## Import Dependencies

In this step, we will import the necessary dependencies. We will use `base64` to encode the image data, `BytesIO` to store the image data in memory, `Flask` to create the web application server, and `Figure` to create the figures.

```python
import base64
from io import BytesIO

from flask import Flask

from matplotlib.figure import Figure
```


## Create the Flask Application

In this step, we will create the Flask application. We will define a route for the home page (`"/"`) and a function to generate and embed the Matplotlib figure.

```python
app = Flask(__name__)

@app.route("/")
def home():
    # Generate the figure **without using pyplot**.
    fig = Figure()
    ax = fig.subplots()
    ax.plot([1, 2])
    # Save it to a temporary buffer.
    buf = BytesIO()
    fig.savefig(buf, format="png")
    # Embed the result in the html output.
    data = base64.b64encode(buf.getbuffer()).decode("ascii")
    return f"<img src='data:image/png;base64,{data}'/>"
```


## Run the Flask Application

In this step, we will run the Flask application using the `flask` command-line tool. Assuming that the working directory contains this script, run the following command to start the server:

```console
FLASK_APP=matplot_lib_tutorial_lab flask run
```


## View the Output

In this step, we will view the output of the Flask application by navigating to `http://localhost:5000/` in a web browser. The Matplotlib figure should be displayed on the page.


## Summary

In [this tutorial](https://labex.io/tutorials/web-application-server-sgskip-49031) lab, we learned how to use Matplotlib in a Flask web application server. We created a Flask application, generated a Matplotlib figure, embedded the figure in the HTML output, and ran the Flask application using the `flask` command-line tool.

![MindMap](https://internal-api-drive-stream.feishu.cn/space/api/box/stream/download/authcode/?code=MjkyYmRmOGYzMjM0NDBiMzJiMjdlMjdkY2JlZWYwYzRfZjVlZDU2MzNiYzI1ZDBkNzJjNzdiY2U0MDEzYWExMzdfSUQ6NzM5MjQ0MDQ1MzMxODQ0MzAxMF8xNzIxMTg2Njg2OjE3MjEyNzMwODZfVjM)

---

> 🚀 Practice Now: [Web Application Server Sgskip](https://labex.io/tutorials/web-application-server-sgskip-49031)

---

## Want to Learn More?

- 🌳 Learn the latest [Python Skill Trees](https://labex.io/skilltrees/python)
- 📖 Read More [Python Tutorials](https://labex.io/tutorials/category/python)
- 💬 Join our [Discord](https://discord.gg/J6k3u69nU6) or tweet us [@WeAreLabEx](https://twitter.com/WeAreLabEx)