✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Checklist Callback Multiple Traces

Hi I am trying to use a callback that connects a checklist to multiple traces in the resulting graph. The checklist comprises of different age ranges in a "Age"column in my dataset. However, the issue I am running into is that a checklist can have multiple values when you select two or more values and I am having trouble incorporating those values into my update graph function as seen in the code below:

 Gender=xl['Gender'].unique()
Age=xl['Age'].unique()
Activity=xl['Sport'].unique()

app=dash.Dash(__name__)

app.layout=html.Div(children=
[html.Div([
html.H3('Age:', style={'paddingRight': '30px','fontSize':18}),

dcc.Checklist(
    id='Age',
    options=[
        {'label': i, 'value': i} for i in Age],
value='18-24' 
)], style={'width':'33%','display':'inline-block'}),

html.Div([
html.H3('Gender:', style={'paddingRight': '30px','fontSize':18}),
dcc.Dropdown(
    id='Gender', 
    options=[
        {'label': 'Male', 'value': 'Male'},
        {'label': 'Female', 'value': 'Female'}
    ],
    value='Male'
)], style={'width':'33%','display':'inline-block'}),

html.H3('Activity:', style={'paddingRight': '30px','fontSize':18}), 

dcc.Dropdown(
id='Sport',
options=[
{'label': i, 'value': i} for i in Activity],
value='Yoga'
),
],style={'width':'33%','display':'inline-block'}),

html.Div([
dcc.Graph(id='linear')]),

html.Div([
dcc.Graph(id='linear2')
])])

@app.callback(
dash.dependencies.Output('linear','figure'),
[dash.dependencies.Input('Gender','value'),
dash.dependencies.Input('Sport','value'),
dash.dependencies.Input('Age','value')])

def update_graph(Gender_name,sport_name,age_name):
  xl1=xl[xl['Gender'] == Gender_name]
  xl2=xl1[xl1['Sport'] == sport_name]
  xl3=xl2[xl2['Age'] == age_name]

  Total_x=xl3.Date
  y =xl3.Core

  trace1=go.Bar(x=Total_x,y=y,name==age_name')
  trace2=go.Bar(x=Total_x,y=y,name==age_name)
  trace3=go.Bar(x=Total_x,y=y,name='18-24')

  Totallayout=go.Layout(xaxis={'title': 'Year'},
                          yaxis={'title': 'Participants'},
                          title= 'Core Player Comparison',
                          hovermode='closest')


  return {'data':[trace2,trace1,trace3],
         'layout':[Totallayout]}

I would like the traces to be interactively linked to the checklist, so that they appear or disappear in the graph when I click on their inputs. Is this a case where I should create a loop inside the function? Any help would be greatly appreciated, thanks!

1 Like

Running into the same issue.
Were you able to make any progress??