How to use CustomJS in BokehJS?

Community Support
1

Dear all,

As BokehJS is relatively new, I am struggling to find a working example showing CustomJS usage with BokehJS. I expect things to be different from using CustomJS in python as is should be possible to provide directly a javascript function as argument to CustomJS in BokehJS instead of a javascript code snippet when using CustomJS in python.

In the absence of any further information, my best guess was the following bit of code which is meant to print in the console the lower bound of the x axis whenever it is updated upon panning or zooming user action, and it does not work.

Can anyone correct this and show the correct usage of CustomJS in BokehJS?

For the sake of sharing this basic demo with a larger audience, I also created a stackoverflow entry. Feel free to respond to it as well.

Thanks in advance!
Cheers,
A.

// data to plot var source = new Bokeh.ColumnDataSource({ data: { x: [0,1,2,3,4,5,6,7,8,9], y: [0,1,4,-2,2,5,0,2,1,1] } }); 
// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";

var plot = Bokeh.Plotting.figure({
    title:"demo plot",
    tools: tools,
    toolbar_location:"above",
    sizing_mode:"stretch_both"
});

var scatterData = plot.line({ field: "x" }, { field: "y" }, {
    source: source,
    line_width: 2
});

plot.x_range.callback=Bokeh.CustomJS({args:{plot:plot},code:"console.log(plot.x_range.start);"});

// Show the plot, appending it to the end of the current
// section of the document we are in.
Bokeh.Plotting.show(plot,document.getElementById("myPlot"));
</script>

``

2

Hi,
for info I tried the following, thinking that CustomJS might not be required in BokehJS:
plot.x_range.callback=function(arg){console.log(plot.x_range.start);};

``

…but it did not work. I guess the solution is relatively obvious but I can’t figure it out…
Any help will be much appreciated!
Cheers,
A.

···

On Friday, October 27, 2017 at 3:25:07 PM UTC+2, Astrum42 wrote:

Dear all,

As BokehJS is relatively new, I am struggling to find a working example showing CustomJS usage with BokehJS. I expect things to be different from using CustomJS in python as is should be possible to provide directly a javascript function as argument to CustomJS in BokehJS instead of a javascript code snippet when using CustomJS in python.

In the absence of any further information, my best guess was the following bit of code which is meant to print in the console the lower bound of the x axis whenever it is updated upon panning or zooming user action, and it does not work.

Can anyone correct this and show the correct usage of CustomJS in BokehJS?

For the sake of sharing this basic demo with a larger audience, I also created a stackoverflow entry. Feel free to respond to it as well.
https://stackoverflow.com/questions/46975752/how-to-use-customjs-in-bokehjs

Thanks in advance!
Cheers,
A.

// data to plot var source = new Bokeh.ColumnDataSource({ data: { x: [0,1,2,3,4,5,6,7,8,9], y: [0,1,4,-2,2,5,0,2,1,1] } }); 
// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";

var plot = Bokeh.Plotting.figure({
    title:"demo plot",
    tools: tools,
    toolbar_location:"above",
    sizing_mode:"stretch_both"
});

var scatterData = plot.line({ field: "x" }, { field: "y" }, {
    source: source,
    line_width: 2
});

plot.x_range.callback=Bokeh.CustomJS({args:{plot:plot},code:"console.log(plot.x_range.start);"});

// Show the plot, appending it to the end of the current
// section of the document we are in.
Bokeh.Plotting.show(plot,document.getElementById("myPlot"));
</script>

``