Different image as background for Radio Button Group

Hi,
I have Radio Button Group with different number of buttons depending of some conditions. I would like each button to have different image in background. Is it possible to do it?

Regards,

Goran

Maybe I should give more details for my question.

In the bokeh serve application I have line plot. Under the plot I put Radio Button Group with aim to change plot data on radio Button group click. The number of buttons in the Radio Button Group is dynamic and depends from other widget. I would like buttons to be replaced with different images for each button. In that way user will click on image instead on button. I do not know whether is css problem or bokeh problem. Please suggestions or solution.

Thanks,

Goran

···

On Saturday, January 26, 2019 at 4:51:08 PM UTC+1, Goran Goki wrote:

Hi,
I have Radio Button Group with different number of buttons depending of some conditions. I would like each button to have different image in background. Is it possible to do it?

Regards,

Goran

I am sure there are better options but I came up with this simple JS callback solution:

from bokeh.plotting import curdoc, figure
from bokeh.layouts import column, row
from bokeh.models import CustomJS

p0 = figure(plot_width = 300, plot_height = 300, x_range = (0, 10), y_range = (0, 10), title = “Which doggy was clicked ?”)

p1 = figure(name = ‘Doggy 1’, plot_width = 150, plot_height = 150, x_range = (0, 10), y_range = (0, 10), tools = ‘’, toolbar_location = None)
p1.image_url(url = [‘https://cdn3.iconfinder.com/data/icons/line/36/dog_head-512.png’], x = [0], y = [10], w = [10], h = [10])
p1.xgrid.visible = False
p1.ygrid.visible = False
p1.xaxis.visible = False
p1.yaxis.visible = False

p2 = figure(name = ‘Doggy 2’, plot_width = 150, plot_height = 150, x_range = (0, 10), y_range = (0, 10), tools = ‘’, toolbar_location = None)
p2.image_url(url = [‘https://cdn3.iconfinder.com/data/icons/dogs-outline/100/dog-02-512.png’], x = [0], y = [10], w = [10], h = [10])
p2.xgrid.visible = False
p2.ygrid.visible = False
p2.xaxis.visible = False
p2.yaxis.visible = False

layout = column(row(p0), row(p1, p2))
callback1 = CustomJS(args = {‘p’: p1, ‘plot’: p0}, code = “plot.title.text = p.name”)
callback2 = CustomJS(args = {‘p’: p2, ‘plot’: p0}, code = “plot.title.text = p.name”)
p1.js_on_event(‘tap’, callback1)
p2.js_on_event(‘tap’, callback2)

curdoc().add_root(layout)

``

Save as main.py and run from terminal:

bokeh serve --show main.py

``

···

On Saturday, January 26, 2019 at 4:51:08 PM UTC+1, Goran Goki wrote:

Hi,
I have Radio Button Group with different number of buttons depending of some conditions. I would like each button to have different image in background. Is it possible to do it?

Regards,

Goran

Hi Tony,
It is very elegant solution for my problem. I ran your code and that is what i need. I am busy next few days but I will try in my environment.

Many thanks,

Goran

···

On Saturday, February 9, 2019 at 10:36:46 AM UTC+1, tony halik wrote:

I am sure there are better options but I came up with this simple JS callback solution:

from bokeh.plotting import curdoc, figure
from bokeh.layouts import column, row
from bokeh.models import CustomJS

p0 = figure(plot_width = 300, plot_height = 300, x_range = (0, 10), y_range = (0, 10), title = “Which doggy was clicked ?”)

p1 = figure(name = ‘Doggy 1’, plot_width = 150, plot_height = 150, x_range = (0, 10), y_range = (0, 10), tools = ‘’, toolbar_location = None)
p1.image_url(url = [‘https://cdn3.iconfinder.com/data/icons/line/36/dog_head-512.png’], x = [0], y = [10], w = [10], h = [10])
p1.xgrid.visible = False
p1.ygrid.visible = False
p1.xaxis.visible = False
p1.yaxis.visible = False

p2 = figure(name = ‘Doggy 2’, plot_width = 150, plot_height = 150, x_range = (0, 10), y_range = (0, 10), tools = ‘’, toolbar_location = None)
p2.image_url(url = [‘https://cdn3.iconfinder.com/data/icons/dogs-outline/100/dog-02-512.png’], x = [0], y = [10], w = [10], h = [10])
p2.xgrid.visible = False
p2.ygrid.visible = False
p2.xaxis.visible = False
p2.yaxis.visible = False

layout = column(row(p0), row(p1, p2))
callback1 = CustomJS(args = {‘p’: p1, ‘plot’: p0}, code = “plot.title.text = p.name”)
callback2 = CustomJS(args = {‘p’: p2, ‘plot’: p0}, code = “plot.title.text = p.name”)
p1.js_on_event(‘tap’, callback1)
p2.js_on_event(‘tap’, callback2)

curdoc().add_root(layout)

``

Save as main.py and run from terminal:

bokeh serve --show main.py

``

On Saturday, January 26, 2019 at 4:51:08 PM UTC+1, Goran Goki wrote:

Hi,
I have Radio Button Group with different number of buttons depending of some conditions. I would like each button to have different image in background. Is it possible to do it?

Regards,

Goran

I succeed dynamically to create certain number of plots as buttons with for loop and exec command. I used Tony’s example…
But now I have a problem how from plot. js_on_event to call python callback to update plots and other information. Does it possible to do or I should write javascript to update plot.

In attachment are example code with data used and parameters.

Regards,

Goran

mk_sdg_01_10.pickle (1.2 KB)

sdg_01_10.pickle (13.3 KB)

Example.txt (10.6 KB)

parameters.py (8.94 KB)

···

On Sunday, February 10, 2019 at 5:30:28 PM UTC+1, Goran Goki wrote:

Hi Tony,
It is very elegant solution for my problem. I ran your code and that is what i need. I am busy next few days but I will try in my environment.

Many thanks,

Goran

On Saturday, February 9, 2019 at 10:36:46 AM UTC+1, tony halik wrote:

I am sure there are better options but I came up with this simple JS callback solution:

from bokeh.plotting import curdoc, figure
from bokeh.layouts import column, row
from bokeh.models import CustomJS

p0 = figure(plot_width = 300, plot_height = 300, x_range = (0, 10), y_range = (0, 10), title = “Which doggy was clicked ?”)

p1 = figure(name = ‘Doggy 1’, plot_width = 150, plot_height = 150, x_range = (0, 10), y_range = (0, 10), tools = ‘’, toolbar_location = None)
p1.image_url(url = [‘https://cdn3.iconfinder.com/data/icons/line/36/dog_head-512.png’], x = [0], y = [10], w = [10], h = [10])
p1.xgrid.visible = False
p1.ygrid.visible = False
p1.xaxis.visible = False
p1.yaxis.visible = False

p2 = figure(name = ‘Doggy 2’, plot_width = 150, plot_height = 150, x_range = (0, 10), y_range = (0, 10), tools = ‘’, toolbar_location = None)
p2.image_url(url = [‘https://cdn3.iconfinder.com/data/icons/dogs-outline/100/dog-02-512.png’], x = [0], y = [10], w = [10], h = [10])
p2.xgrid.visible = False
p2.ygrid.visible = False
p2.xaxis.visible = False
p2.yaxis.visible = False

layout = column(row(p0), row(p1, p2))
callback1 = CustomJS(args = {‘p’: p1, ‘plot’: p0}, code = “plot.title.text = p.name”)
callback2 = CustomJS(args = {‘p’: p2, ‘plot’: p0}, code = “plot.title.text = p.name”)
p1.js_on_event(‘tap’, callback1)
p2.js_on_event(‘tap’, callback2)

curdoc().add_root(layout)

``

Save as main.py and run from terminal:

bokeh serve --show main.py

``

On Saturday, January 26, 2019 at 4:51:08 PM UTC+1, Goran Goki wrote:

Hi,
I have Radio Button Group with different number of buttons depending of some conditions. I would like each button to have different image in background. Is it possible to do it?

Regards,

Goran

I have made small research in the documentation and found appropriate way for my problem to update 2 main plots when tap on dynamically created small plots with background image which play role of buttons.

I created dynamic number of small plots with background image

for ii in range(1,brbut + 1):

cmd11 = “”“pl%s = figure(name = ‘%s’, plot_width = 40, plot_height = 40, x_range = (0, 10), y_range = (0, 10), tools = ‘’, toolbar_location = None)”"" % (ii, indi[ii-1])

exec(cmd11)

cmd12 = “”“pl%s.image_url(url = [’/a/b/c.png’], x = [0], y = [10], w = [10], h = [10])”"" % (ii)

exec(cmd12)

and for each one i create event that call rr function

for ii in range(1,brbut+1):

cmd31 = “”“pl%s.on_event(events.Tap, rr(pl%s.name))”"" % (ii, ii)

exec(cmd31)

Content of my previous function def update_plot(attrname, old, new): I copied under def python_callback(event) function and use plot name as input attribute

def rr(attributes):

def python_callback(event):

estattabela = attributes

if sourcemk.get(estattabela) == ‘1’:

dfmk = ReadMK(estattabela)

else:

dfmk = pd.DataFrame({‘A’ : }) #empty dataframe

s3, s4, s5, source1, sourcebar1, year = ReadEstat(estattabela, titles, sourcemk, estatparam, dfmk)

title = titles.get(estattabela)[0][0]

titlebar = title + ', ’ + str(year)

subtitle = titles.get(estattabela)[0][1]

yunits = titles.get(estattabela)[0][2]

source.data.update(source1.data)

sourcebar.data.update(sourcebar1.data)

sortedc = sorted(list(sourcebar.data[‘x’]), key=lambda x: list(sourcebar.data[‘top’])[list(sourcebar.data[‘x’]).index(x)], reverse=True)

plot_bar.x_range.factors = sortedc

plot_line.title.text = title

plot_bar.title.text = titlebar

plot_line.update

plot_bar.update

return python_callback

Thanks again to Tony who gave initial idea to use plot tap method.

Thanks,

Goran

···

On Saturday, January 26, 2019 at 4:51:08 PM UTC+1, Goran Goki wrote:

Hi,
I have Radio Button Group with different number of buttons depending of some conditions. I would like each button to have different image in background. Is it possible to do it?

Regards,

Goran