Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Update html.Embed element with dropdown

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)

Here are the plots being used:
https://plot.ly/~om_ad_ops/69140
https://plot.ly/~om_ad_ops/69138

Please let me know if I should provide anything else.

Best,
Connor

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 :see_no_evil:

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

Super happy with the code as is though, thanks again!

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)

great, thanks chriddyp!

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={...})

Thanks for the quick response