Hi!
I’m trying to link a plot and a data table such as when using box zoom the content of the table is updated as well, in similar fashion to linking two plots through they ranges. I tried to adapt an stackoverflow answer where a box selector should update the table without success. Truth is this project is my first contact with javascript and I also don’t understand bokeh completely yet. Below is a minimal code with my flimsy attempt to write a CustomJS
Many thanks for this wonderful list, I’m learning a lot reading it.
from bokeh.io import show
from bokeh.layouts import row, widgetbox
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.plotting import figure, curdoc
from bokeh.models.widgets import DataTable, TableColumn
import pandas as pd
df = pd.DataFrame({‘x’: [1, 2, 3, 4, 5, 6, 7], ‘A’ : [1, 5, 3, 5, 2, 8, 3], ‘B’ : [2, 4, 3, 1, 5, 6, 2]})
tools_to_show = ‘box_zoom,reset’
p = figure(plot_height =300, plot_width = 600,
toolbar_location='above', tools=tools_to_show)
columns = [‘A’, ‘B’]
source = ColumnDataSource(df)
for col in columns:
p.line('x', col, source=source)
columns = [
TableColumn(field="A", title="A"),
TableColumn(field="B", title="B"),
]
data_table = DataTable(source=source, columns=columns, width=300, height=300)
source.callback = CustomJS(args=dict(s2=source, table=data_table), code="""
var inds = cb_obj.selected['1d'].indices;
var d1 = cb_obj.data;
var d2 = s2.data;
d2['A'] = []
d2['B'] = []
for (i = 0; i < inds.length; i++) {
d2['A'].push(d1['A'][inds[i]])
d2['B'].push(d1['B'][inds[i]])
}
s2.trigger('change');
table.trigger('change');
“”")
curdoc().add_root(row(p, widgetbox(data_table)))
``