unable to add google form in plotly

Question

Below is my code, but the code not works, first 5 options in dropdown returns a graph and option 6 needs to display a google form

without the 6th option the code is working fine, but the 6th option for displaying gform is throwing errror in dash help me solve this

app.layout=html.Div(children=[dcc.Dropdown(
     id='FirstDropdown',
     options=[
            {'label':"graph1",'value':'v1'},
            {'label':"graph2",'value':'v2'},
            {'label':"graph3,'value':'v3'},
            {'label':"graph4",'value':'v4'},
            {'label':"graph 5",'value':'v5'},
            {'label':"g-form",'value':'v6'}
           
              
     ],
     placeholder="Please choose an option",
     value='v1'
     ),
     html.Div(dcc.Graph(id='graph'))
     
     

])

@app.callback(
[Output('graph','figure')],

[Input(component_id='FirstDropdown',component_property='value')]
)
def select_graph(value):

if value=='v1':
return fig11
elif value=='v2':
return fig21
elif value=='v3':
return fig31
elif value=='v4':
return fig411
elif value=='v5':
return fig_all
elif value == 'v6':
google_form_iframe = html.Iframe(
        width='640px',
        height='947px',
   src="https://docs.google.com/forms/d/e/1FAIpQLSfkIgHkKlD5Jl4ewfWpA8y9D65UbhdrvZ0k7qXOBI7uFN1aNA/vi ewform?embedded=true"
    )
   return google_form_iframe

Answer 1

• fundamentally dcc.Figure() and html.IFrame() are separate dash components. Hence if you what to display a figure of Iframe based on dropdown use a div container. From callback return child component that fits into this container
• to make full working example, have used COVID vaccination data to generate 5 figures that can be selected from drop down.
• if google form is selected then return that

import pandas as pd
import plotly.express as px
from jupyter_dash import JupyterDash
import dash
from dash import dcc, html
from dash.dependencies import Input, Output, State
import json

df = pd.read_csv(
    "https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/vaccinations/vaccinations.csv"
)
df["date"] = pd.to_datetime(df["date"])
df = df.sort_values(["date", "iso_code"])
figs = {
    f"v{n+1}": px.bar(
        df.loc[(df["date"].dt.day_of_week == 6) & df["iso_code"].isin(["DEU", "FRA"])],
        x="date",
        y=c,
        color="iso_code",
    )
    for n, c in zip(range(5), df.select_dtypes("number").columns)
}

# Build App
app = JupyterDash(__name__)
app.layout = dash.html.Div(
    [
        dcc.Dropdown(
            id="FirstDropdown",
            options=[
                {"label": "graph1", "value": "v1"},
                {"label": "graph2", "value": "v2"},
                {"label": "graph3", "value": "v3"},
                {"label": "graph4", "value": "v4"},
                {"label": "graph 5", "value": "v5"},
                {"label": "g-form", "value": "v6"},
            ],
            placeholder="Please choose an option",
            value="v1",
        ),
        dash.html.Div(
            id="graph_container",
        ),
    ]
)


@app.callback(
    Output("graph_container", "children"),
    Input("FirstDropdown", "value"),
)
def select_graph(value):
    if value in figs.keys():
        return dash.dcc.Graph(figure=figs[value])
    else:
        return html.Iframe(
            width="640px",
            height="947px",
            src="https://docs.google.com/forms/d/e/1FAIpQLSfkIgHkKlD5Jl4ewfWpA8y9D65UbhdrvZ0k7qXOBI7uFN1aNA/vi ewform?embedded=true",
        )

app.run_server(mode="inline")