Search code examples
pythonplotlydashboardplotly-dash

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

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)
Solution

  • 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)