plotly dash - generate image with plotly, safe it local and display it with plotly dash

Question

I generate a lot of images with plotly (express) and save them as png in a local directory. I would like to create a dashboard with plotly dash. The images I've generated have a lot of dependencies: that's the reason I don't want to include the code into the code for the dash app.

Is it possible to save the images in a format (HTML?) in my local directory and call them by plotly dash?!

How do I have to save the image, and how can I call it? I don't want to use PNG (etc.), because I would like to use the hoverfunction.

What I've tried:

import plotly.express as px

fig =px.scatter(x=range(10), y=range(10))
fig.write_html("../example_codes/saved_as_HTML.html")
#%%

import dash
import dash_html_components as html
import base64

app = dash.Dash()

image_filename = 'saved_as_HTML.html' # replace with your own image
encoded_image = base64.b64encode(open(image_filename, 'rb').read())

# app.layout = html.Div([
#     html.Img(src='data:image/png;base64,{}'.format(encoded_image))
# ])


app.layout = html.Div([
    html.Img(src='data:image/html;base64,{}'.format(encoded_image))
])

if __name__ == '__main__':
    app.run_server(debug=True)

bas · Accepted Answer · 2021-05-13 19:27:55Z

1

I would approach the problem differently.

Instead of using html as a format I would save and load the Python figure(s) using joblib, since these figures are just regular Python objects.

# Save the figures somewhere
import joblib
fig = px.scatter(x=range(10), y=range(10))
joblib.dump(fig, "../example_codes/fig.pkl")

Once you've saved the figure somewhere you can load it with joblib and use it in your Dash layout using Graph:

fig = joblib.load("../example_codes/fig.pkl")

app = dash.Dash()

app.layout = html.Div([dcc.Graph(figure=fig)])

if __name__ == "__main__":
    app.run_server(debug=True)

edited May 13, 2021 at 19:27

answered May 13, 2021 at 5:35

bas

15.2k7 gold badges27 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

after "import import dash_core_components as dcc" and "import dash_html_components as HTML" it worked. thank you

Collectives™ on Stack Overflow

plotly dash - generate image with plotly, safe it local and display it with plotly dash

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related