Create Scatter Charts in Matplotlib using Flask

In this article, we will see how to create charts in Matplotlib with Flask. We will discuss two different ways how we can create Matplotlib charts in Flask and present it on an HTML webpage with or without saving the plot using Python.

File structure

Create and Save the Plot in the Static Directory

Here, We first created a get_plot() function which generates the Matplotlib plot and returns the plot object. Python's Numpy library generates random data for this plot. It is not necessary to import if you are defining your own data. The root URL ('/') first calls this function to get the plot object. It then saves this plot object as 'plot.png' under the images folder present inside the static directory. This is the default location defined by Flask for static files like images, CSS, JS, etc.  The final step is to render the below HTML script which reads the image file from the directory and renders it to the web browser as shown in the output image.

Save the HTML file as 'matplotlib-plot1.html' under the templates folder in the root directory.

Output:

Generating a Base64 I/O String of the Plot

We will generate the base64 I/O) string format for the image and pass this to the template to render the plot. Here, We first created a get_plot() function which generates the Matplotlib plot and returns the plot object. Python's Numpy library generates random data for this plot. It is not necessary to import if you are defining your own data. The root URL ('/') first calls this function to get the plot object. It then creates a Base64 I/O equivalent format of the string using python's built-in 'io' and 'base64' modules. The final step is to render the below HTML script and also pass this string to the template. The template reads the image file using the string that is passed to it.

Save the HTML file as 'matplotlib-plot2.html' under the templates folder in the root directory.

Output:

Related Articles: How to Add Graphs to Flask apps