how to display inputbox dynamically using select widget in bokeh

Question

I am trying to implement chart in bokeh depending upon the user input, the requirement is cascade the dropdown so that it will make appearance of textbox depending upon the selected item in the dropdown

if I select fruits, dynamically it should ask the input for price and quantity
if I select human, dynamically it should ask me the input for the name and age

I am new to bokeh Please help thanks in advance

tommy.carstensen · Accepted Answer · 2020-09-22 19:15:09Z

1

Running on a bokeh server, you can interactively edit any objects property using only python code. For a select box you can attach a function to check for changes on your select menu and then specify in the python function, how to change your the input objects based on the selected value. Something similar to this.

from bokeh.models import Select, TextInput
from bokeh.layouts import column, row

select = Select(options=["fruits", "human"], value="fruits")

text_input_1 = TextInput()
text_input_2 = TextInput()

layout = column(select, row(text_input_1, text_input_2))

def select_change(attrname, old, new):
    choice = new
    if choice == "fruits":
        text_input_1.title = "Price"
        text_input_2.title = "Quantity"

    elif choice == "human":
        text_input_1.title = "Name"
        text_input_2.title = "Age"

select.on_change('value', select_change)

You can also do this in javascript by writing a callback function and given to the callback the objects you want to modify and modifying them in the javascript code being executed. The javascript option has the advantage of not needing to run a bokeh server.

select.callback = CustomJS(args=dict(s=select, t_1=text_input_1, t_2=text_input_2), code="""
    if (s.value == "fruits") {
        t_1.title = "Price";
        t_2.title = "Quantity";
    }
    else if (s.value == "human") {
        t_1.title = "Name";
        t_2.title = "Age";
    }
""")

edited Sep 22, 2020 at 19:15

tommy.carstensen

9,66215 gold badges70 silver badges113 bronze badges

answered Jun 15, 2017 at 15:41

DuCorey

8957 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Philipp Over a year ago

Would it also be possible to dynamically change the displayed widgets? Like a slider for price and a textinput for name?

DuCorey Over a year ago

@Philipp yes. If you are modifying properties of the widget dynamically, the type of widget should not matter (slider, textinput).

Philipp Over a year ago

I would like to change the type of the widget.

Collectives™ on Stack Overflow

how to display inputbox dynamically using select widget in bokeh

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related