Created
January 28, 2021 09:15
-
-
Save bede/7bfdac7f395d1ea4d1a1dcd1e80926ea to your computer and use it in GitHub Desktop.
Solution to https://stackoverflow.com/questions/58474384/filter-dataframe-using-bokeh-dropdown-widget-customjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import pandas as pd | |
from bokeh.models.widgets import Select | |
from bokeh.layouts import widgetbox | |
from bokeh.models import ColumnDataSource, DataTable, TableColumn, CustomJS | |
from bokeh.io import show, output_file, output_notebook, reset_output | |
from bokeh.layouts import row, column, layout | |
raw_data = {'ORG': ['APPLE', 'ORANGE', 'MELON'], | |
'APPROVED': [5, 10, 15], | |
'CREATED': [1, 3, 5], | |
'INPROCESS': [4,2,16]} | |
df = pd.DataFrame(raw_data) | |
# create CDS for source | |
src1 = ColumnDataSource(df) | |
# create cols | |
table_columns = [TableColumn(field = Ci, title = Ci) for Ci in df.columns] | |
# original data table | |
data_table1 = DataTable(source=src1, | |
columns=table_columns, width=400, height=280) | |
# create empty dataframe to hold variables based on selected ORG value | |
df2 = pd.DataFrame({'status':['APPROVED', 'CREATED', 'INPROCESS'], | |
'count':[float('nan'), float('nan'), float('nan')]}) | |
# create CDS for empty dataframe | |
src2 = ColumnDataSource(df2) | |
# create cols | |
table_columns2 = [TableColumn(field = Ci, title = Ci) for Ci in df2.columns] | |
data_table2 = DataTable(source=src2, columns=table_columns2, width=400, height=280) # Added | |
callback = CustomJS(args=dict(src1=src1, src2=src2), code=''' | |
var count = ['APPROVED', 'CREATED', 'INPROCESS']; | |
if (cb_obj.value != 'Please choose...') { | |
var org = src1.data['ORG']; | |
var ind = org.indexOf(cb_obj.value); | |
for (var i = 0; i < count.length; i++) { | |
src2.data['count'][i] = src1.data[count[i]][ind]; | |
} | |
} | |
else { | |
for (var i = 0; i < status.length; i++) { | |
src2.data['status'][i] = undefined; | |
} | |
} | |
src2.change.emit(); | |
''') | |
options = ['Please choose...'] + list(src1.data['ORG']) | |
select = Select(title='Test', value=options[0], options=options) | |
select.js_on_change('value', callback) | |
show(column(select, data_table2)) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment