is there a way to update two sections using a single dropdown option in Python Dash by Plotly

Dash Python
1

In the following code which generates a simple graph based on an option selected from the dropdown menu.

Is there a way I can add another section below the graph that also updates as per the ‘option’ selected in the dropdown menu. Example - for a single option ‘Option_A’, plot graph and display change logs for ‘Option_A’.

app = dash.Dash()

app.layout = html.Div([
    html.H1('XYZ_Header', className='banner'),
    html.Div([
        html.P('abc_paragraph')
    ]),

    html.Div([
        html.P("X Data"),
        dcc.Dropdown(id='start_time',
            options=[
                {'label': 'xxx_1', 'value':'x_1'},
                {'label': 'xxx_2', 'value': 'x_2'}
            ],
            value='x_1')
        ], style={'width': '40%', 'margin-left': '3%', 'display': 'inline-block'}),

    html.Div([
        html.P("Y Data"),
        dcc.Dropdown(id='end_time', options=[
                {'label': 'yyy_1', 'value':'y_1'},
                {'label': 'yyy_2', 'value': 'y_2'}
            ],
            value='today')
        ], style={'width': '31%', 'margin-left': '3%', 'display': 'inline-block'}),

    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'AAA', 'value': 'Option_A'},
            {'label': 'BBB', 'value': 'Option_B'},
            {'label': 'CCC', 'value': 'Option_C'}
        ],
        value='Option_A'
    ),
    dcc.Graph(id='my-graph')
])

@app.callback(
    Output(component_id='my-graph', component_property='figure'),
    [
        Input(component_id='my-dropdown', component_property='value'),
        Input(component_id='start_time', component_property='value'),
        Input(component_id='end_time', component_property='value')
    ]
    )
def update_graph(selected_dropdown_value, start_time, end_time):
    df = pdr.get_data(selected_dropdown_value, start_time, end_time)
    return {
        'data': [{
            'x': df.index,
            'y': df.Close
        }]
    }


if __name__ == '__main__':
    app.run_server(host='127.0.0.1', port=8888)

The output would look something like this -

---------------------------------- Output ---------------------------

XYZ_Header
abc_paragraph

<
.
dropdown menu is displayed here
.
>

<
.
.
.
graph is displayed/updated as per the 'option' selected in the dropdown menu
.
.
.
.
>

# My question : 
#   The way I'm updating the graph for each selected 'option', 
#     Is there a way I can update text (using some other APIs) as well?
#     Can someone please share an example ?


---------------------------------------------------------------------
2

I came across one solution. If you can think of a better solution, please comment -

created another callback and for this callback the output was :

app.layout = html.Div([
    .
    .
    .
    # This is same as before. Just added the following :
    .
    .
    .

    html.Div(id='update_text')
])

@app.callback(
    dash.dependencies.Output('update_text', 'children'),
    [dash.dependencies.Input('my-dropdown', 'value')]
    )
def update_news(selected_dropdown_value):
    return 'You\'ve selected "{}"'.format(selected_dropdown_value)
3

That would have been the solution I would have recommended to you, but you found it on your own :), congrats!

1 Like