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.
Python3
import numpy as np
import matplotlib.pyplot as plt
from flask import Flask, render_template
app = Flask(__name__)
def get_plot():
data = {
'a' : np.arange( 50 ),
'c' : np.random.randint( 0 , 50 , 50 ),
'd' : np.random.randn( 50 )
}
data[ 'b' ] = data[ 'a' ] + 10 * np.random.randn( 50 )
data[ 'd' ] = np. abs (data[ 'd' ]) * 100
plt.scatter( 'a' , 'b' , c = 'c' , s = 'd' , data = data)
plt.xlabel( 'X label' )
plt.ylabel( 'Y label' )
return plt
@app .get( '/' )
def single_converter():
plot = get_plot()
plot.savefig(os.path.join( 'static' , 'images' , 'plot.png' ))
return render_template( 'matplotlib-plot1.html' )
if __name__ = = '__main__' :
app.run(debug = True )
|
Save the HTML file as ‘matplotlib-plot1.html’ under the templates folder in the root directory.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Matplotlib Plot</ title >
</ head >
< body >
< h1 >How to Create Charts in Matplotlib with flask - Example 1</ h1 >
< img src = "{{ url_for('static', filename='images/plot.png') }}" >
</ body >
</ html >
|
Output:
Example 1 – 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.
Python
from flask import Flask, render_template
import matplotlib.pyplot as plt
import os
import numpy as np
import matplotlib
matplotlib.use( 'Agg' )
app = Flask(__name__)
def get_plot():
data = {
'a' : np.arange( 50 ),
'c' : np.random.randint( 0 , 50 , 50 ),
'd' : np.random.randn( 50 )
}
data[ 'b' ] = data[ 'a' ] + 10 * np.random.randn( 50 )
data[ 'd' ] = np. abs (data[ 'd' ]) * 100
plt.scatter( 'a' , 'b' , c = 'c' , s = 'd' , data = data)
plt.xlabel( 'X label' )
plt.ylabel( 'Y label' )
return plt
@app .get( '/' )
def single_converter():
plot = get_plot()
plot.savefig(os.path.join( 'static' , 'images' , 'plot.png' ))
plot.close()
return render_template( 'matplotlib-plot1.html' )
if __name__ = = '__main__' :
app.run(debug = True )
|
Save the HTML file as ‘matplotlib-plot2.html’ under the templates folder in the root directory.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Matplotlib Plot</ title >
</ head >
< body >
< h1 >How to Create Charts in Matplotlib with flask - Example 2</ h1 >
< img src = "data:image/png;base64,{{ s }}" >
</ body >
</ html >
|
Output:
Example 2 – Output
Related Articles: How to Add Graphs to Flask apps
Last Updated :
05 Feb, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...