Same Input But Multiple Changing Outputs

Hello Community,

My App has one dropdown that picks the name(ticker) of a company and plots two figures. As you can imagine there is one input and two output figures. One thing that I could do is follow this link and create separate functions for each of the outputs corresponding to the same input. However, the number of my outputs are not fixed. They might change depending on what the user wants because I have another input box that allows the user to specify the number of outputs. My question is how can I dynamically change the number of outputs and show different number of plots depending on what the user actually wants. Even during one session, one user might prefer to switch from two outputs into five outputs or vice versa. You can see part of my code in this link. The number of outputs that I am referring to is stored in a variable named items in this code.

Thank you friends.

Hi @rozi

I think one way is to bild the entire Div in the callback, say you just put in the layout a html.Div where the different graph will be shown and then in the callback using the Div ‘children’ as Output bild all the different graph you want to show depending on the users input.
And return them all together like:

children = dcc.Graph(id=items[0), dcc.Graph(id=items[1]), etc.

    return children

@Eduardo I was actually able to create multiple graphs with the way you suggested. Now the question is how can I update each plot separately? In other words, I want a call back function that loops through multiple output ids and plots each one.

Hi @rozi
Explain a little bit what are the different inputs that the user can select and the output that you want to show in each case and I will see if I can find a solution.
I know that it is possible to have multiple dynamic inputs using special functions, but I don’t know if it’s possible to have multiple dynamic output, that’s why I suggested the option to build the output all together in a children html.Div.

Hi @Eduardo
Sure, here is a little bit of explanation. There is one box where the user enters the name of the ticker symbol(APPL, etc.). Once the user picks this symbol, I l plot two figure corresponding to apple. Let’s say figures A, B. Now, the user also has the option of adding extra plots, let’s say C, D. The user can do it by entering their name into another text box. How can update the two plots into four plots dynamically?

Thank you.

I’m not sure if I understand correctly, but it seams that the two first graphics are showed independently if the user choose to see the additional extra plots or not, that means there is not necessary to include them into the html.Div I was talking about.
Then when the user chose additional charts from another dropdown you can use that information as Input in a different callback taking the value of the first dropdown as 'State’

@app.callback(Output('my-div', 'children'),
              [Input('second_dropdown', 'value'),
              State('first_dropdown', 'value')])
def update_div(second_dropd_value, first_dropd_value):
    if second_dropd_value == 'option1':
        bild the corresponding graph for this option for the company 'first_dropd_value'
    else if second_dropd_value == 'option2':
       idem option1
    return the variable with all the plots selected in the second dropdown

Sorry if I misunderstud your explanation.