Black Lives Matter. Please consider donating to Black Girls Code today.

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:

    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:

    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:

    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)
          type= 'line',
          yref= 'paper', y0= 0, y1= 1,
          xref= 'x', x0= btdf[input_data].iloc[-1],x1= btdf[input_data].iloc[-1]
    figbt.layout.paper_bgcolor = '#1E2130'
    figbt.update_layout(xaxis =  {                                     	
                                    'showgrid': False	
                                yaxis = {                              	
                                   'showgrid': False},	
            'text': str(input_data)+" Day Correlation Backtest",	
            'xanchor': 'center',	
            'yanchor': 'top'},	
        yaxis_title=str(input_data)+" Day % Return",	
        xaxis_title=str(input_data)+" Day Sector Correlation",	
            family="Courier New, monospace",	

    return dcc.Graph(style={'height': '700px'},figure=figbt)
                Select Correlation Lookback From Dropdown:	
            ''',style= {"color":"aquamarine","background-color":'#1E2130'}),	
                Select Forward Return Period From Dropdown:	

Does this help answer your question?


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