CODEWITHSUNDEEP
pythonpython-3.xbokeh
Gábor Erdős
Gábor Erdős

Reputation: 3699

Python Bokeh make part of the plot a link

I have a figure with multiple plots on it. I would like to make the rectangles on it links. The docs of something similar makes all the plots links, however i would just like the rectangles to be links.

I tried a lot of thinks with js_on_event, costum_js_on_tap etc...

Example try:

...
plot.line([1, seq_len], [-0.2, -0.2], color="black")
callback = OpenURL(url="google.com")
a = plot.rect(1, 1, 100, 1)
a.js_on_event('tap', callback)
...

Upvotes: 1

Views: 858

Answers (1)

Joris
Joris

Reputation: 1188

there is probably an easier method but this works for me:

from bokeh.models import ColumnDataSource, TapTool,CustomJS
from bokeh.plotting import figure
from bokeh.embed import file_html
from bokeh.resources import INLINE

p = figure(plot_width=400, plot_height=400,
           tools="tap", title="The rectangles are links")

source1 = ColumnDataSource(data=dict(x1=[1],x2=[2],y1=[2],y2=[1],color=["navy"],url=["http://www.google.com"]))
source2 = ColumnDataSource(data=dict(x1=[2],x2=[3],y1=[5],y2=[4],color=["orange"],url=["https://stackoverflow.com"]))
source3 = ColumnDataSource(data=dict(x1=[3],x2=[4],y1=[8],y2=[7],color=["olive"],url=["https://docs.bokeh.org"]))

#glyphs with links
p.quad('x1','x2','y1','y2',color='color',source=source1)
p.quad('x1','x2','y1','y2',color='color',source=source2)
p.quad('x1','x2','y1','y2',color='color',source=source3)

#glyph without a link
p.circle(5, 5, size=20)

jscode="""
s=cb_data.source;
atr=s.attributes;
var d=atr.data;//d is the data dictionary
url=d.url;
url1=url[0]
if (url1.substring(0, 4) == 'http') {
    window.open(url);
} 
"""

taptool = p.select(type=TapTool)
taptool.callback = CustomJS(args=dict(source=source1), code=jscode)

#save file as .html
with open("bokehRectangleLink.html","w") as f:
    f.write(file_html(p, INLINE, "bokehRectangleLink"))

#open the .html in the browser
import webbrowser
webbrowser.open("bokehRectangleLink.html")

Upvotes: 2

Related Questions