interdependent widgets in bokeh

Question

In bokeh, I would like to adjust the possible options in one Select widget depending on the chosen value in another Select widget. My minimally not-working example looks like this:

from bokeh.io import output_notebook, show
from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.models.widgets import Select

output_notebook()

# data source
foods = {'fruit': ['apple', 'orange', 'cherry'],
        'veg': ['carrot', 'celery']}

source = ColumnDataSource(data=foods)

def change_options_in_choice2(source=source):
    '''this is probably the place for magic'''
    f = cb_obj.get('value')
    print(f)

# first choice
choice1 = Select(title="food group:", value='fruit',
                 options=list(foods.keys()),
                 callback=CustomJS.from_py_func(change_options_in_choice2))

# options for second choice depend on choice in first choice
choice2 = Select(title='food items:', value='apple',
                options=foods['fruit'])


# merge them
show(column(choice1, choice2))

As it is, I can only choose amongst apples, oranges, or cherries for my food items even if I switch the food group to veg. Somehow, I am hoping that I can update the possible choices in choice2 using a callback in choice1. How would I do this?

Set .options to a new list of options. Here is an App example that does it in python: github.com/bokeh/bokeh/blob/master/examples/app/stocks/… but the principal is the same for a CustomJS callback. — bigreddot
– bigreddot, Commented Jul 6, 2016 at 12:51
Thanks - that worked for me. I don't know how to do this in CustomJS but the bokeh server solution is fine for my purposes. — DrSAR
– DrSAR, Commented Jul 6, 2016 at 23:02

DrSAR · Accepted Answer · 2016-07-06 23:02:13Z

Inspired by Bryan's (bigreddot's) comment I successfully tried this. It can be served with bokeh serve main.py

'''
with inspiration from 
https://github.com/bokeh/bokeh/blob/master/examples/app/stocks/main.py
'''
from bokeh.io import curdoc
from bokeh.layouts import column
from bokeh.models.widgets import Select
# data source
foods = {'fruit': ['apple', 'orange', 'cherry'],
        'veg': ['carrot', 'celery']}
def change_options_in_choice2(attrname, old, new):
    '''this is probably the place for magic'''
    choice2.options = foods[new]
# first choice
choice1 = Select(title="food group:", value='fruit',
                 options=list(foods.keys()))
choice1.on_change('value', change_options_in_choice2)
# options for second choice depend on choice in first choice
choice2 = Select(title='food items:', value='apple',
                options=foods['fruit'])
widgets = column(choice1, choice2)
# initialize
curdoc().add_root(widgets)
curdoc().title = "Eat healthy!"

Collectives™ on Stack Overflow

interdependent widgets in bokeh

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related