CODEWITHSUNDEEP
javascriptpythoninteractivebokeh
Arjan Groen
Arjan Groen

Reputation: 624

Interactive browser plot in Python 3.5 using bokeh/flexx pyscript

NOTE FROM MAINTAINERS: pyscript support is deprecated and will be removed in Bokeh 2.0

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

http://docs.bokeh.org/en/0.11.1/docs/user_guide/interaction.html

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]
    source.trigger('change')

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

layout = vform(button, plot)

show(layout)

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!

Upvotes: 1

Views: 856

Answers (1)

bigreddot
bigreddot

Reputation: 34568

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  ]        
    source.trigger('change')

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.

Upvotes: 1

Related Questions