# Using Plotly drop-down widgets

**URL:** <https://community.plotly.com/t/using-plotly-drop-down-widgets/13679>\
**Category:** 📊 Plotly Python\
**Created:** [September 18, 2018, 2:08am UTC](https://community.plotly.com/t/using-plotly-drop-down-widgets/13679 "2018-09-18T02:08:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![El\_pwon](https://avatars.discourse-cdn.com/v4/letter/e/e95f7d/32.png) [@El\_pwon](https://community.plotly.com/u/El_pwon)\
**Post date:** [September 18, 2018, 2:08am UTC](https://community.plotly.com/t/using-plotly-drop-down-widgets/13679/1 "2018-09-18T02:08:00Z")

</div>

Hey everyone,

I have been trying to apply a drop-down widget on a bar chart I made, but I am having trouble applying the filter. I have been using this documentation guide:

> **[Dropdown Widget with Plotly](https://plot.ly/python/dropdown-widget/)**
>
> Interacting with Plotly Charts using Dropdowns

Now, I have a dataset setup like this:

```
id happiness_score time_of_day   
01 3 08
02 4 16
03 1 22
04 2 03
05 5 16

```

I am trying to create a bar graph, with the score as the x-axis, and count of Id as the y-axis, and the time of day as the dropdown widget.

so far I’ve been able to create the widget, which took a bit of time, but here is how I got it:

```
#make a copy of the original df
df2 = df1

#converting the score to an object
df1['survey_time'] = 1['surveyed_at']= pd.to_datetime(dfnoadmin['surveyed_at'])
df1['survey_time'] = df1.survey_time.map(lambda x: x.strftime('%H'))
df1['score'] = df1['score'].apply(str)
df1.dtypes

#for the widget

dfq = df1
# we will define a function that will handle the input from the dropdown widget
def update_plot(dfz):
    noadmin = dfq['score'] == dfz['new']
    temp = dfq[noadmin]
    data = temp.groupby(dfq['score'])['time_of_day'].count()

    x = []
    y = []
    for i in range(len(data)):
        x.append(data.index[i])
        y.append(data[i])

    graph.restyle({
                'x': [x],
                'y': [y],
            })
    graph.relayout({'title': 'blah of {} blah'.format(dfz['new'])})

w = widgets.Dropdown(
    options= list(dfq['score'].unique()),
    value='0',
    description='score',
)

#now for graphing`
#turn the score back to an int for organizational purposes    

df2['score'] = df2['score'].apply(int)
fq = df2
fq = fq.groupby(['survey_time']).agg({'id': 'count'})

x= fq['id'].nlargest(400)
data1 = [Bar(
            y=x,
            x=x.keys(),
            text=x,
            textposition = 'outside',
            marker = dict(
            color = 'rgba(158,202,225)',
                line=dict(
                    color='rgb(8,48,107)',
                    width=1.5),
            ),
            name = "Total Users",
            opacity=0.6
    )]

layout1 = go.Layout(
    title="Time of Day",
    xaxis=dict(
        title='Surveys Completed by the hour',
        titlefont=dict(
            family='Courier New, monospace',
            size=18,
            color='#7f7f7f'
        )
    ),
    yaxis=dict(
        title='Time of Day',
        titlefont=dict(
            family='Courier New, monospace',
            size=18,
            color='#7f7f7f'
        )
    )
)

#Execute

display(w)

myFigure2 = go.Figure(data = data1 , layout = layout1)
iplot(myFigure2)

```

However, all it does is ignore the filter, and graphs all the ids across the day, regardless of the score. If I group dataframe fq by surveytime AND score, then count the ids, then nothing appears.

How can I apply the drop down filters to the graph I made?

---

<div class="post-metadata">

**Author:** ![jmmease](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jmmease/32/3706_2.png) [@jmmease](https://community.plotly.com/u/jmmease)\
**Post date:** [September 18, 2018, 10:37am UTC](https://community.plotly.com/t/using-plotly-drop-down-widgets/13679/2 "2018-09-18T10:37:54Z")

</div>

Hi @El_pwon,

We’re still working to clean out the old documentation, but the `GraphWidget` approach in that page is not the recommended approach at this point. The `FigureWidget` approach in plotly.py version 3 is much more capable and reliable.

I think the example in this page would be a good starting for you using `FigureWidget`: [https://plot.ly/python/figurewidget-app/](https://plot.ly/python/figurewidget-app/)

Hope that helps get you going,  
-Jon

---

<div class="post-metadata">

**Author:** ![El\_pwon](https://avatars.discourse-cdn.com/v4/letter/e/e95f7d/32.png) [@El\_pwon](https://community.plotly.com/u/El_pwon)\
**Post date:** [September 18, 2018, 4:23pm UTC](https://community.plotly.com/t/using-plotly-drop-down-widgets/13679/3 "2018-09-18T16:23:33Z")

</div>

Hello @jmmease

Thank you for responding and providing Fidget documentation. This looks far more impressive and now I can filter out other columns within my dataframe. Here is a more accurate representation of what I am working with:

```
id score survey_time cohort is_admin
01 3 08 2016-02 yes
02 4 16 2016-02 no
03 1 22 2016-03 yes
04 2 03 2016-04 yes
05 5 16 2016-04 no

```

and so on…

So I tried entering my version of it by:

```
month = widgets.IntSlider(
    value=1.0,
    min=1.0,
    max=12.0,
    step=1.0,
    description='cohort:',
    continuous_update=False
)

use_date = widgets.Checkbox(
    description='Cohort Group: ',
    value=True,
)

container = widgets.HBox(children=[use_date, month])

textbox = widgets.Dropdown(
    description='score: ',
    value='10',
    options=dfgoadmin['score'].unique().tolist())
    
score = widgets.Dropdown(
    options=list(dfgoadmin['is_admin'].unique()),
    value='0',
    description='Admin Status:',
)

# Assign an emptry figure widget with two traces
trace1 = go.Histogram(x=dfgoadmin['id'], opacity=0.75, name='number of users')
g = go.FigureWidget(data=[trace1],
                    layout=go.Layout({"barmode": "overlay"}))

def validate():
    if score.value in dfgoadmin['is_admin'].unique() and textbox.value in dfgoadmin['score'].unique():
        return True
    else:
        return False

def response(change):
    if validate():
        if use_date.value:
            filter_list = [i and j and k for i, j, k in
                           zip(dfgoadmin['cohort'] == month.value, dfgoadmin['score'] == textbox.value,
                               dfgoadmin['score'] == score.value)]
            temp_df = df[filter_list]

        else:
            filter_list = [i and j for i, j in
                           zip(dfgoadmin['score'] == '10', dfgoadmin['is_admin'] == score.value)]
            temp_df = dfgoadmin[filter_list]
        x1 = temp_df['id']
        x2 = temp_df['survey_time']
        with g.batch_update():
            g.data[0].x = x1
            g.layout.barmode = 'overlay'
            g.layout.xaxis.title = 'Time of Day'
            g.layout.yaxis.title = 'Number of Surveyed'

score.observe(response, names="value")
textbox.observe(response, names="value")
month.observe(response, names="value")
use_date.observe(response, names="value")

container2 = widgets.HBox([score, textbox])
widgets.VBox([container,
              container2,
              g])

```

However, instead of the survey\_ time being displayed on the x axis, It’s tracking a variable that isn’t within my data set. Furthermore, changing the filters doesn’t seem to do anything.

Do you or anyone else have any suggestions?

Thank you.

 ![newplot%20(3)](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/0/0ee6474213d6c5a473932486065ff70b4ff26ad1.png)

---

<div class="post-metadata">

**Author:** ![jmmease](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jmmease/32/3706_2.png) [@jmmease](https://community.plotly.com/u/jmmease)\
**Post date:** [September 20, 2018, 9:58am UTC](https://community.plotly.com/t/using-plotly-drop-down-widgets/13679/4 "2018-09-20T09:58:38Z")

</div>

Hi @El_pwon,

For what I can tell, it looks like you initialize the histogram’s `x` value to `dfgoadmin['id']`. Then in your callback you set it to `x1`, which is set to be `temp_df['id']` . You create an `x2` local variable in the callback that is equal to `temp_df['survey_time']`, but it doesn’t look like you use it anywhere. Did you mean to to set `g.data[0].x = x2`?

-Jon