How can I return the index of the scatter using js callback?

[You_Zou]

Hi, I am trying to create a JS callback to return the index of the scatter I created. But seems like the output is always “undefined”. Could anyone help me what is wrong with my code? Thanks in advance!

here is a short example:

from bokeh.models import ColumnDataSource, CustomJS
from bokeh.plotting import figure, output_file, show
from bokeh.plotting import figure


# create some data
source = ColumnDataSource(data=dict(x=[1, 2, 3, 4, 5],
                                    y=[6, 7, 8, 9, 10],color=["navy", "orange", "olive", "firebrick", "gold"]))

# create a plot with circles
plot = figure()
plot.circle('x', 'y', size=10, source=source, color = 'color')

# create the JavaScript callback
callback = CustomJS(args=dict(source=source), code="""  
    
    // get the index of the selected point
    var index = source.selected.indices[0];
    
    // alert the index
    alert(index);
""")

# add the callback to the plot
plot.js_on_event('tap', callback)

# show the plot
show(plot)

[Bryan]

The tap event only reports the coordinates of the tap event (in cb_obj). If you want a callback on the selection, you should use js_on_change on the selection itself:

https://docs.bokeh.org/en/latest/docs/user_guide/interaction/js_callbacks.html#customjs-for-selections

Edit: Also, you have to actually add a TapTool to the plot in order for taps to generate selections. The tap event is literally just the event—coordinates where a tap happened—and nothing else.