How to line up different widgets horizontally in Bokeh?
Bokeh is a data visualization library that can be used to create beautiful graphics, from simple plots to complex dashboards with streaming datasets. Bokeh provides interactive plots in modern web browsers like Google Chrome etc, using HTML and JavaScript to present clean and highly interactive charts and plots. Bokeh allows us to create JavaScript-based visualizations without writing any JavaScript code by ourselves.
Widgets are interactive controls that can be used with our Bokeh application to provide a front-end user interface for visualizations. Widgets can also be used with or without the bokeh server. Widgets allow users to update charts and plots, perform new calculations and connect to other programming functions. There are different widgets in Bokeh such as:
- Button
- CheckboxButtonGroup
- Dropdown
- TextInput and Many more.
In this article, we horizontally aligned various widgets in bokeh.
How to line up different widgets horizontally in Bokeh?
Below are some approaches which we followed to line up different widgets horizontally in Bokeh.
- Import module
- Save File With the output_file() function.
- Creating widgets for lining up horizontally
- Showing widgets horizontally
Line up different widgets horizontally With the help of gridplot() function.
Step 1: Import the necessary module to line up different widgets horizontally in Bokeh.
Python3
from bokeh.io import *
from bokeh.layouts import *
from bokeh.models import *
|
Step 2: Save File With the output_file() function.
Python3
output_file( "output.html" )
|
Step 3: Now create some widgets which we want to line up horizontally.
Python3
companys = [ "TCS" , "Infosys" , "Wipro" ,
"Microsoft" , "IBM" , "intel" , "HP" , "HCL" ]
dropdown = Dropdown(label = "Choose Company" ,
button_type = "warning" ,
menu = companys)
dropdown.js_on_event( "menu_item_click" ,
CustomJS(code = "console.log( 'dropdown: ' \
+ this.item, this.toString())"))
slider = Slider(start = 100 , end = 1000 , value = 1 ,
step = . 1 , title = "Qunatity of Share" )
slider.js_on_change( "value" , CustomJS(code =
))
options = RadioButtonGroup(labels = [ "Buy" , "Sell" ],
button_type = "success" ,
active = 0 )
|
Step 4: Use the gridplot() function, which helps in placing or displaying widgets horizontally.
Python3
grid = gridplot([[dropdown, slider, options]],
plot_width = 250 ,
plot_height = 50 )
show(grid)
|
Output:
Line up different widgets horizontally With the help of the row() function.
Step 1: Import the necessary module to line up different widgets horizontally in Bokeh.
Python3
from bokeh.io import *
from bokeh.layouts import *
from bokeh.models.widgets import *
|
Step 2: Save File With the output_file() function.
Python3
output_file( "output.html" )
|
Step 3: Now create some widgets which we want to line up horizontally.
Python3
select = Select(title = "Fruits:" ,
value = "None" ,
options = [ "None" , "Apple" ,\
"Orange" , "Mango" , "cherry" ])
options = RadioButtonGroup(labels = [ "Buy" , "Sell" ],
button_type = "primary" ,
active = 0 )
reset = Button(label = "Reset" , button_type = "warning" )
check_order = Button(label = "Check Order" ,
button_type = "success" )
feedback = TextInput(value = "Enter your Feedback" ,
title = "feedback:" )
Submit = Button(label = "Submit Feedback" ,
button_type = "success" )
|
Step 4: Use the row() function which helps in placing or displaying widgets horizontally.
Python3
rows = row(select, options,
reset, check_order,
feedback, Submit,
width = 1000 )
show(rows)
|
Output:
Last Updated :
09 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...