Dropdown multi error -- "ValueError: Arrays were different lengths"

Dash Python
1

First time user of Dash (very impressed by the way) so I’m hoping this is just an oversight on my part. I created a graph with two drop down menus that interact with each other. This works great. I want users to be able to select multiple items from the second drop down. I added multi=True but when I go to click the items I get the error ValueError: Arrays were different lengths.

This is what I’ve tried:

app.layout = html.Div([
        html.H3(
            children='Aggregated Number of Graduates in Education by State',
            style={
                'textAlign': 'center',
            }
        ),
        html.Div([
            
            html.Div([
                dcc.Dropdown(
                    id='state-id',
                    options=[{'label': i, 'value': i} for i in state],
                    value = 'Alaska'
                )
            ],
            style={'width': '48%', 'display': 'inline-block'}),
            
        html.Div([
            dcc.Dropdown(
                id='indicator-id',
                options=[{'label': i , 'value': i} for i in available_indicators],
                value='state total',
                multi=True
                )
            ],
            style={'width':'48%', 'float': 'right', 'display': 'inline-block'})
        ]),
        
        dcc.Graph(id='indicator-graphic')
    ])


@app.callback(

    dash.dependencies.Output('indicator-graphic', 'figure'),
    [dash.dependencies.Input('state-id', 'value'),
     dash.dependencies.Input('indicator-id', 'value')])
def update_time_series(state_id, indicator_id):
    dff = df[df['state_long'] == state_id]
    
    return {
        'data' : [go.Scatter(
            x = dff[dff['indicator'] == indicator_id]['year'],
            y = dff[dff['indicator'] == indicator_id]['value'],
            mode='lines')],
        'layout' : go.Layout(
            xaxis={'title': 'Year'},
            yaxis={'title': 'Total Graduates in Education'}
        )
    }

GIF
GIF.gif1592×876 498 KB

Is this an error in how I structured the data or is there something else going on?

Thanks for you help.

2

Hi,

The problem here is that when you use a multi dropdown, the value in the callback becomes a list of the selected values. This means that you have to loop through each item in the list and add a new trace to the figure object, something like this:

@app.callback(
    dash.dependencies.Output('indicator-graphic', 'figure'),
    [dash.dependencies.Input('state-id', 'value'),
     dash.dependencies.Input('indicator-id', 'value')])
def update_time_series(state_id, indicator_ids):
    dff = df[df['state_long'] == state_id]
    data = []
    for indicator_id in indicator_ids:
        trace = go.Scatter(
            x = dff[dff['indicator'] == indicator_id]['year'],
            y = dff[dff['indicator'] == indicator_id]['value'],
            mode='lines')
            data.append(trace)
    return {
        'data' : data,
        'layout' : go.Layout(
            xaxis={'title': 'Year'},
            yaxis={'title': 'Total Graduates in Education'}
        )
    }

The error you were getting was from attempting to do this:

dff[dff['indicator'] == indicator_id]['year']

with indicator_id as a list (of different length to dff) instead of a single value.

Hope this helps!

3

This works great! Only one small change, data.append(trace) needed to be nested within the loop. Thanks again for your help.

1 Like
4

Hey, i had same problem as you mentioned, but i am using go.Bar() x2 inside my loop, when i am adding them into loop i am receiving multimple bars (2 times more) , why ?
fast example:

def update_time_series(state_id, indicator_ids):
dff = df[df['state_long'] == state_id]
data = []
for indicator_id in indicator_ids:
    trace1 = go.Bar(
        x = dff[dff['indicator'] == indicator_id]['year'],
        y = dff[dff['indicator'] == indicator_id]['value'])
        data.append(trace1)
   trace2 = go.Bar(
            x = dff[dff['indicator2'] == indicator_id]['year'],
            y = dff[dff['indicator2'] == indicator_id]['value'])
            data.append(trace2)

Before loop i received same error as above, loop solved problem but now i have not groupped Bars

5

What do you mean with “not grouped Bars”?
How do you want your bars to look like?
Can you give an example of what you want as an output and what you get as an output?
One thing though:
You get twice as many bars because in your loop you are adding the same trace twice.
trace1 and trace 2 are identical.

6

hye, sory for late reply, i have changed name of column as you can see above.

before loop i received(without dropdown):

2 values on Xaxis , each with 2 Bars on Yaxis

With loop i am receiving 4 values on Xaxis with 4 Bars on Yaxis.

as you can see loop is helping me to use Dropdown, but its making too much bars
edit: ok solved, i have replaced loop by creating list of options