Scatter with two Dropdowns menu

📊 Plotly Python
1

I would like to visualize a Scatter and update the (X, Y) values based on the selection of two Dropdowns.

I want to avoid adding all the possible combinations of traces and using one Dropdown to display the selected (X,Y) combination.

Is it possible to do it without Widgets? E.g. using this kind of approaches https://plotly.com/python/dropdowns/

2

@raf.martone

Yes, it is possible but please tell us what do you intend to update when pressing the first button, respectively the second one.

3

Sorry, I didn’t notice that there is a working example with multiple attributes in the documentation. I will follow the example to do my task.

4

Also, is it possible to update multiple subplots at the same time with this approach?

5

@raf.martone Your question is too general.
What type are the traces in your subplots?
What do you want to update simultaneously??

  • some data and/or data attributes
  • layout attributes
  • or both data and layout attributes???

What is the approach you are referring to?

6

Ok, I’ll show a simplified version of my problem:

I have the following two subplots:

usecase
usecase1191×470 11.8 KB

I want that the Y-values of the selection should be Y=6 and for the other plot Y=4. That is to say, choosing ‘B’ from the Dropdown options means that in the first plot Y-values become 4 and in the second plot Y-values become 6.

I don’t understand what I must pass to updatemenus to achieve this goal. Here is my code:

qqq
qqq564×593 9.73 KB

Thank you very much in advance.

7

Hi @raf.martone,

Here is the code that updates simultaneously all subplots:

import plotly.graph_objects as go
from  plotly.subplots import make_subplots
import numpy as np

fig = make_subplots(rows=1, cols=2)

x = list(range(1,6))
y2 = [4]*5
y1 = [6]*5
fig.add_trace(go.Scatter(x=x, y=y1), 1, 1)
fig.add_trace(go.Scatter(x=x, y=y2), 1, 2)
fig.update_layout(width=700, height=500,
                  yaxis_range=[0,10],
                  yaxis2_range=[0,10]);

fig.update_layout(
    updatemenus=[
        dict(
            buttons=[
                dict(
                    args=[{'y':[y1, y2]}, 
                          {'traces': [0,1]}], 
                    label="A",
                    method="restyle"
                ),
                dict(
                    args=[{'y':[y2, y1]}, 
                          {'traces': [0, 1]}],  #restyle both fig.data[0], fig.data[1] 
                    label="B",
                    method="restyle"
                ),
                
            ],
            showactive=True,
            x=-0.2,
            xanchor="left",
            y=1,
            yanchor="top"
        )
    ]
)
                    label="A",
                    method="restyle"
                ),
                dict(
                    args=[{'y':[y2, y1]}, 
                          {'traces': [0, 1]}],  #restyle both fig.data[0], fig.data[1] 
                    label="B",
                    method="restyle"
                ),
                
            ],
            showactive=True,
            x=-0.2,
            xanchor="left",
            y=1,
            yanchor="top"
        )
    ]
)

Note that because both subplots display the same trace type (Scatter), we give a list of lists [y1, y2], respectively, [y2,y1], to update y. The dict {'traces' :[0,1]} informs plotly.js that the first list is for updating y in the first trace added to the figure, while the second list, for the second trace.

PS When you provide code with your question, please don’t upload an image, but use the Markdown rule to display code https://www.markdownguide.org/basic-syntax/#code:

your code

8

Thank you very much. Solved my problem.