Bar plot inside Tooltip

Community Support
1

Hi, I would like to know if it is possible to add a chart inside a bokeh tooltip?

My tooltip has information of count of 4 variables, I just thought that it will be nicer to show it with bar plot representation.

TOOLTIPS = [
    ("newCount", "@newCount"),
    ("deletedCount", "@deletedCount"),
    ("sameCount", "@sameCount"),
    ("changedCount", "@deletedCount")
]

Thank you!

1 Like
2

@verina09 I expect there is some way to make this happen. However, last time I tried, I was not able to make it work, so I am not sure it will be simple to accomplish. IIRC the issue was with the plot embed components getting double-escaped when trying to include them in a custom hover template. That said, last time I tried, the json_items API did not exist. That might actually make this more workable. If you do try to make a go of it, I would suggest trying to use that.

3

Thank you for your reply and suggestion, I looked into the API and apparently the sample code uses Flask (which I have no experience of). Nevertheless, I’ll update here again if I do try and manage to make it work. Thanks!

4

Just FYI, Flask is only there to highlight a common use-case example. It would not be needed or relevant at all to this experiment. The point about json_item: it lets you get a clean JSON representation of a Bokeh document (that you could e.g. try to put in a custom hover template).

5

Playing around, this is tantalizingly close to a working POC

import json

from bokeh.embed import json_item
from bokeh.models import ColumnDataSource, CustomJSHover, HoverTool
from bokeh.plotting import figure, show

source = ColumnDataSource(data=dict(x=[1, 4, 8], y=[2, 8, 5]))

p = figure()
p.circle('x', 'y', size=20, source=source)


p2 = figure(plot_height=150, plot_width=400, toolbar_location=None)
p2.hbar(y=[1, 2], right=[5, 10], height=0.8)
out = json.dumps(json_item(p2, "tooltip-plot"))
source.data['plot'] = [out, out, out]

code="""
    Bokeh.embed.embed_item(JSON.parse(value))
    return ""
"""

p.add_tools(HoverTool(
    tooltips='<div id="tooltip-plot">@plot{custom}</div>',
    formatters={ '@plot': CustomJSHover(code=code) }
))

show(p)

But sometimes it flickers extra subplots:

55%20AM
55%20AM1526×1092 30.1 KB

1 Like
6

Wow looking great, thanks a lot :clap::clap:
Sorry, just a minor thing: in my jupyter notebook it shows NaN instead of the barplot, any idea why?

10%20AM
10%20AM1234×1372 56.7 KB

7

@verina09 I am afraid I don’t know. When I take the code above and put it in a notebook, it works just exactly as well (which is to say, almost, but not quite, adequately). Did you make any changes to the code above?

8

no I didn’t modify any code, a simple copy and paste gave me a NaN hover as per screenshot. Was reading the json_items() documentation, do I need to define my own plot function?

9

do I need to define my own plot function?

Sorry, I don’t understand the question. json_item takes any Bokeh object (e.g. plot or layout of some kind) and produces JSON. Then that JSON can be passed to a JS call to embed_items` to render it. I’m not sure what you mean by “plot function” here.

As for the NaN I unfortunately don’t know. I think we are at the point of having to compare detailed notebook, browser, etc. versions in case this is some very version-specific issue. That said, given my own experience, while this it is a promising start, I would not really consider what I have above as “ready to use”. I think at least some small amount of development work will be necessary to really make this use-case supported.

10

Ah, I see… noted and will close this thread for now, thank you for the POC :clap::clap: