Callbacks on dcc.Graph not getting triggered

@anu37 wrote:

Hi,

I am facing difficulty with callbacks on properties of dcc.Graph. The callbacks are not getting triggered at all

Following is the layout

layout = html.Div([
            dcc.Loading(
                [dbc.Row(
                    [
                        dbc.Col([
                            html.H6(children='Select Project', style={'textAlign': 'center'}),
                            dcc.Dropdown(id='project_id')
                        ]),
                        dbc.Col([
                            html.H6(children='Select GT Version', style={'textAlign': 'center'}),
                            dcc.Dropdown(id='insert_id', disabled=True)
                        ])
                    ],
                    id='data_filters',
                    style={'padding-top': 10}
                )], fullscreen=False
            ),
            dcc.Loading(
                [dbc.Row(
                    [
                        dbc.Col([
                            html.H6(children='Select Weather', style={'textAlign': 'center'}),
                            dcc.Dropdown(id='weather_condition', multi=True, disabled=True,
                                         options=[
                                                {'label': 'snow', 'value': 'snow'},
                                                {'label': 'rain', 'value': 'rain'},
                                                {'label': 'fog', 'value': 'fog'},
                                                {'label': 'cloud', 'value': 'cloud'},
                                                {'label': 'sleet', 'value': 'sleet'},
                                                {'label': 'clear', 'value': 'clear'},
                                                {'label': 'all', 'value': 'all'}], value='all')
                        ]),
                        dbc.Col([
                            html.H6(children='Select Time', style={'textAlign': 'center'}),
                            dcc.Dropdown(id='time_condition', multi=True, disabled=True,
                                         options=[
                                                {'label': 'dawn', 'value': 'dawn'},
                                                {'label': 'day', 'value': 'day'},
                                                {'label': 'dusk', 'value': 'dusk'},
                                                {'label': 'night', 'value': 'night'},
                                                {'label': 'all', 'value': 'all'}], value='all')
                        ])
                    ]
                )], fullscreen=False
            ),
            dbc.Row(id='filter-geo-dist-separator', style={'padding-top': 10}),
            dcc.Loading(
                html.Div(
                    [
                        html.H6('Geographical Distribution of Videos'),
                        html.Iframe(id='map', width='100%', height='600px', hidden=True)
                    ], className='container', id='geo_dist'
                )
            ),
            dcc.Loading(
                [dbc.Row(
                    [
                        dbc.Col([
                            dcc.Dropdown(
                                id="video_id_input", disabled=True
                            )
                        ], width=4),
                    ],
                    id='video_selector',
                    style={'padding-top': 10}
                )], fullscreen=False
            ),
            dbc.Row(
                [
                    dbc.Col(dbc.Button('Previous', id='previous-image', color='success'),
                            width=.75),
                    dbc.Col(dbc.Button('Next', id='next-image', color='info'), width=1),
                    dbc.Col(dbc.Label(id='frame_id', color='primary', size='lg', align='start'),
                            width=.5)
                ],
                id='image-navigate-button-row',
                style={'padding-top': 10}
            ),
            dbc.Row(id='button-image-separator', style={'padding-top': 10}),
            # html.Button('Next', style='primary', id='next-image'),
            html.Div(
                id='object-image',
                className='container',
                style={'background-image': '',
                       'background-size': 'contain', 'background-repeat': 'no-repeat',
                       'background-position': 'center', 'max-width': '1920px',
                       'max-height': '1080px'}
            ),
            html.Div(
                    html.Pre(id='lasso', style={'overflowY': 'scroll', 'height': '100px'}),
                    className="three columns"
                ),
            # dbc.Row(
            #     html.Div(
            dbc.Row(
            [dcc.Graph(
                id='graph_map',
                figure={
                    'data': [{'type': 'scattermapbox'}],
                    'layout': {
                        'mapbox': {
                            'accesstoken': (
                                'pk.eyJ1IjoiYW51Ymhhdi1uZXRyYSIsImEiOiJjazNmcW9zOGM' +
                                'wNWlrM2xubjN5bHdqYmVrIn0.nXp3hT-p1dNcjx8BrGiTrA'
                            )
                        },
                        'margin': {
                            'l': 0, 'r': 0, 'b': 0, 't': 0
                        },
                    }
                }
            )]),
            #     )
            # ),
            html.Div(id='dummy', style={'display': 'none'})
        ])

Following is my sample callback function:

@app.callback(Output('lasso', 'children'),
              [Input('graph_map', 'clickData')])
def check_callback1(selectedData):
    style = {'overflowY': 'scroll', 'height': '100px'}
    return []

This callback is getting triggered only on page load but not on clicking the data points on the graph once the page loads. Could you please help?

Note: Callbacks on all o ther functions are working just fine

Posts: 2

Participants: 1

Read full topic