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
# Importing Necessary Module's from bokeh.io import *from bokeh.layouts import *from bokeh.models import * |
Step 2: Save File With the output_file() function.
Python3
# Save File With the output_file() function. output_file("output.html") |
Step 3: Now create some widgets which we want to line up horizontally.
Python3
# create some widgets 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=""" console.log('slider: value=' + this.value, this.toString()) """)) 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
# make a grid containing Widgets Horizontally grid = gridplot([[dropdown, slider, options]], plot_width=250, plot_height=50) # Showing Widgets Horizontally 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
# Importing Necessary Module's from bokeh.io import *from bokeh.layouts import *from bokeh.models.widgets import * |
Step 2: Save File With the output_file() function.
Python3
# Save File With the output_file() function. output_file("output.html") |
Step 3: Now create some widgets which we want to line up horizontally.
Python3
# create some widgets 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
# make a row containing Widgets Horizontally rows=row(select, options, reset, check_order, feedback, Submit, width=1000) # Showing Widgets Horizontally show(rows) |
Output:
