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 CustomJSp0 = 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 = Falsep2 = 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 = Falselayout = 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 CustomJSp0 = 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 = Falsep2 = 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 = Falselayout = 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