Multi graph update for single dash component

Dash Python
1

I have two bar graphs and one rangeslider. On moving the rangeslider, I’d want both the graphs to be updated accordingly.

How do I go about? An example will be of great help.

2

@manutd46

`@app.callback(Output('my-graph_1', 'figure'),
               Output('my-graph_2', 'figure')
               Input('my_rangeslider', 'value'))
def update_graphs(ranges):
   
    figure1 =bild the figure for graph 1 using the ranges
    figure2 =bild the figure for graph 2 using the ranges
    
    return figure1, figure2
3

What is the difference betweeen def build_graph and def update_graphs?

4

You can chose the name you want.


def thenameyouwant(variables):
1 Like
5

@Eduardo I created the graphs using the syntax you gave above(they do appear on running the dash server) but my Slider is unable to interact with the graph that is as I move the slider I the graph does not change. below is the code

year_list = sorted(df.Year.tolist())

app = dash.Dash(__name__)

app.layout = html.Div(children=[ 
    html.Div([
        dcc.Graph(
            id='graph1'
        ),  
    ]),
    html.Div([
        dcc.Graph(
            id='graph2'
        ),  
    ]),
    dcc.RangeSlider(
        id='year-range-slider',
        min = min(year_list),
        max = max(year_list),
        marks={
            year: {"label": str(year), "style": {"writing-mode": "vertical-rl"}}
            for year in range(year_list[0], year_list[-1],5)},
        value=[2000, 2017]
        ),
    html.Div(id='output-container-range-slider')])

@app.callback(Output('graph1', 'figure'),
               Output('graph2', 'figure'),
               [Input('my-range-slider', 'value')])
def build_graphs(selected_year):
    filtered_df = df[df.Year == selected_year]
    figure1 = px.histogram(filtered_df.groupby('Team')['Winner'].count().reset_index(), x=
                           "Winner", y="Team")
    figure2 = px.histogram(filtered_df.groupby('Team')['Loser'].count().reset_index(), x=
                       "Loser", y="Team")
    figure1.update_layout(transition_duration=500)
    figure2.update_layout(transition_duration=500)
    
    return figure1, figure2


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

@manutd46
To find where is the problem print each variable and see if the values are as expected:

@app.callback(Output('graph1', 'figure'),
               Output('graph2', 'figure'),
               [Input('my-range-slider', 'value')])
def build_graphs(selected_year):

    print(selected_year)

    filtered_df = df[df.Year == selected_year]
    figure1 = px.histogram(filtered_df.groupby('Team')['Winner'].count().reset_index(), x=
                           "Winner", y="Team")
    figure2 = px.histogram(filtered_df.groupby('Team')['Loser'].count().reset_index(), x=
                       "Loser", y="Team")
    figure1.update_layout(transition_duration=500)
    figure2.update_layout(transition_duration=500)

    print(figure1)
    print(figure2)
    
    return figure1, figure2

[/quote]

1 Like