Select-data from callback generated graph dash

Dash Python
1

Hellow, I am trying to create a graph via a dash app callback from selected data (lasso or box) from another graph that I have created from the first dash app callback.

The first dash app callback output graph component property is children as such:

@app.callback(	
    Output(component_id='firstgraph', component_property='children'),	
    [Input(component_id='firstgraphinput1', component_property='value'),
    Input(component_id='firstgraphinput2', component_property='value')]	
)

So when I try to select data from this graph, the callback does not work, because the component_property cannot be “selectedData”)… as such:

@app.callback(	
    Output("selected-data", "figure"),	
    [	
        Input("firstgraph", "selectedData"),	
    ]	
)

I get a an error message along the lines of: “selectedData is not a valid component property”

In Summary I am trying to figure out how to select data from the first generated graph via the first callback, and create a summary of the selected data.

I hope this was clear, if not I will do my best to elaborate.

Thank you!

2

are you sure that the firstgraph is part of the dcc.Graph component and not some other component?

1 Like
3

Hi ChriddyP thanks for your reply.

This is the App callback and code that generates the chart… and here it is in the APP layout:

@app.callback(	
    Output(component_id='firstgraph', component_property='children'),	
    [Input(component_id='firstgraphinput1', component_property='value'),
    Input(component_id='firstgraphinput2', component_property='value')]	
)		
def update_valuecb(input_data,input_data2):	

        
    figbt = px.scatter(x=btdf[input_data], y=btdf[input_data2],opacity=0.35)
    figbt.update_layout(shapes=[
        dict(
          type= 'line',
          yref= 'paper', y0= 0, y1= 1,
          xref= 'x', x0= btdf[input_data].iloc[-1],x1= btdf[input_data].iloc[-1]
        )
    ])
    figbt.layout.plot_bgcolor='#1E2130'	
    figbt.layout.paper_bgcolor = '#1E2130'
    figbt.update_layout(xaxis =  {                                     	
                                    'showgrid': False	
                                         },	
                                yaxis = {                              	
                                   'showgrid': False},	
            title={	
            'text': str(input_data)+" Day Correlation Backtest",	
            'y':0.9,	
            'x':0.4,	
            'xanchor': 'center',	
            'yanchor': 'top'},	
        yaxis_title=str(input_data)+" Day % Return",	
        xaxis_title=str(input_data)+" Day Sector Correlation",	
        font=dict(	
            family="Courier New, monospace",	
            size=18,	
            color="white"	
        )	
    )	


    return dcc.Graph(style={'height': '700px'},figure=figbt)

                html.Div(children=[	
            html.Div(children='''	
                Select Correlation Lookback From Dropdown:	
            ''',style= {"color":"aquamarine","background-color":'#1E2130'}),	
            dcc.Dropdown(options=dropdownlistc,id='firstgraphinput1',value=10),
            '''	
                Select Forward Return Period From Dropdown:	
            ''',
            dcc.Dropdown(options=dropdownlistcd,id='firstgraphinput2',value='r1'),
                        html.Div(id='firstgraph'),	
	])

Does this help answer your question?

Thanks.

4

The div has the graph id in this case.

Your graph generating callback should add the id to the graph being returned.

return dcc.Graph(id="first graph", style={'height': '700px'},figure=figbt)
5

Hi thanks for your reply. I added that in and still got the following error:

Attempting to assign a callback with
the property "selectedData" but the component
"firstgraph" doesn't have "selectedData" as a property.

Here are the available properties in "firstgraph":
['children', 'id', 'n_clicks', 'n_clicks_timestamp', 'key', 'role', 'data-*', 'aria-*', 'accessKey', 'className', 'contentEditable', 'contextMenu', 'dir', 'draggable', 'hidden', 'lang', 'spellCheck', 'style', 'tabIndex', 'title', 'loading_state']

Thank you

6

Hi @cocainesteamedrice,
What @mbkupfer way trying to say is that you’re dcc.Graph() needs an id that you can refer to in the input.
Right now “firstgraph” is the id of the HTML.div(). And a Div does not have a Selectdata property. You need to give you dcc.graph a unique id