Use two graphs clickData to update other plots

Dash Python
1

Hello,
I’m a complete newbie using Dash (great work BTW) and I’m hiting a wall.

I have two graphs showing the evolution of Temperatures on one and Humidity on the other, over the same timescale.

When I select a point on one of this graph I want to update a text and some other graphs.

Everything works fine except that when I have selected data on one of the graph (for instance the one with the temperatures) I can’t update by clicking on the other graph.

For instance here is my code to update the text:
@app.callback(
dash.dependencies.Output(‘click-data’, ‘children’),
[dash.dependencies.Input(‘temp-time-series’, ‘clickData’),
dash.dependencies.Input(‘hum-time-series’, ‘clickData’)])
def display_click_data(clickDataTemp,clickDataHum):
if clickDataTemp :
return clickDataTemp[‘points’][0][‘x’]
elif clickDataHum:
return clickDataHum[‘points’][0][‘x’]

I think I understand the problem as once I have selected a point on a graph it stays selected even if I select another point on the other graph. However I have no idea how to fix it.

Thanks a lot for your help!

2

Hi

I’m same problem :frowning:
Is it possible to solve it?

Thank you in advance

3

Hi @pharizna

Check out the section on dash.callback_context here: https://dash.plotly.com/advanced-callbacks

If this doesn’t answer your question, feel free to post a small example of the problem and it will be easier to help.

4

Hi @AnnMarieW

There is an “incomplete” example but it’s interesting to explain “my problem”.

In the console (print command) you can see the X value from one Graph but when you change to the another one … doesn’t catch the data,

If you began with the second one graph you can take data from Graph1 :wink:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div( children=[

    dcc.Graph(
        id='Graph1',
        figure={
            'data': [
                {'x': [1, 2, 3,4,5], 'y': [4, 1, 2, 6, 7], 'type': 'markers'},
                {'x': [1, 2, 3,4,5], 'y': [1, 4, 5 , 2 ,3], 'type': 'markers'},
            ],
        }
    ),
    dcc.Graph(
        id='Graph2',
        figure={
            'data': [
                {'x': [1, 2, 3, 4], 'y': [2,5,6, 7], 'type': 'markers'},
                {'x': [1, 2, 3 , 4], 'y': [3,9,4, 1], 'type': 'markers'},
            ],
        }
    ),
    html.Div(id='output_s'),

])

@app.callback(
    Output('output_s', 'children'),
    [Input('Graph1', 'clickData'),
     Input('Graph2', 'clickData')]
        )
     
def update_graph(clickData,clickData2):

    if clickData:
       x_selected =clickData['points'][0]['x']  
       print("First: ",x_selected)       


    elif clickData2:
       x_selected =clickData2['points'][0]['x']  
       print("Second:",x_selected)      
       

       return (x_selected)
   
if __name__ == '__main__':
    app.run_server(debug=False)

Thank you for your help

5

hi @pharizna

Thanks for the example!

If you use dash.callback_context (see link in previous post for more info), it allows you to see which input has triggered the callback.

Check this out:


import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div( children=[

    dcc.Graph(
        id='Graph1',
        figure={
            'data': [
                {'x': [1, 2, 3,4,5], 'y': [4, 1, 2, 6, 7], 'type': 'markers'},
                {'x': [1, 2, 3,4,5], 'y': [1, 4, 5 , 2 ,3], 'type': 'markers'},
            ],
        }
    ),
    dcc.Graph(
        id='Graph2',
        figure={
            'data': [
                {'x': [1, 2, 3, 4], 'y': [2,5,6, 7], 'type': 'markers'},
                {'x': [1, 2, 3 , 4], 'y': [3,9,4, 1], 'type': 'markers'},
            ],
        }
    ),
    html.Div(id='output_s'),

])

@app.callback(
    Output('output_s', 'children'),
    [Input('Graph1', 'clickData'),
     Input('Graph2', 'clickData')]
        )
     
def update_graph(clickData,clickData2):
    ctx = dash.callback_context
    input_id = ctx.triggered[0]['prop_id'].split('.')[0]

    if input_id== 'Graph1':    
       x_selected =clickData['points'][0]['x']  
       print("First: ",x_selected) 
       return (x_selected)


    elif input_id== 'Graph2':
       x_selected =clickData2['points'][0]['x']  
       print("Second:",x_selected) 
       return (x_selected)
   
if __name__ == '__main__':
    app.run_server(debug=True)
2 Likes
6

Perfect!

THANK YOU VERY MUCH!

1 Like