[FIXED] Dash drop down menu graph

Issue

I'm attempting to implement a live-update graph that is only displayed if the user selected it from the drop down menu. I've made a callback with input from "intervals" and from the dropdown menu "oxygen". I thought if "value" is "0" then no chart has been selected and I could return "null"(???), and if 'value' = '1', then the graph would update. Is this possible? or is my approach incorrect?

dcc.Graph(id='live-graph2', animate=False),
        dcc.Interval(
            id='graph-update',
            interval=10000,
            n_intervals=0
        )),
        dbc.Col(html.Div([
        dcc.Dropdown(
            id='oxygen',
            options=[{'label': s, 'value': s}
                     for s in main_graph.keys()],
            value=[],
            multi=True),

@app.callback(
    dash.dependencies.Output('live-graph2', 'figure'),
    [dash.dependencies.Input('oxygen', 'value'),
     dash.dependencies.Input('graph-update', 'n_intervals')],
)
def update_graph_scatter_2(n,value):
    if value == 0:
        ....
    else:
        data = {}

Solution

I would approach the problem differently.

If you don't want to display the graph at all when no dropdown option is selected then the Graph component doesn't need to be in the layout by default.

Instead you could create a container component that your Graph component is appended to dynamically based on the option values of your Dropdown component.

Below is a simplified example using sample data, adjust per your requirements:

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
import dash_bootstrap_components as dbc

df = px.data.iris()

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Interval(id="graph-update", interval=10000, n_intervals=0),
        html.Div(id="graph-container"),
        dbc.Col(
            html.Div(
                [
                    dcc.Dropdown(
                        id="oxygen",
                        options=[{"label": s, "value": s} for s in [1, 2, 3]],
                        value=[],
                        multi=True,
                    )
                ]
            )
        ),
    ]
)


@app.callback(
    dash.dependencies.Output("graph-container", "children"),
    [
        dash.dependencies.Input("oxygen", "value"),
        dash.dependencies.Input("graph-update", "n_intervals"),
    ],
)
def update_graph_scatter_2(value, n):
    if value:
        # Change the line below to dynamically create the figure based on value
        fig = px.scatter(df, x="sepal_width", y="sepal_length")
        return dcc.Graph(id="live-graph2", figure=fig)

    return html.Div()

Answered By - bas