I am trying to populate a dropdown with emebed urls pointing to plotly plots on the plotly server, and then have the dropdown update an html.Embed object’s src parameter so that the embedded plot changes when a new value is selected in the dropdown. I cannot get it to work properly. The embedded plots do not show up, not sure what I am doing wrong.
(Made a few edits). Here is my code:
# update embedded plotly plot with drowdown
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
# plotly plot embed urls
embed_urls = {
'plot_1': 'https://plot.ly/~om_ad_ops/69140.embed',
'plot_2': 'https://plot.ly/~om_ad_ops/69138.embed'
}
# initialize Dash object
app = dash.Dash()
# define dropdown whose options are embed urls
dd = dcc.Dropdown(
id='dropdown',
options= [{'label': k, 'value': v} for k, v in embed_urls.iteritems()],
value=embed_urls.keys()[0],
)
# embedded plot element whose `src` parameter will
# be populated and updated with dropdown values
plot = html.Embed(
id='plot',
height=600,
width=1000
)
# set div containing dropdown and embedded plot
app.layout = html.Div(children=[dd, plot])
# update `src` parameter on dropdown select action
@app.callback(
Output(component_id='plot', component_property='src'),
[Input(component_id='dropdown', component_property='value')]
)
def update_plot_src(input_value):
return input_value
if __name__ == '__main__':
app.run_server(debug=True)
Your code looks mostly good! This is a really cool example. Try just replacing html.Embed with html.Iframe. You’ll probably want to style the iframe as well with something like style={'border': 'none', 'width': '100%', 'height': 500} as the browser’s default iframe styling is pretty rough
Awesome, that did the trick. Here is the updated working code.
# update embedded plotly plot with dropdown
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
# plotly plot embed urls
urls = {
'plot_1': 'https://plot.ly/~om_ad_ops/69140.embed',
'plot_2': 'https://plot.ly/~om_ad_ops/69138.embed'
}
init_key, init_val = urls.iteritems().next()
# initialize Dash object
app = dash.Dash()
# define dropdown whose options are embed urls
dd = dcc.Dropdown(
id='dropdown',
options= [{'label': k, 'value': v} for k, v in urls.iteritems()],
placeholder=init_key
)
# embedded plot element whose `src` parameter will
# be populated and updated with dropdown values
plot = html.Iframe(
id='plot',
style={'border': 'none', 'width': '100%', 'height': 500},
src=init_val
)
# set div containing dropdown and embedded plot
app.layout = html.Div(children=[dd, plot])
# update `src` parameter on dropdown select action
@app.callback(
Output(component_id='plot', component_property='src'),
[Input(component_id='dropdown', component_property='value')]
)
def update_plot_src(input_value):
return input_value
if __name__ == '__main__':
app.run_server(debug=True)
One last question. I set the default value selected by the dropdown using the placeholder parameter. However, this does not automatically populate the src parameter in html.Iframe. So, I tried forcing that to a default value using src=init_value, but this still does not display a plot on page load.
Also, I removed the value parameter from the dropdown, it was creating a very weird nested set of dropdown menus (see screen shot below).
The default parameter is actually just value: try replacing placeholder with value. placeholder is used just as a “hint” to the user (unfortunately, some research shows that placeholders aren’t that intuitive or helpful)
The question is how does one set up an auto detect for the height and width of the page. tried it but I kept getting a minimised height. i.e is style={'border': 'none', 'width': 'auto', 'height': 'auto'}. It would be wonderful to get the full syntax for the html.iframe in Dash
The style property just renders the dict as inline-css, so all CSS properties that are available for iframe are available in the html.Iframe(style={...})
