Arjan Groen Arjan Groen - 5 months ago 172
Python Question

Interactive browser plot in Python 3.5 using bokeh/flexx pyscript

I'm currently learning Python and trying to make an interactive dashboard that runs on the browser. I'm using Bokeh for visualisation and flexx/pyscript for callback interactivity. The first goal is to make a button that filters a dataset. I tried using the slider example on and I modified it to simply change the data by clicking a button (actual filtering would be step 2).

x = [1,2,3] # dummy data
y = [4,5,6] # dummy data

# output to static HTML file
# output_file("sample.html", title="sample")
source = ColumnDataSource(data=dict(x=x, y=y))
# create a new plot with a title and axis labels
plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

def callback(source=source):
data = source.get('data')
f = cb_obj.get('value')
x, y = data['x'], data['y']
x = [0.9,0.8,0,7]
y = [1,2,3]

button = Button(callback=CustomJS.from_py_func(callback))

layout = vform(button, plot)


The page loads and I can click the buttons but a change in the plot is not triggered. Does you know how to modify this code so it triggers and actual change by using a bokeh button event handler? I have searched many websites but I cannot find a good example.

Thanks in advance!


You just need to actually update the data on the data source:

def callback(source=source):
    data = source.get('data')
    f = cb_obj.get('value')
    data['x'] = [0.9, 0.8, 0,7]
    data['y'] = [1,   2,   3  ]        

You code just creates new vars x and y and then immediately overwrites them. That doesn't actually update .data which is what needs to happen.