Including html plotly graphs in dash app

Dash Python
1

Hey!
Is there a possibility to display interactive Plotly graphs that are saved as .html? It seems to me, that the solutions here are about static images. But I want to display interactive .html graphs that I once created with Plotly and that are saved on my machine. I think it would be better that way than creating them all the time.

Or is this also covered in a solution that was already mentioned here? Because I didnt get it to work with ‘.html’ files.

1 Like
2

Hi @plbeg, welcome to the forum! Including raw html in dash apps has been discussed here and here as well. Basically you can either use an iframe or put your html inside a markdown component.

1 Like
3

Thank you a lot Emmanuelle for the real quick and helpful answer! I feel indeed very welcome.

I tried to use nedned’s example that works just fine for embedding youtube videos:

import dash
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    html.Iframe(id='target',
                src='https://www.youtube.com/embed/sea2K4AuPOk')
    ])

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

But when I try to display the locally saved html, i just get an empty Frame:

import dash
import dash_html_components as html


app = dash.Dash()
app.layout = html.Div([
    html.Iframe(id='target',
                src='D:/some_directory/plotly_figure.html')
    ])

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

So I am not sure if the answer works for html figures. Is there another solution?

BTW:
What I mean by “html figures” are figures that are created by Plotly:

import plotly.graph_objects as go
import numpy as np
import plotly.offline as py

x = np.arange(10)
figure = go.Figure(data=go.Scatter(x=x, y=x**2))
py.plot(figure, filename='D:/some_directory/plotly_figure.html')

I dont want to display a “static” image, but one where the user of the webapp can zoom into the figure etc.

1 Like