Plotly Dash Button Callback function

Question

I have created 2 buttons, so when I press on either of the buttons, a map will appear(both are different map) however, both buttons ended up showing the same map, it seems like my callback function is not working. I am not very familiar with callback funtion but Here's my code. Any help would be greatly appreciated!



import plotly.graph_objects as go
fig1_1 = go.Figure()
fig1_2 = go.Figure()

fig1_1 = go.Figure(go.Scattermapbox(
    fill = "toself",
    lon = [-74, -70, -70, -74], lat = [47, 47, 45, 45],
    marker = { 'size': 10, 'color': "orange" }))

fig1_1.update_layout(
    mapbox = {
        'style': "stamen-terrain",
        'center': {'lon': -73, 'lat': 46 },
        'zoom': 5},
    showlegend = False)

fig1_2 = go.Figure(go.Scattermapbox(
    fill = "toself",
    lon = [-60, -90, -50, -60], lat = [46, 57, 55, 45],
    marker = { 'size': 10, 'color': "yellow" }))

fig1_2.update_layout(
    mapbox = {
        'style': "stamen-terrain",
        'center': {'lon': -50, 'lat': 50 },
        'zoom': 5},
    showlegend = False)


import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
app = dash.Dash()
app.layout = html.Div([
    html.Button('Graph1', id='button', n_clicks=0),
    html.Button('Graph2',id='button2',n_clicks=0),
    dcc.Graph(id='graph',figure={})

])

@app.callback(
    Output('graph', 'figure'),
    Input('button', 'n_clicks'),
    Input('button2', 'n_clicks'))
def clicked_output(button,button2):
    if button == None:
        raise PreventUpdate
        return fig1_1
    elif button2 == None:
        raise PreventUpdate
        return fig1_2

if __name__ == '__main__':
    app.run_server(debug=True)

Check your indentation, in function clicked_output in if statement you will never return fig1_1 since it will raise PreventUpdate exception. Edit: after code edit you will never return any figure. — marcin
– marcin, Commented Feb 19, 2021 at 14:36

Nurislom Rakhmatullaev · Accepted Answer · 2021-02-19 15:41:18Z

You did some mistakes in code.
You send figure inside of Figure object. It should be sent through add_trace.
And I have added the line which catches the button click
Try this code:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go

first = go.Scattermapbox(fill = "toself",
                         lon = [-74, -70, -70, -74], 
                         lat = [47, 47, 45, 45],
                         marker = { 'size': 10, 'color': "orange" })
first_l = dict(mapbox = {'style': "stamen-terrain",
                         'center': {'lon': -73, 'lat': 46 },
                         'zoom': 5},
               showlegend = False)
second = go.Scattermapbox(fill = "toself",
                          lon = [-60, -90, -50, -60], 
                          lat = [46, 57, 55, 45],
                          marker = { 'size': 10, 'color': "yellow" })
second_l = dict(mapbox = {'style': "stamen-terrain",
                          'center': {'lon': -50, 'lat': 50 },
                          'zoom': 5},
                showlegend = False)

app = dash.Dash()
app.layout = html.Div([
    html.Button('Graph1', id='button1', n_clicks=0),
    html.Button('Graph2', id='button2', n_clicks=0),
    dcc.Graph(id='graph')
])

@app.callback(
    Output('graph', 'figure'),
    Input('button1', 'n_clicks'),
    Input('button2', 'n_clicks'))
def clicked_output(button,button2):
    fig = go.Figure()
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if 'button1' in changed_id:
        fig.add_trace(first)
        fig.update_layout(first_l)
    elif 'button2' in changed_id:
        fig.add_trace(second)
        fig.update_layout(second_l)
    return fig
if __name__ == '__main__':
    app.run_server(debug=True)

I'm facing a similar problem as OP; if you'd be so kind as to view my post.

Collectives™ on Stack Overflow

Plotly Dash Button Callback function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related