1

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!

bigreddot
  • 33,642
  • 5
  • 69
  • 122
Arjan Groen
  • 604
  • 8
  • 16

1 Answers1

1

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.

bigreddot
  • 33,642
  • 5
  • 69
  • 122
  • Thank you, just one more question. When i press the button, the values changes accordingly, but then the plot immediately resets. I only want this to happen when I press the button a second time. Any thoughts? – Arjan Groen May 08 '16 at 20:01
  • I'm not quite sure what you mean, you mean you don't want the data update to happen immediately? I think you could have the callback toggle some bool back and forth, and only call trigger on `true`. For instance `window.my_callback_flag` but there's probably a better idea than a global on `window` – bigreddot May 08 '16 at 21:40
  • When I click, my plot briefly shows the new data specified in the callback, but then the page reloads and immediately shows the original plot again. – Arjan Groen May 09 '16 at 12:46
  • It seems to be related to this issue. http://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked. However, this page only provides a html solution – Arjan Groen May 09 '16 at 12:53
  • This button issue is fixed in current master, and will be included in the upcoming `0.12` release. – bigreddot May 09 '16 at 13:40
  • If you need a fix before then you could try installing a [Developer Preview Build](http://bokeh.pydata.org/en/0.11.1/docs/installation.html#developer-builds) but these are not guaranteed to be tested to the level of a stable release. – bigreddot May 09 '16 at 13:43