Update axes when pressing button in plotly scatter plot

Question

I have several lists of numbers that I would like to compare in a pairwise fashion. I try to use Plotly to make a scatter plot and adding buttons I would like to be able to change the lists in either the x or y axis.

Using the example in the documentation, I managed to create the plot and the buttons. However, the axes are not updated when I select another list.

Here is my code with an example:

import plotly
from plotly import graph_objs as go, offline as po, tools
po.init_notebook_mode()

import numpy as np

l1 = list(np.random.randint(100, size=100))
l2 = list(np.random.rand(100))
l3 = list(np.random.randint(100, size=100))

# Create figure
fig = go.Figure()

# Add scatter
fig.add_trace(go.Scatter(
     x=l1,
     y=l1,
    mode = 'markers'
)
             )

# Add drowdowns
button_layer_1_height = 1.15
fig.update_layout(
    updatemenus=[
        go.layout.Updatemenu(
            buttons=list([
                dict(
                    args=["x", l1],
                    label="L1",
                    method="restyle"
                ),
                dict(
                    args=["x", l2],
                    label="L2",
                    method="restyle"
                ),
                dict(
                    args=["x", l3],
                    label="L3",
                    method="restyle"
                ),
            ]),
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.02,
            xanchor="left",
            y=button_layer_1_height,
            yanchor="top"
        ),
        go.layout.Updatemenu(
            buttons=list([
                dict(
                    args=["y", l1],
                    label="L1",
                    method="restyle"
                ),
                dict(
                    args=["y", l2],
                    label="L2",
                    method="restyle"
                ),
                dict(
                    args=["y", l3],
                    label="L3",
                    method="restyle"
                ), 
            ]),
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.15,
            xanchor="left",
            y=button_layer_1_height,
            yanchor="top"
        ),
    ]
)

fig.update_layout(
    annotations=[
        go.layout.Annotation(text="x", x=0, xref="paper", y=1.08, yref="paper",
                             align="left", showarrow=False),
        go.layout.Annotation(text="y", x=0.13, xref="paper", y=1.08,
                             yref="paper", showarrow=False),
    ])

fig.show()

vestland · Accepted Answer · 2019-11-22 12:00:11Z

In args, your lists, for example L1, needs to be en element of a list and not only a list in itself. So just change all your args=["x", l1] to args=["x", [l1]] and you're good to go! Sounds too good to be true? Here's some proof

Plot at first run:

Plot when selecting L2 for x:

Plot when selecting L3 for y:

And here's your edited code:

import plotly
from plotly import graph_objs as go, offline as po, tools
po.init_notebook_mode()

import numpy as np

l1 = list(np.random.randint(100, size=100))
l2 = list(np.random.rand(100))
l3 = list(np.random.randint(100, size=100))

# Create figure
fig = go.Figure()

# Add scatter
fig.add_trace(go.Scatter(
     x=l1,
     y=l1,
    mode = 'markers'
)
             )

# Add drowdowns
button_layer_1_height = 1.15
fig.update_layout(
    updatemenus=[
        go.layout.Updatemenu(
            buttons=list([
                dict(
                    args=["x", [l1]],
                    label="L1",
                    method="restyle"
                ),
                dict(
                    args=["x", [l2]],
                    label="L2",
                    method="restyle"
                ),
                dict(
                    args=["x", [l3]],
                    label="L3",
                    method="restyle"
                ),
            ]),
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.02,
            xanchor="left",
            y=button_layer_1_height,
            yanchor="top"
        ),
        go.layout.Updatemenu(
            buttons=list([
                dict(
                    args=["y", [l1]],
                    label="L1",
                    method="restyle"
                ),
                dict(
                    args=["y", [l2]],
                    label="L2",
                    method="restyle"
                ),
                dict(
                    args=["y", [l3]],
                    label="L3",
                    method="restyle"
                ), 
            ]),
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.15,
            xanchor="left",
            y=button_layer_1_height,
            yanchor="top"
        ),
    ]
)

fig.update_layout(
    annotations=[
        go.layout.Annotation(text="x", x=0, xref="paper", y=1.08, yref="paper",
                             align="left", showarrow=False),
        go.layout.Annotation(text="y", x=0.13, xref="paper", y=1.08,
                             yref="paper", showarrow=False),
    ])

fig.show()

Collectives™ on Stack Overflow

Update axes when pressing button in plotly scatter plot

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related