Plot two different datasets into plotly using drop down menu

Question

I have two different datasets (x0,y0), (x1,y1). I need to create two plots and use a drop down menu to select between them.

I am using this code:

import plotly
import plotly.graph_objs as go
import random

x0 = [x for x in range(0,20)]
x1 = [x for x in range(5,100)]

y0 = [random.randint(0,20) for x in range(len(x0))]
y1 = [random.randint(0,50) for x in range(len(x1))]

trace1 = go.Scatter(x=x0,y=y0,line=dict(shape='vh'))
trace2 = go.Scatter(x=x1,y=y1,line=dict(shape='vh'))

data = [trace1,trace2]

updatemenus = list([
    dict(active=0,
         buttons=list([   
            dict(label = "4 Aug 1",
                 method = "update",
                 args= [data[0]]),
            dict(label = "4 Aug 2",
                 method = "update",
                 args= [data[1]])]))])


layout = dict(title="Dropdown",
              showlegend=True,
              xaxis=dict(title="Hours"),
              yaxis=dict(title="Number"),
              updatemenus=updatemenus)

fig=dict(data=data, layout=layout)

plotly.offline.plot(fig)

Using this code, it plots two datasets into one area, which I would not like to do. And when I select a proper chart on dropdown menu, it just fails to load proper chart.

glhr · Accepted Answer · 2019-04-29 21:18:35Z

5

The problem is that you're directly assigning traces to args. Instead, you should be using the visible property to control which traces in data are visible:

updatemenus = list([
    dict(active=0,
         showactive = True,
         buttons=list([   
            dict(label = "4 Aug 1",
                 method = "update",
                 args = [{"visible": [True, False]}]), # hide trace2
            dict(label = "4 Aug 2",
                 method = "update",
                 args = [{"visible": [False, True]}]) # hide trace1
            ]))])

If you only want to show the first trace when the page is loaded, you also need to explicitly set the visible attribute of the second trace to False:

trace1 = go.Scatter(x=x0,y=y0,line=dict(shape='vh'))
trace2 = go.Scatter(x=x1,y=y1,line=dict(shape='vh'), visible=False)
data = [trace1,trace2]

See the official Plotly example.

answered Apr 29, 2019 at 21:18

glhr

4,5471 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

filtertips Over a year ago

Yes, this works perfectly. Thank you. May I just ask what active = 0 stands for? I couldn't find that in documentation. Thanks.

glhr Over a year ago

active determines which entry in the drop-down is selected when you load the page. So right now active=0 means that the first entry 4 Aug 1 is selected in the drop-down. You can also set it to -1, so that no entry is selected. See plot.ly/python/reference/…

Collectives™ on Stack Overflow

Plot two different datasets into plotly using drop down menu

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related