Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Convert matplotlib figure to image then output to dash

Hi,

I have a code that produces a figure using a matplot library. I am trying to use Dash to view the figure. Since the code is made using matplotlib I want to 1) save the fig as an image 2) output that image in the dashboard. I need to know what line of codes needed to 1) Include a place to add the image in the dash layout, 2) convert the fig into image, and 3) output the image. I am new to dash but it is a good learning :slight_smile:

Thanks!

import matplotlib.pyplot as plt
import matplotlib.patches as patches
import math
from numpy import genfromtxt

floor plan sizes

limx = (0,Ylim)
limy = (0,Xlim)

fig1 = plt.figure()
ax = fig1.add_subplot(111,aspect=“equal”)

rectangles

for o in range(0,NumberBlocks):
rect = plt.Rectangle((x1[o], y1[o]), x2[o]-x1[o], y2[o]-y1[o], color=‘gray’,fill=False)
ax.add_patch(rect)
plt.text(Alpha[o],Beta[o],Names[o],size=6)

plt.rcParams[“figure.figsize”] = [30,10]

plt.ylim(limx)
plt.xlim(limy)

fig1.show()

Have you tried searching through the forum? I’d recommend searching matplotlib. I believe this was answered a couple of years ago.

1 Like

thanks, I am currently looking into using a figure through plotly instead
I used this type of fig, and it worked :slight_smile: better than an image, so now I can produce the figure using Plotly. Thanks for the tips by AnnMarieW!

import plotly.graph_objects as go 
fig = go.Figure() # or any Plotly Express function e.g. px.bar(...)
# fig.add_trace( ... )
# fig.update_layout( ... )

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    dcc.Graph(id="my_graph",  figure=fig)
])

You can update it in a callback too :