Creating dynamic HoverTool tooltips in Bokeh based off of a dropdown using CustomJS callbacks










0















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))









share|improve this question




























    0















    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))









    share|improve this question


























      0












      0








      0








      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))









      share|improve this question
















      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 15 '18 at 18:36







      E Larson

















      asked Nov 15 '18 at 17:22









      E LarsonE Larson

      84




      84






















          1 Answer
          1






          active

          oldest

          votes


















          0














          I found someone with the answer over on the Bokeh Gmail group.






          share|improve this answer






















            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
            );



            );













            draft saved

            draft discarded


















            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









            0














            I found someone with the answer over on the Bokeh Gmail group.






            share|improve this answer



























              0














              I found someone with the answer over on the Bokeh Gmail group.






              share|improve this answer

























                0












                0








                0







                I found someone with the answer over on the Bokeh Gmail group.






                share|improve this answer













                I found someone with the answer over on the Bokeh Gmail group.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 26 '18 at 21:27









                E LarsonE Larson

                84




                84





























                    draft saved

                    draft discarded
















































                    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.




                    draft saved


                    draft discarded














                    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





















































                    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







                    這個網誌中的熱門文章

                    How to read a connectionString WITH PROVIDER in .NET Core?

                    Node.js Script on GitHub Pages or Amazon S3

                    Museum of Modern and Contemporary Art of Trento and Rovereto