[Solved] How to update different figures with different dropdown values

Dash Python
1

I have two dcc.Graph objects and two dcc.Dropdown in two different Divs: to update the graphs I have 2 callbacks and relative functions:

@app.callback(
dash.dependencies.Output(‘countsbyfield-graph’, ‘figure’),
[dash.dependencies.Input(‘field-dropdown-a’, ‘value’)])
def update_output_div_a(selectedcol):
…

@app.callback(
dash.dependencies.Output(‘countsbydate-graph’, ‘figure’),
[dash.dependencies.Input(‘field-dropdown-b’, ‘value’)])
def update_output_div_b(selectedcol):

groupbyselcol = dfdate.groupby([selectedcol])[‘PIT.ID’].agg(lambda x:len(x.unique()))
unstacked = dfdate.groupby([“date”,selectedcol])[‘PIT.ID’].agg(lambda x:len(x.unique())).unstack().reset_index()
print unstacked[‘Herdla’]
cmap = plt.cm.get_cmap(‘Dark2’, groupbyselcol.shape[0])
colors = []
for i in range(cmap.N):
rgb = cmap(i)[:3] # will return rgba, we take only first 3 so we get rgb
colors.append(matplotlib.colors.rgb2hex(rgb))

listoftraces = []
for i in range(0,groupbyselcol.shape[0]) :
    value = groupbyselcol.reset_index()[selectedcol][i]
    trace = go.Bar(x=unstacked["date"],y=unstacked[value],name=value,marker=dict(color = colors[i]))
    listoftraces.append(trace)

return {
    'data': listoftraces,
    'layout': go.Layout(
        plot_bgcolor = appcolors['background'],
        paper_bgcolor = appcolors['background'],
        barmode='stack',
        font=dict(
            family='Cabin, monospace',
            color='#7f7f7f'
        ),
        #title='Counts by ' + selectedcol + ' limited to Arter = Salmo Salar, repings in all years of all years marking data ',
        xaxis=dict(
            title=selectedcol,
            tickangle = 30,
            titlefont=dict(
                size=18,
                color='#7f7f7f'
            )
        ),
        yaxis=dict(
            title='unique PIT.IDs counts',
            titlefont=dict(
                size=18,
                color='#7f7f7f'
            ),
            type='log',
        ),
        margin=go.Margin(
            b=150,
            t=100,
            l=100
        )
    )# end layout
}
2

It looks like you’re on the right track! Did this not work for you? Check out the second chapter of the user guide at Part 2. Basic Callbacks | Dash for Python Documentation | Plotly for a few examples with multiple inputs and multiple outputs.

1 Like
3

I managed to do it, but apparently I am not understanding how variables inside the defined functions are accessed: apparently they must have unique names, not dummy names shared between functions… or is it so? for example, can you have:

def update_output_div_a(selectedcol):
df=df[df[‘selectedcol’]
return df

def update_output_div_b(selectedcol):
df=df[df[‘selectedcol’]
return df

? seems like no

4

The variables inside the functions can have whatever names you assign them. selectedcol can be used as the variable or input argument in multiple functions. One thing that looks off in your example is this: df=df[df['selectedcol']]. If selectedcol is a variable, then you should just do df[selectedcol] (no strings around it). Also, try to avoid re-assigning the same variable inside the function: instead of df=df[...] do something like dff=df[...].

Hope that helps!

5

yeah sorry of course I meant df=df[df[selectedcol] without quotes…
also of course the variables inside the function can indeed have whatever names, dumb from my part to even think the opposite…
my problem was probably as you say in re-assigning something wrongly inside the function, solved anyway. thanks!