Black Lives Matter. Please consider donating to Black Girls Code today.
https://www.blackgirlscode.com

Select-data from callback generated graph dash

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!

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

1 Like

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.

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)

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

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