Creating dynamic HoverTool tooltips in Bokeh based off of a dropdown using CustomJS callbacks
I've got a scatterplot I've created in Bokeh, and I'd very much like to be able to change what tooltips display on the Hovertool depending on your selection in a dropdown menu. If "Stat Set 1" is selected, I want to show stats 1&2. If "Stat Set 2" is selected, I want to show stats 3,4,5.
I'd like the end result to be a html file, so using CustomJS for the call back is probably a must. Here is where I have managed to get with the code. The issue is likely with the callback, as I'm not at all sure how to mess with tooltips via a callback.
import pandas as pd
from bokeh.plotting import figure, show
from bokeh.models import CustomJS, ColumnDataSource, HoverTool, ColumnDataSource, Select
from bokeh.layouts import row
#Create a dataframe with x and y coordinates and 4 different statistics
df = pd.DataFrame(
'x':[1,2,3],
'y':[1,2,3],
'stat1':[1,2,3],
'stat2':[4,5,6],
'stat3':[7,8,9],
'stat4':[10,11,12],
'stat5':[13,14,15]
)
#Create Bokeh's ColumnDataSource
source=ColumnDataSource(data=df)
#Create the different options for the Hovertool tooltips
option1=[('Stat1','@stat1'),
('Stat2','@stat2')]
option2=[('Stat3','@stat3'),
('Stat4','@stat4'),
('Stat5','@stat5')]
#Set the default option for the Hovertool tooltips
hover=HoverTool(tooltips=option1)
#Create the figure
plot = figure(tools=[hover])
plot.circle('x', 'y', source=source)
#Create the callback that will update the tooltips
callback = CustomJS (args=dict(tt=plot.hover), code="""
if (cb_obj.value='Stat Set 1')
tt.tooltips=option1
else
tt.tooltips=option2
""")
#Create a dropdown menu that allows you to change which set of stats will populate the tooltips
stat_select=Select(options=['Stat Set 1', 'Stat Set 2'],
value='Stat Set 1',
title='What stats set do you want to see when you hover?', callback=callback)
show(row(stat_select,plot))
python drop-down-menu hover tooltip bokeh
add a comment |
I've got a scatterplot I've created in Bokeh, and I'd very much like to be able to change what tooltips display on the Hovertool depending on your selection in a dropdown menu. If "Stat Set 1" is selected, I want to show stats 1&2. If "Stat Set 2" is selected, I want to show stats 3,4,5.
I'd like the end result to be a html file, so using CustomJS for the call back is probably a must. Here is where I have managed to get with the code. The issue is likely with the callback, as I'm not at all sure how to mess with tooltips via a callback.
import pandas as pd
from bokeh.plotting import figure, show
from bokeh.models import CustomJS, ColumnDataSource, HoverTool, ColumnDataSource, Select
from bokeh.layouts import row
#Create a dataframe with x and y coordinates and 4 different statistics
df = pd.DataFrame(
'x':[1,2,3],
'y':[1,2,3],
'stat1':[1,2,3],
'stat2':[4,5,6],
'stat3':[7,8,9],
'stat4':[10,11,12],
'stat5':[13,14,15]
)
#Create Bokeh's ColumnDataSource
source=ColumnDataSource(data=df)
#Create the different options for the Hovertool tooltips
option1=[('Stat1','@stat1'),
('Stat2','@stat2')]
option2=[('Stat3','@stat3'),
('Stat4','@stat4'),
('Stat5','@stat5')]
#Set the default option for the Hovertool tooltips
hover=HoverTool(tooltips=option1)
#Create the figure
plot = figure(tools=[hover])
plot.circle('x', 'y', source=source)
#Create the callback that will update the tooltips
callback = CustomJS (args=dict(tt=plot.hover), code="""
if (cb_obj.value='Stat Set 1')
tt.tooltips=option1
else
tt.tooltips=option2
""")
#Create a dropdown menu that allows you to change which set of stats will populate the tooltips
stat_select=Select(options=['Stat Set 1', 'Stat Set 2'],
value='Stat Set 1',
title='What stats set do you want to see when you hover?', callback=callback)
show(row(stat_select,plot))
python drop-down-menu hover tooltip bokeh
add a comment |
I've got a scatterplot I've created in Bokeh, and I'd very much like to be able to change what tooltips display on the Hovertool depending on your selection in a dropdown menu. If "Stat Set 1" is selected, I want to show stats 1&2. If "Stat Set 2" is selected, I want to show stats 3,4,5.
I'd like the end result to be a html file, so using CustomJS for the call back is probably a must. Here is where I have managed to get with the code. The issue is likely with the callback, as I'm not at all sure how to mess with tooltips via a callback.
import pandas as pd
from bokeh.plotting import figure, show
from bokeh.models import CustomJS, ColumnDataSource, HoverTool, ColumnDataSource, Select
from bokeh.layouts import row
#Create a dataframe with x and y coordinates and 4 different statistics
df = pd.DataFrame(
'x':[1,2,3],
'y':[1,2,3],
'stat1':[1,2,3],
'stat2':[4,5,6],
'stat3':[7,8,9],
'stat4':[10,11,12],
'stat5':[13,14,15]
)
#Create Bokeh's ColumnDataSource
source=ColumnDataSource(data=df)
#Create the different options for the Hovertool tooltips
option1=[('Stat1','@stat1'),
('Stat2','@stat2')]
option2=[('Stat3','@stat3'),
('Stat4','@stat4'),
('Stat5','@stat5')]
#Set the default option for the Hovertool tooltips
hover=HoverTool(tooltips=option1)
#Create the figure
plot = figure(tools=[hover])
plot.circle('x', 'y', source=source)
#Create the callback that will update the tooltips
callback = CustomJS (args=dict(tt=plot.hover), code="""
if (cb_obj.value='Stat Set 1')
tt.tooltips=option1
else
tt.tooltips=option2
""")
#Create a dropdown menu that allows you to change which set of stats will populate the tooltips
stat_select=Select(options=['Stat Set 1', 'Stat Set 2'],
value='Stat Set 1',
title='What stats set do you want to see when you hover?', callback=callback)
show(row(stat_select,plot))
python drop-down-menu hover tooltip bokeh
I've got a scatterplot I've created in Bokeh, and I'd very much like to be able to change what tooltips display on the Hovertool depending on your selection in a dropdown menu. If "Stat Set 1" is selected, I want to show stats 1&2. If "Stat Set 2" is selected, I want to show stats 3,4,5.
I'd like the end result to be a html file, so using CustomJS for the call back is probably a must. Here is where I have managed to get with the code. The issue is likely with the callback, as I'm not at all sure how to mess with tooltips via a callback.
import pandas as pd
from bokeh.plotting import figure, show
from bokeh.models import CustomJS, ColumnDataSource, HoverTool, ColumnDataSource, Select
from bokeh.layouts import row
#Create a dataframe with x and y coordinates and 4 different statistics
df = pd.DataFrame(
'x':[1,2,3],
'y':[1,2,3],
'stat1':[1,2,3],
'stat2':[4,5,6],
'stat3':[7,8,9],
'stat4':[10,11,12],
'stat5':[13,14,15]
)
#Create Bokeh's ColumnDataSource
source=ColumnDataSource(data=df)
#Create the different options for the Hovertool tooltips
option1=[('Stat1','@stat1'),
('Stat2','@stat2')]
option2=[('Stat3','@stat3'),
('Stat4','@stat4'),
('Stat5','@stat5')]
#Set the default option for the Hovertool tooltips
hover=HoverTool(tooltips=option1)
#Create the figure
plot = figure(tools=[hover])
plot.circle('x', 'y', source=source)
#Create the callback that will update the tooltips
callback = CustomJS (args=dict(tt=plot.hover), code="""
if (cb_obj.value='Stat Set 1')
tt.tooltips=option1
else
tt.tooltips=option2
""")
#Create a dropdown menu that allows you to change which set of stats will populate the tooltips
stat_select=Select(options=['Stat Set 1', 'Stat Set 2'],
value='Stat Set 1',
title='What stats set do you want to see when you hover?', callback=callback)
show(row(stat_select,plot))
python drop-down-menu hover tooltip bokeh
python drop-down-menu hover tooltip bokeh
edited Nov 15 '18 at 18:36
E Larson
asked Nov 15 '18 at 17:22
E LarsonE Larson
84
84
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I found someone with the answer over on the Bokeh Gmail group.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53324833%2fcreating-dynamic-hovertool-tooltips-in-bokeh-based-off-of-a-dropdown-using-custo%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I found someone with the answer over on the Bokeh Gmail group.
add a comment |
I found someone with the answer over on the Bokeh Gmail group.
add a comment |
I found someone with the answer over on the Bokeh Gmail group.
I found someone with the answer over on the Bokeh Gmail group.
answered Nov 26 '18 at 21:27
E LarsonE Larson
84
84
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53324833%2fcreating-dynamic-hovertool-tooltips-in-bokeh-based-off-of-a-dropdown-using-custo%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown