Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Update graph figure=fig & run python script | 1 slider - 2 graphs

Hi,

I have a slider and 2 graphs. When I move the slider, it calls a callback and updates one graph. I also want it to update the second graph. In the callback, when I move the slider it recalculates the first graph in the function. In same function, I’m calling to recalculate the data for the second graph. But I dont understand how to pass the new data to the second graph.

Callback from first graph

def update_figure(data1, data2):
       
        new_data_for_graph_1 = my_module(data1, data2) # data for graph 1

       new_data_for_graph_2(new_data_for_graph_1 ) # data for graph 2

      fig1 = px.scatter(new_data_for_graph_1, x, y) # update graph 1

     return fig1

Second graph below

def func_to_calc_graph_2_data():
    ....
    ....
    return node_trace, edge_trace, G

#### Start Dash #####

# figure to create plot
fig = go.Figure(data=[edge_trace, node_trace],
             layout=go.Layout(
                title='<br>Network Graph of '+str(num_nodes)+' rules',
                titlefont=dict(size=16),
                showlegend=False,
                hovermode='closest',
                margin=dict(b=20,l=5,r=5,t=40),
                annotations=[ dict(
                    showarrow=False,
                    xref="paper", yref="paper",
                    x=0.005, y=-0.002 ) ],
                xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
                yaxis=dict(showgrid=False, zeroline=False, showticklabels=False)))

# Div layout
html.Div([
                    html.Div(dcc.Graph(
                        id='node_graph',
                        figure=fig, 
                        style={'width': '39%', 'display': 'inline-block'}
                        )),
                    html.Div(className='row', children=[
                        html.Div([html.H2('Overall Data'),
                                  html.P('Num of nodes: ' + str(len(G.nodes))),
                                  html.P('Num of edges: ' + str(len(G.edges)))],
                                  className='three columns'),
                        html.Div([
                                html.H2('Selected Data'),
                                html.Div(id='selected-data'),
                            ], className='six columns')
                        ])
        ])


@app.callback(
    Output('selected-data', 'children'),
    [Input('node_graph','selectedData')])
def display_selected_data(selectedData):
    num_of_nodes = len(selectedData['points'])
    text = [html.P('Num of nodes selected: '+str(num_of_nodes))]
    for x in selectedData['points']:
#        print(x['text'])
        material = x['text'].split('<br>')[0][7:]
        text.append(html.P(str(material)))
    return text