How to capture value of dropdown widget in bokeh python?

Question

The official documentation of bokeh 0.12.1 in the link give the below code for creating a dropdown.

http://docs.bokeh.org/en/latest/docs/user_guide/interaction/widgets.html#userguide-interaction-widgets

But it doesn't clearly mention how to capture the value of the dropdown widget when someone click and selects a value from the dropdown.

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Dropdown

output_file("dropdown.html")

menu = [("Item 1", "item_1"), ("Item 2", "item_2"), None, ("Item 3", "item_3")]
dropdown = Dropdown(label="Dropdown button", button_type="warning", menu=menu)

show(widgetbox(dropdown))

Question

Is see that there are 2 methods called on_click() & on_change() but from the documentation couldn't figure out how to capture the value. How can we assign the selected value to a new variable?

EDIT

Based on input from @Ascurion i have updated my code as shown below. But when i select a value in dropdown nothing is printed in ipython console in Spyder. Please advise.

    from bokeh.io import output_file, show
    from bokeh.layouts import widgetbox
    from bokeh.models.widgets import Dropdown

    output_file("dropdown.html")


    menu = [("Item 1", "item_1"), ("Item 2", "item_2"), None, ("Item 3", "item_3")]
    dropdown = Dropdown(label="Dropdown button", button_type="warning", menu=menu)

    def function_to_call(attr, old, new):
        print dropdown.value

    dropdown.on_change('value', function_to_call)
    dropdown.on_click(function_to_call)
    show(widgetbox(dropdown))

Solution 1

EDIT This answer does not apply for Bokeh Versions 2.X.X anymore. See comment and the other answer below.

If you set on_change e.g. as follows:

dropdown.on_change('value', function_to_call)

one can access the value of the selected item in function_to_call as follows:

def function_to_call(attr, old, new):
    print dropdown.value

For this to work dropdown has to be defined before function_to_call.

The documentation on how to access values set in widgets with on_click and on_change (bokeh version 12.1) can be found here at the top of the page:

http://docs.bokeh.org/en/latest/docs/user_guide/interaction/widgets.html

EDIT

To get interactive feedback you have to run bokeh in server mode, so that the python code can be evaluated when you interact with a widget. I changed your example slightly to allow to be run with the

bokeh serve --show file_name.py

command. The code below then prints out the selected item in the terminal.

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Dropdown
from bokeh.plotting import curdoc

menu = [("Quaterly", "time_windows"), ("Half Yearly", "time_windows"), None, ("Yearly", "time_windows")]
dropdown = Dropdown(label="Time Period", button_type="warning", menu=menu)

def function_to_call(attr, old, new):
    print dropdown.value

dropdown.on_change('value', function_to_call)

curdoc().add_root(dropdown)

See here for more information:

http://docs.bokeh.org/en/latest/docs/user_guide/server.html

Solution 2

In Bokeh 2.0.0, Dropdown.value was removed. The correct way to get what item has been clicked is:

from bokeh.models import Dropdown

d = Dropdown(label='Click me', menu=['a', 'b', 'c'])


def handler(event):
    print(event.item)


d.on_click(handler)

Comments

[GeorgeOfTheRF]

Thanks. I am getting the below error. dropdown.on_change('value', function_to_call(attr, old, new)) NameError: name 'attr' is not defined

[GeorgeOfTheRF]

What values for attr, old, new should be passed when function_to_call() is called? Please explain the meaning of these attributes.

[GeorgeOfTheRF]

I should just add the codes you mentioned after the codes i mentioned in the question right?

[Ascurion]

Hi sorry my bad you have to give function to call with out arguments and paranthesis to on_change... but the function to call needs the three variables (attr, old, new). I corrected my answer accordingly

[bigreddot]

To add more context: attr is the name of the attribute that changed, old is the old value (before it was changed) and new is the new value. But as you show, if the widget is available as a global it's often just as easy to read the current value off the widget itself.

[GeorgeOfTheRF]

I updated code but the value selected in dropdown is not printed by function_to_call(). Please check the EDIT i made to the original post.

[GeorgeOfTheRF]

Thanks! I am able to make it work with minor changes!

[GeorgeOfTheRF]

Can you please explain this line "curdoc().add_root(dropdown)" ?

[Ascurion]

What are the minor changes. For me it works as is when run with the command given in the first line.

[Ascurion]

curdoc() is a function that returns the current Document of the page. A Document is in principle the python representation of the html/css/javascript page created by Bokeh that is than shown in the browser. The add_root(dropdown) adds the dropdown widget to this page. There are possibilities to style the page with layout elements such as rows and columns etc. When run with the bokeh serve command the server takes care to serve that document. I have to say that I do not understand the detailed implementation please check also here bokeh.pydata.org/en/latest/docs/user_guide/server.html

[GeorgeOfTheRF]

Thanks a lot. Can you please help with this one also? stackoverflow.com/questions/39119140/…

[Will]

This is out of date as of Bokeh 2.X. Use dropdown.on_click(cb) with cb(event), access element with event.item

[Ascurion]

thanks for the note, I have edited the answer to point to your comment.

[kateryna]

How can we get the value of a dropdown if the dropdown is not being clicked on in Bokeh 2.x.x? In my application, I have multiple dropdowns and I need the "state" of those dropdowns to filter data.

[Eugene Pakhomov]

Dropdowns are just glorified lists of buttons. They don't have "state". Maybe you're talking about the Select widget?

[kateryna]

No, I do refer to the class Dropdown(**kwargs). In Bokeh 1.4.0 it had the attribute value, which was perpetuating the state of the Dropdown button.

[Eugene Pakhomov]

Yes, and it was an API oversight because semantically a button cannot have a value. You can handle its click event, that's how it's supposed to work. If you need a selection functionality, you will have to use Select or create some custom widget.

[kateryna]

Is a dropdown really a button? To me a dropdown naturally has a state/value. But I am sure you had your motives behind the decision.