# Dropdown widgets for .offline.plot in Python

**URL:** <https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141>\
**Category:** 📊 Plotly Python\
**Created:** [September 19, 2016, 2:13pm UTC](https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141 "2016-09-19T14:13:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Clusks](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/clusks/32/572_2.png) [@Clusks](https://community.plotly.com/u/Clusks)\
**Post date:** [September 19, 2016, 2:13pm UTC](https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141/1 "2016-09-19T14:13:34Z")

</div>

I’m trying to create an interactive dashboard similar to what is shown in the 2nd example [here](https://plot.ly/python/dropdown-widget/), but I want to output it to html in offline mode rather than using the plotly servers or a notebook, I’m having trouble messing about with the code. From the 2nd example, to get a drop down widget that will filter a chart it says:

import pandas as pd  
import plotly.plotly as py

from ipywidgets import widgets  
from IPython.display import display  
from plotly.graph\_objs import \*  
from plotly.widgets import GraphWidget

```
# we will define a function that will handle the input from the dropdown widget
def update_plot(complaint):
    is_noise = complaints['Complaint Type'] == complaint['new']
    temp = complaints[is_noise]
    data = temp.groupby(complaints['Borough'])['Complaint Type'].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': 'Number of {} Complaints in New York by Borough'.format(complaint['new'])})

# we will define both the dropdown widget, as well as the graph widget
w = widgets.Dropdown(
    options= list(complaints['Complaint Type'].unique()),
    value='Noise - Street/Sidewalk',
    description='Complaint Type:',
)
graph = GraphWidget('https://plot.ly/~kevintest/1176/')

# observe will set a listener for activity on our dropdown menu
w.observe(update_plot, names="selected_label") 

display(w)
display(graph)  

```

Because I’m using offline plotting rather than a notebook, I usually plot the data at the end of my code with (for example):

```
data = [trace0, trace1,trace2,trace3,trace4,trace5]

fig = go.Figure(data = data, layout = layout)

py.offline.plot(fig, show_link=False, filename="Bubble.html")

```

Is it possible to alter it slightly so I can export the drop down widget with my graph in offline mode? I know inbuilt drop downs have recently been implemented, but I’m not sure if they have the level of filtering I require for my graphs (as in I want to get the drop down embedded within my output.)

---

<div class="post-metadata">

**Author:** ![Adam](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adam/32/23418_2.png) [@Adam](https://community.plotly.com/u/Adam)\
**Post date:** [September 19, 2016, 4:38pm UTC](https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141/2 "2016-09-19T16:38:59Z")

</div>

Hi there,

I ran your code and got an error. It didn’t recognize ‘complaints’. Do you mind letting me know what module it comes from, so I can import it properly and then help with your question?

Thanks

---

<div class="post-metadata">

**Author:** ![Clusks](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/clusks/32/572_2.png) [@Clusks](https://community.plotly.com/u/Clusks)\
**Post date:** [September 19, 2016, 4:52pm UTC](https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141/3 "2016-09-19T16:52:38Z")

</div>

I presume that complaints is what they’ve named the pandas dataframe. The example the docs gives says it uses pandas, but doesn’t show you the actual data file they’re using!

---

<div class="post-metadata">

**Author:** ![Adam](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adam/32/23418_2.png) [@Adam](https://community.plotly.com/u/Adam)\
**Post date:** [September 20, 2016, 4:13pm UTC](https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141/4 "2016-09-20T16:13:50Z")

</div>

There was an error in the docs, as what you mentioned is true: there was no data for that example. I am in the process of fixing it so I can proceed with helping you.

---

<div class="post-metadata">

**Author:** ![Clusks](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/clusks/32/572_2.png) [@Clusks](https://community.plotly.com/u/Clusks)\
**Post date:** [September 28, 2016, 1:51pm UTC](https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141/5 "2016-09-28T13:51:20Z")

</div>

Thanks very much, Adam, very much appreciated! 🙂

---

<div class="post-metadata">

**Author:** ![bears34egc](https://avatars.discourse-cdn.com/v4/letter/b/e47774/32.png) [@bears34egc](https://community.plotly.com/u/bears34egc)\
**Post date:** [October 10, 2016, 8:16pm UTC](https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141/6 "2016-10-10T20:16:13Z")

</div>

Any update on this? Does this portion here include the Custom Javascript which conducts the callback? Can’t something be written directly into the code, in order to use the Widget OFFLINE mode?

> graph = GraphWidget(‘[bar chart made by Kevintest | plotly](https://plot.ly/~kevintest/1176/)’)

---

<div class="post-metadata">

**Author:** ![animismus](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/animismus/32/682_2.png) [@animismus](https://community.plotly.com/u/animismus)\
**Post date:** [October 26, 2016, 10:48am UTC](https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141/7 "2016-10-26T10:48:53Z")

</div>

I am also quite interested on this as I’m using plotly in offline mode and would like to implement interaction through widgets.

---

<div class="post-metadata">

**Author:** ![liyang](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@liyang](https://community.plotly.com/u/liyang)\
**Post date:** [July 11, 2017, 6:08pm UTC](https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141/8 "2017-07-11T18:08:24Z")

</div>

Any update on this? I am also very interested in this.

---

<div class="post-metadata">

**Author:** ![jack](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jack/32/11_2.png) [@jack](https://community.plotly.com/u/jack)\
**Post date:** [July 17, 2017, 8:05pm UTC](https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141/9 "2017-07-17T20:05:46Z")

</div>

@liyang I recommend using Dash for dropdowns with Plotly graphs in Python:  
[https://plot.ly/dash/dash-core-components](https://plot.ly/dash/dash-core-components)

Dash provides more flexibility in the styling and actions of the dropdown.

If you don’t want to use Dash, docs for more limited dropdowns with the Plotly Python library are here:

> **[Dropdown Menus](https://plot.ly/python/dropdowns/)**
>
> How to add dropdowns to update Plotly chart attributes in Python.

These dropdowns can restyle the graph and change its data, but they can’t call more sophisticated callbacks in Python like in Dash.

---

<div class="post-metadata">

**Author:** ![KMFR](https://avatars.discourse-cdn.com/v4/letter/k/df788c/32.png) [@KMFR](https://community.plotly.com/u/KMFR)\
**Post date:** [April 23, 2019, 3:04pm UTC](https://community.plotly.com/t/dropdown-widgets-for-offline-plot-in-python/2141/10 "2019-04-23T15:04:17Z")

</div>

I’ve read those docs but can’t figure out how to use a dropdown menu to select (or change) the dataframe to use as source data for plotting.

I want to export a simple html file but don’t want to use Dash as it would require a server, dealing with waitresses etc.