5

Can someone help me how to make add a "dropdown" menu in a plotly-bar chart. I've found some information on the following link (https://plot.ly/python/v3/dropdowns/) but I'm struggling to adapt the code, so the dropdown options are all (unique) values in a certain column)

E.g. a (Part of my table is the following:

date        Reason          name            Task
2019-11-17  AI              CHRISTOPHE      3
2019-10-27  RANDOM          CHRISTOPHE      19
2019-11-03  RANDOM          CHRISTOPHE      19
2019-11-10  RANDOM          CHRISTOPHE      49
2019-11-17  RANDOM          CHRISTOPHE      26
2019-10-27  AI              FERRANTE        29
2019-11-03  AI              FERRANTE        40
2019-11-17  AI              FERRANTE        26
2019-10-27  RANDOM          FERRANTE        1
2019-11-03  RANDOM          FERRANTE        4
2019-11-10  RANDOM          FERRANTE        2 
2019-11-17  RANDOM          FERRANTE        2

I would love to have a plotly bar plot showing per date the number of allocated task per "reason" and a dropdown menu where I can select the names in the 'name' col.

1
  • How did my suggestion work out for you? Commented Dec 3, 2019 at 10:30

1 Answer 1

4

The following suggestion will let you select name and reason using two drop-down menus.

Plot 1: Button1=CHRISTOPHE, Button2=ALL

enter image description here

Plot 2: Button1=FERRANTE, Button2=RANDOM

enter image description here

Code:

# Imports
import plotly.graph_objs as go
import pandas as pd
import numpy as np

# data
df = pd.DataFrame({'date': {0: '2019-11-17',
                          1: '2019-10-27',
                          2: '2019-11-03',
                          3: '2019-11-10',
                          4: '2019-11-17',
                          5: '2019-10-27',
                          6: '2019-11-03',
                          7: '2019-11-17',
                          8: '2019-10-27',
                          9: '2019-11-03',
                          10: '2019-11-10',
                          11: '2019-11-17'},
                         'Reason': {0: 'AI',
                          1: 'RANDOM',
                          2: 'RANDOM',
                          3: 'RANDOM',
                          4: 'RANDOM',
                          5: 'AI',
                          6: 'AI',
                          7: 'AI',
                          8: 'RANDOM',
                          9: 'RANDOM',
                          10: 'RANDOM',
                          11: 'RANDOM'},
                         'name': {0: 'CHRISTOPHE',
                          1: 'CHRISTOPHE',
                          2: 'CHRISTOPHE',
                          3: 'CHRISTOPHE',
                          4: 'CHRISTOPHE',
                          5: 'FERRANTE',
                          6: 'FERRANTE',
                          7: 'FERRANTE',
                          8: 'FERRANTE',
                          9: 'FERRANTE',
                          10: 'FERRANTE',
                          11: 'FERRANTE'},
                         'Task': {0: 3,
                          1: 19,
                          2: 19,
                          3: 49,
                          4: 26,
                          5: 29,
                          6: 40,
                          7: 26,
                          8: 1,
                          9: 4,
                          10: 2,
                          11: 2}})

# split df by names
names = df['name'].unique().tolist()
dates = df['date'].unique().tolist()

dfs = {}

# dataframe collection grouped by names
for name in names:
    #print(name)
    dfs[name]=pd.pivot_table(df[df['name']==name],
                             values='Task',
                             index=['date'],
                             columns=['Reason'],
                             aggfunc=np.sum)

# plotly start 
fig = go.Figure()

# get column names from first dataframe in the dict
colNames = list(dfs[list(dfs.keys())[0]].columns)
#xValues=

# one trace for each column per dataframe: AI and RANDOM
for col in colNames:
    fig.add_trace(go.Bar(x=dates,
                             visible=True,
                             #name=col
                  )
             )

# menu setup    
updatemenu= []

# buttons for menu 1, names
buttons=[]

# create traces for each Reason: AI or RANDOM
for df in dfs.keys():
    buttons.append(dict(method='update',
                        label=df,
                        visible=True,
                        args=[#{'visible':True},
                              #{'x':[dfs[df]['AI'].index, dfs[df]['RANDOM'].index]},
                              {'y':[dfs[df]['AI'].values, dfs[df]['RANDOM'].values]}])
                  )

# buttons for menu 2, reasons
b2_labels = colNames

# matrix too feed all visible arguments for all traces
# so that they can be shown or hidden by choice
b2_show = [list(b) for b in [e==1 for e in np.eye(len(b2_labels))]]
buttons2=[]
buttons2.append({'method': 'update',
                 'label': 'All',
                 'args': [{'visible': [True]*4}]})

# create buttons to show or hide
for i in range(0, len(b2_labels)):
    buttons2.append(dict(method='update',
                        label=b2_labels[i],
                        args=[{'visible':b2_show[i]}]
                        )
                   )

# add option for button two to hide all
buttons2.append(dict(method='update',
                        label='None',
                        args=[{'visible':[False]*4}]
                        )
                   )

# some adjustments to the updatemenus
updatemenu=[]
your_menu=dict()
updatemenu.append(your_menu)
your_menu2=dict()
updatemenu.append(your_menu2)
updatemenu[1]
updatemenu[0]['buttons']=buttons
updatemenu[0]['direction']='down'
updatemenu[0]['showactive']=True
updatemenu[1]['buttons']=buttons2
updatemenu[1]['y']=0.6

fig.update_layout(showlegend=False, updatemenus=updatemenu)
fig.show()
Sign up to request clarification or add additional context in comments.

1 Comment

HI @vestland, this was helpful. However, for me the chart will look wrong at the beginning (eg. numbers are just 1, 2, 3, etc.) and the views aren't properly populated until I click the dropdown menus. Is there a way to have it automatically simulate clicking the menus? Like to have a starting view?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.