CODEWITHSUNDEEP
plotlyplotly-dash
RBW
RBW

Reputation: 41

Cannot get multiple inputs and outputs to work in Dash

I'm trying to create a graph with multiple (between 1 and 4) inputs from a dropdown. I would like to have as many Bars as there are inputs in said graph. Unfortunately I can't seem to get it to work.

When I create the graph "manually", by having a list of bars in a list and then calling it: (I've shown only the relevant parts of the code, I have the app.layout, all the necessary divs etc.)

departments = ['ladies','mens','accessories','kids']
output = []
for dep in departments:
    output.append(
         go.Bar(
             name = dep,
             x = categories[(categories.category == dep)]['sales']
     ))
dcc.Graph(figure = go.Figure(data = output))

Works as expected, graphs the bars.

I tried moving to having callbacks with a drop-down list of departments:

dcc.Dropdown(
            id = 'departament_b',
            options =[
                {'label': 'Ladies', 'value': 'ladies'},
                {'label': 'Mens', 'value': 'mens'},
                {'label': 'Accessories', 'value': 'accessories'},
                {'label': 'Kids', 'value': 'kids'}
            ],
            value = ['ladies','mens','accessories','kids'],
            multi = True
        )
,
dcc.Graph(id = 'kategorie-sls')

Then I have my callback:

@app.callback(
[Output('kategorie-sls', 'figure')],
[Input('departament_b', 'value')]
)

And a function to update the graph:

def categories-sales(department_b):
    graph = []
    for dep in department_b:
        graph.append(go.Bar(
            name = dep,
            x = categories[(categories.category == dep)]['sales']
        ))

And I get the error:

dash.exceptions.InvalidCallbackReturnValue: Invalid number of output values for ..kategorie-sls.figure...

Expected 1 got 4

And if I select 1 value from drop-down (or change it to not multi and put only 1 value in value = ['ladies'] I get this error:

Failed component prop type: Invalid component prop `figure` key `name` supplied to Graph. Bad object: { 
"name": "ladies", "x": [ 18535.059999999998 ], "type": "bar" } Valid keys: [ "data", "layout", "frames" ]

*(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace 
 or open your browser's console.)*

I've tried putting the output in a dictionary in this question:

return {'data' : graph}

But then I just get an error how the output should be a list or a tuple...

Is what I'm trying to achieve even possible?

Upvotes: 3

Views: 2853

Answers (2)

Himanshu Bhesaniya
Himanshu Bhesaniya

Reputation: 1

don't use list[] in output if you have only one element to return in one definition function suppose I have 3 element as an input and one as an output, so I just used list[] in input because there is multiple element so I have to pass in list[] and in output there is only one element pass as it is.

it'll work defiantly.

@app.callback(
    Output(component_id='crop_map', component_property='figure'),
    [Input(component_id='District', component_property='value'),
    Input(component_id='Taluk', component_property='value'),
    Input(component_id='Village', component_property='value')])

Upvotes: 0

RBW
RBW

Reputation: 41

The issue was that I had my callback Output as a list but the actual output of the function wasn't a list, as it should be. If the callbackOutput isn't defined as a list

@app.callback(Output('xx','value'),..)

Then it works as expected. Credit to @alexcjohnson @ plotly community forum https://community.plot.ly/t/cannot-get-multiple-inputs-and-multiple-outputs-to-work/26945

Upvotes: 1

Related Questions