How Can I Call A Javascript Function From Python Using Bokeh?

I have this scenario: I have some data (in a pandas dataframe) that I use to draw my plots When I press a button (built by a bokeh widget) I can call my callback method and I do m

Solution 1:

As of Bokeh 0.12.6, being able to make these kinds of "Remote Procedure Calls" is still an open feature request.

In the mean time, your best bet is to add a CustomJS callback to some property of some model. The CustomJS can execute whatever JS code you want (including calling other JS functions) and will trigger any the property is updated.

Here's an example that shows calling CustomJS whenever a slider is changed. For your use case you might add an invisible circle glyph, and attach a CustomJS to the glyph's size attribute. Changing glyph.size is how you can "call" the function.

from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource, Slider
from bokeh.plotting import Figure, output_file, show

output_file("js_on_change.html")

x = [x*0.005for x inrange(0, 200)]
y = x

source = ColumnDataSource(data=dict(x=x, y=y))

plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

callback = CustomJS(args=dict(source=source), code="""
    var data = source.data;
    var f = cb_obj.value
    x = data['x']
    y = data['y']
    for (i = 0; i < x.length; i++) {
        y[i] = Math.pow(x[i], f)
    }
    source.change.emit();
""")

slider = Slider(start=0.1, end=4, value=1, step=.1, title="power")
slider.js_on_change('value', callback)

layout = column(slider, plot)

show(layout)

Solution 2:

Minimal example showing what Bryan answered me

from bokeh.plotting import figure
from bokeh.models.sources import ColumnDataSource
from bokeh.models.callbacks import CustomJS
from bokeh.io import curdoc
from bokeh.layouts import column
from bokeh.models.widgets import Button

plot = figure(
    width=600,
    height=600,
)

source = ColumnDataSource({
    'x': [1, 2, 3],
    'y': [4, 5, 6],
})
cr = plot.circle(
    x='x', y='y',
    source=source, size=10, color="navy", alpha=0.5
)

callback = CustomJS(args=dict(source=source), code="""
    console.log('This code will be overwritten')
""")
cr.glyph.js_on_change('size', callback)

defcb():
    js_code = """
        alert('Hello!');
    """
    callback.code = js_code  # update js code
    cr.glyph.size += 1# trigger the javascript code

bt = Button(
    label="Start Bokeh",
    button_type="success"
)
bt.on_click(cb)

curdoc().add_root(column([bt, plot]))