Button Callback function not triggering

Dash Python
1

Hello everyone, I have created 2 buttons, so when I press on either of the buttons, a map will appear (both are different maps) however, both buttons ended up showing the same map, it seems like my callback function is not working. I am not very familiar with the callback function hoping if anyone can help me. Here’s my code. Any help would be greatly appreciated! :blush:

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)
2 
def clicked_output(button,button2):
      if button == None:  # never satisfied as you initialise n_clicks=0
        raise PreventUpdate
        return fig1_1

      elif button2 == None: # also never satisfied
        raise PreventUpdate
      return fig1_2  # this will always be returned

The problem is in your callback, it’s always going to return fig1_2. See my added comments

Instead you should look at "Determining which Input has fired with dash.callback_context here in the docs. This will let you figure out which button has been clicked and return the appropriate figure.

3

ohh i see, thank you! I will read through the docs you send me :blush: