Change the coordinates of a simple line glyph in Javascript

[DonCammne]

Hi there,
I’m trying to change manually the coordinates of a simple line glyph with CustomJS, thus Javascript code. I already achieved this goal by creating the line with a ColumnDataSource as an argument and later in the callback I just change the source and emit the change.

The problem is that I need sometimes I prefer to declare the lines without the source and in this way, I am unable to change the coordinates with Javascript.

There is only one case that I managed to solve: when I’m using the scatter glyph with only one point.

Here I present the case that is working with only one scatter point:

from bokeh.models import CustomJS, Slider
from bokeh.layouts import column
from bokeh.plotting import figure, show

fig = figure()
one_point = fig.scatter(x=1,y=1, marker='triangle', size=10)

slider = Slider(
    title="Change y position of point",
    start=0,
    end=2,
    step=0.02,
    value=1
)

code = """
const f = cb_obj.value
one_point.glyph.y = f
"""
callback = CustomJS(args=dict(one_point=one_point), code=code)

slider.js_on_change('value', callback)

show(column(fig, slider))

And here I present the case that is not working and that I would like to run:

from bokeh.models import CustomJS, Slider
from bokeh.layouts import column
from bokeh.plotting import figure, show

fig = figure()
multi_point = fig.line(x=[1, 2, 3], y=[1, 2, 3])

slider = Slider(
    title="Change y position of points",
    start=0,
    end=2,
    step=0.02,
    value=1
)

code = """
const f = cb_obj.value
debugger
multi_point.glyph.y = [f, f, f]
"""
callback = CustomJS(args=dict(multi_point=multi_point), code=code)

slider.js_on_change('value', callback)

show(column(fig, slider))

I tried different way to make it works (curve.glyph.y, curve.y, curve.data, curve.glyph.data, …) but I don’t know where I can see in the documentation or in the web debugging tool the name of the property that I want to change (the coordinates in my case).

Thank you very much!

[Bryan]

Bokeh glyphs are always driven by a ColumnDataSource. Even if you don’t specify one explicity, Bokeh creates on automatically for you. To update the glyph, you must update its data source. There are several examples up updating data sources here:

JavaScript callbacks

[DonCammne]

Thank you!
I found an example that gave me the information needed.

For anyone interested in the solution code, you can find it below:

from bokeh.models import CustomJS, Slider
from bokeh.layouts import column
from bokeh.plotting import figure, show

fig = figure()
multi_point = fig.line(x=[1, 2, 3], y=[1, 2, 3])

slider = Slider(
    title="Change y position of points",
    start=0,
    end=2,
    step=0.02,
    value=1
)

code = """
const f = cb_obj.value
db.data.y = [1, f*2, f*3]
db.change.emit()
"""
callback = CustomJS(args=dict(db=multi_point.data_source), code=code)

slider.js_on_change('value', callback)

show(column(fig, slider))

Thank you again for the beautiful module and community!