I am using BokehJS, and I am trying to attach a callback to some figure. Below is a minimal example:
var plt = Bokeh.Plotting;
var x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
var y = x.map(function (v) { return v * 0.5 + 3.0; });
var source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });
// make the plot and add some tools
var tools = "pan,wheel_zoom,box_zoom,reset,save";
var p = plt.figure({ title: "Bla Bla", tools: tools });
// add a line with data from the source
const line = p.line(
{ field: "x" },
{ field: "y" },
{ source: source, line_width: 2}
);
p.js_event_callbacks['tap'] = new Bokeh.CustomJS({args: [], code: "console.log('Tap event occurred at x-position: ' + cb_obj.x)"});
// show the plot
plt.show(p);
I am expecting to get some output in the console (when pressing with the LMB on the figure), but nothing happens. What am I missing here?
js_event_callbacks is not an object that maps event → callback. It’s an object that maps event → callbacks_array. Just wrap your newly created CustomJS in an array.
By the way, your code is for an old version of BokehJS. Here’s its modern variant that works with BokehJS 2.0.2:
const plt = Bokeh.Plotting;
const array_util = Bokeh.require('core/util/array');
const x = array_util.linspace(-0.5, 20.5, 10);
const y = x.map(function (v) { return v * 0.5 + 3.0; });
const ColumnDataSource = Bokeh.Models('ColumnDataSource');
const source = new ColumnDataSource({ data: { x: x, y: y } });
// make the plot and add some tools
const tools = "pan,wheel_zoom,box_zoom,reset,save";
const p = plt.figure({ title: "Bla Bla", tools: tools });
// add a line with data from the source
const line = p.line(
{ field: "x" },
{ field: "y" },
{ source: source, line_width: 2}
);
const CustomJS = Bokeh.Models('CustomJS');
p.js_event_callbacks['tap'] = [new CustomJS({args: [], code: "console.log('Tap event occurred at x-position: ' + cb_obj.x)"})];
// show the plot
plt.show(p);
Note that it requires bokeh-api.js, which is a separate JS file. It’s available along with the main bokeh.js just as well.
Thank you, it worked!
I am using version 1.4 (this is what I have installed at work).
Btw, is this the correct way to add ‘tap’ (or any BokehEvent) callbacks? It looks like an imitation of the python syntax (i.e. attaching JS code in a string) instead of a direct callback.
Also, is there a plan to make BokehJS a standalone library? If so, I believe that more documentation will help its adaptation.
js_event_callbacks has type p.Property<{[key: string]: CallbackLike0<BokehEvent>[]}>.
We can disregard p.Property for now - what’s important is the part within <...>. [key: string] is exactly what it looks like - it’s just a string that denotes an event name in this case. CallbackLike0<BokehEvent> is an array of CallbackLike<BokehEven, [], void>. Which, in turn, is just an object with just a single execute method that accepts the event and returns nothing.
The only thing that CustomJS does is wrap that JS code string in a function along with the args dict.
So, I would say that BokehJS is technically already a standalone library (published to NPM) that folks can and do use without any of the Python parts. But it’s absolutely correct that it is currently lacking in documentation, examples, howtos, and that having these things would help spur adoption of BokehJS as a thing in its own right. Further, I am very interested in increasing usage of BokehJS directly by JS devs, because I hope that might attract new JS devs to become contributors. But this is also just an area where we could really use some help, both due to limited time/resources as well as lack of knowledge about what JS devs would expect a really good experience to be. If this is something you’d like to participate in moving forward, the Development category here is a great place to open topics to discuss what manageable concrete steps are.
Thank you very much for this beautiful piece of software
Right now, I’m struggling at adapting the above solution to a callback on a x_range.start property change. Could someone more intelligent please help me out with that? Thank you!
So far I tried the following in the above example to log the x_range.start property to the browser’s console:
