Bokeh: How to update data table after using box select on scatter plot?

Question

I am trying to update a data table automatically when I use box select on a Bokeh scatter plot. The table should display all the elements which are in the selected box.

This is for Bokeh version 1.0.4. Python 3.5 I've tried several methods to do this, but haven't got it to work.

from random import random
from bokeh.models import CustomJS, ColumnDataSource, Row
from bokeh.plotting import figure, curdoc
from bokeh.models.widgets import Button, TableColumn, DataTable


x = [random() for x in range(500)]
y = [random() for y in range(500)]

s1 = ColumnDataSource(data=dict(x=x, y=y))
s2 = ColumnDataSource(data=dict(x=[], y=[]))
p1 = figure(plot_width=400, plot_height=400, tools="pan, wheel_zoom, lasso_select, box_zoom, reset", title="Select Here")
p1.circle('x', 'y', source=s1, alpha=0.6)
columns = [TableColumn(field ="x",  title = "X axis"),
           TableColumn(field ="y",  title = "Y axis")]

p2 = DataTable(source =s2, columns = columns, width =155, height = 380)

s1.selected.js_on_change('indices', CustomJS(args=dict(s1=s1, s2=s2, p2=p2), code="""
        var inds = cb_obj.indices;
        var d1 = s1.data;
        var d2 = s2.data;
        d2['x'] = []
        d2['y'] = []
        for (var i = 0; i < inds.length; i++) {
            d2['x'].push(d1['x'][inds[i]])
            d2['y'].push(d1['y'][inds[i]])
        }
        s2.change.emit();
        p2.change.emit();
    """)
)

def get_values():
    print(s2.data)

button = Button(label = "Get selected set")
button.on_click(get_values)

curdoc().add_root(Row(p1, p2, button))

I wish to update the data table when I select a portion of my scatter plot.Image of Scatter Plot

Image of Data Table

score 0 · Accepted Answer · answered Apr 26 '19 at 07:58

If i understand you correctly I think I had the same problem (see this post).

The solution might be this one as provided by @Tony:

from random import random
from bokeh.models import CustomJS, ColumnDataSource, Row
from bokeh.plotting import figure, curdoc
from bokeh.models.widgets import Button

x = [random() for x in range(500)]
y = [random() for y in range(500)]

s1 = ColumnDataSource(data = dict(x = x, y = y))
p1 = figure(plot_width = 400, plot_height = 400, tools = "lasso_select", title = "Select Here")
p1.circle('x', 'y', source = s1, alpha = 0.6)

s2 = ColumnDataSource(data = dict(x = [], y = []))
p2 = figure(plot_width = 400, plot_height = 400, x_range = (0, 1), y_range = (0, 1), tools = "", title = "Watch Here")
p2.circle('x', 'y', source = s2, alpha = 0.6)

s1.selected.js_on_change('indices', CustomJS(args = dict(s1 = s1, s2 = s2), code = """
        var inds = cb_obj.indices;
        var d1 = s1.data;
        d2 = {'x': [], 'y': []}
        for (var i = 0; i < inds.length; i++) {
            d2['x'].push(d1['x'][inds[i]])
            d2['y'].push(d1['y'][inds[i]])
        }
        s2.data = d2  """))

def get_values():
    print(s2.data)

button = Button(label = "Get selected set")
button.on_click(get_values)

curdoc().add_root(Row(p1, p2, button))

Bokeh: How to update data table after using box select on scatter plot?

1 Answers1