update text label from callback

Community Support
1

Another noob question…

I’d like to change a text annotation (Bokeh.models.Label) from within a callback. I’ve tried all sorts of options but none of them work. My latest guess was to define the label’s string as a variable, put that variable into a ColumnDataSource, and then retrieve and modify it from the callback. No luck. Any suggestions?

data = {‘s’ : [‘hello world’]}

citation = Label(x=0, y=0,text=data[‘s’][0] )

[within callback]

var data = source.data

data[‘s’][0] = “hi”

source.change.emit()

Any lines of code I place before or after those lines work fine, so I know its getting to my code, but somehow this won’t update the text label.

any thoughts? Thanks again.

2

When you do text=data[‘s’][0], it just gives it the specific value at that time and does not “remember” it to be a specific element of a dictionary. So if you only edit the ‘data’ dictionary it won’t do anything.

You need to explicitly change the text attribute of your label.

from bokeh.io import show

from bokeh.plotting import figure

from bokeh.models import Label, Button, CustomJS

from bokeh.layouts import gridplot

fig = figure()

fig.scatter([1,2],[1,2])

label = Label(x=1,y=1,text=‘Test’)

fig.add_layout(label)

update_label = “”"

var now = new Date();

label.text = now.toString();

“”"

button = Button(label=‘Change label’,width=200,callback=CustomJS(args={‘label’:label},code=update_label))

show(gridplot([[fig,button]],toolbar_location=None))

``

3

And if you want to use a source, you can use a LabelSet instead

from bokeh.io import show

from bokeh.plotting import figure

from bokeh.models import LabelSet, Button, CustomJS, ColumnDataSource

from bokeh.layouts import gridplot

fig = figure()

source = ColumnDataSource(data={‘x’:[1,2],‘y’:[1,2],‘txt’:[‘Testx’,‘Testy’]})

fig.scatter(x=‘x’,y=‘y’,source=source)

label = LabelSet(x=‘x’,y=‘y’,text=‘txt’,source=source)

fig.add_layout(label)

update_label = “”"

var now = new Date();

source.data[‘txt’][0] = now.toString();

source.change.emit();

“”"

button = Button(label=‘Change label’,width=200,callback=CustomJS(args={‘source’:source},code=update_label))

show(gridplot([[fig,button]],toolbar_location=None))

``