Bokeh callbacks tutorial

Hi all,

I have been working with Bokeh for some time now and want to make it interactive. I came across this example:

https://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html

It make sense to me until I see the code:

    **from** **bokeh.models.callbacks** **import** CustomJS

    callback = CustomJS(args=dict(xr=plot.x_range), code="""

    // JavaScript code goes here

    var a = 10;

    // the model that triggered the callback is cb_obj:

    var b = cb_obj.value;

    // models passed as args are automagically available

    xr.start = a;

    xr.end = b;

    """)

My question relates to the JavaScript bit. Could someone point me towards a Bokeh tutorial where this is explained in more detail. If not, is the best course for me to take a whole new JavaScript course? It sounds to me a bit lot to take a JavaScript course just for this. I mean, is it these few lines that change in the “callbacks”? If so, should just practice them a lot?

Thanks,

Nav

I’m not sure what you’re asking. You can make Bokeh interactive even without JavaScript. At least, to some extent - it all depends on what you want to do.

I assume you came across that example while browsing this page: JavaScript callbacks — Bokeh 2.4.2 Documentation. There’s a lot of other examples on that page that can help you understand what’s going on.

Do you have a particular task that you think you could solve with JavaScript?

Hi p-himik,

Thanks for responding.

• “I’m not sure what you’re asking.” => I am asking where I can learn to make interactive dashboard where I can crossfilter and link between several graphs. Please see here: Gallery — Bokeh 2.4.2 Documentation

• “There’s a lot of other examples on that page that can help you understand what’s going on.” => on that page all code have JavaScript included.

• “Do you have a particular task that you think you could solve with JavaScript?” => I am not a JavaScript person.

thanks again for your time and efforts.

Nav

Hi Nav,

JavaScript is not a requirement to have interactive behaviors. It is a powerful additional option if you want to offload computations to run on a client’s browser rather than in a bokeh server or if you want to use bokeh in standalone mode invoking a server.

If you’re not accustomed to JavaScript and do not have a compelling need to use it for a specific task, perhaps begin with running a bokeh server for your app (which can be done locally) and building your application using Python only.

It might help get more feedback if you have a specific, concrete example of what you want to do as a starting point.

Just tossing in my $0.02 re: taking a JS class for just for Bokeh CustomJS usage. Most JS classes are probably going to center on using JS for front-end DOM manipulation or API calls, and focus on some UI framework or another. By contrast, many Bokeh cases use only simple basic-language constructs that will be common to almost any language. Distilling the example above down some:

const start = 10
const end = cb_obj.value
xr.start = start
xr.end = end

This uses only attribute access and assignments. Except for the const specifiers, this could be Python code. A translation is: “set the x-range start to 10 and the x-range end to the value of the widget”. So, I’d echo the above sentiments that looking at and experimenting with the examples in the Bokeh docs (and maybe looking over a very basic JS language intro) is probably the best way to start off.

Another I should mention is that for simple things like linking widget values to other object properties, there is also the recently added js_link method, which can often eliminate the need for any JS at all. E.g. to just link a slider to a range end you might do something like:

slider.js_link('value', plot.x_range, 'end')

All,

Thanks for your response. I think I will leave the Javascript course for now.