Bokeh hover tooltip not displaying all data - Ipython notebook

Question

I am experimenting with Bokeh and mixing pieces of code. I created the graph below from a Pandas DataFrame, which displays the graph correctly with all the tool elements I want. However, the tooltip is partially displaying the data.

Here is the graph:

bokeh chart with tooltip

Here is my code:

from bokeh.plotting import figure, show
from bokeh.io import output_notebook
from bokeh.models import HoverTool
from collections import OrderedDict

x  = yearly_DF.index
y0 = yearly_DF.weight.values
y1 = yearly_DF.muscle_weight.values
y2 = yearly_DF.bodyfat_p.values

#output_notebook()

p = figure(plot_width=1000, plot_height=600,
           tools="pan,box_zoom,reset,resize,save,crosshair,hover", 
           title="Annual Weight Change",
           x_axis_label='Year', 
           y_axis_label='Weight',
           toolbar_location="left"
          )

hover = p.select(dict(type=HoverTool))
hover.tooltips = OrderedDict([('Year', '@x'),('Total Weight', '@y0'), ('Muscle Mass', '$y1'), ('BodyFat','$y2')])

output_notebook()

p.line(x, y0, legend="Weight")
p.line(x, y1, legend="Muscle Mass", line_color="red")

show(p)

I have tested with Firefox 39.0, Chrome 43.0.2357.130 (64-bit) and Safari Version 8.0.7. I have cleared the cache and I get the same error in all browsers. Also I did pip install bokeh --upgrade to make sure I have the latest version running.

jmorrison · Accepted Answer · 2015-12-17 20:14:02Z

15

Try using ColumnDataSource.

Hover tool needs to have access to the data source so that it can display info. @x, @y are the x-y values in data unit. (@ prefix is special, can only followed by a limited set of variable, @y2 is not one of them)., Normally I would use $+ column_name to display the value of my interest, such as $weight. See here for more info.

Besides, I am surprised that the hover would appear at all. As I thought hoverTool doesn't work with line glyph, as noted here

Try the following : (I haven't tested, might have typos).

df = yearly_DF.reset_index() # move index to column.
source = ColumnDataSource(ColumnDataSource.from_df(df)

hover.tooltips = OrderedDict([('x', '@x'),('y', '@y'), ('year', '$index'), ('weight','$weight'), ('muscle_weight','$muscle_weight'), ('body_fat','$bodyfat_p')])

p.line(x='index', y='weight', source=source, legend="Weight")
p.line(x='index', y='muscle_weight', source=source, legend="Muscle Mass", line_color="red")

edited Dec 17, 2015 at 20:14

jmorrison

1911 silver badge14 bronze badges

answered Jul 5, 2015 at 20:39

colinfang

21.9k20 gold badges98 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jf328 Over a year ago

Did you mean "$" when you say "@", and "@" when you say "$" ?

jxramos Over a year ago

@jf328 I think he got it backwards indeed, at least measured by the current release 12.5,12.6

bigreddot · Accepted Answer · 2015-07-05 12:44:27Z

1

Are you using Firefox? This was a reported issue with some older versions of FF:

https://github.com/bokeh/bokeh/issues/1981

https://github.com/bokeh/bokeh/issues/2122

Upgrading FF resolved the issue.

answered Jul 5, 2015 at 12:44

bigreddot

34.8k5 gold badges73 silver badges128 bronze badges

1 Comment

bigreddot Over a year ago

Sorry, I was missing the forest for the trees. You need to set up a column data source with column names that match the identifiers in the hover template, as Colin describes below.

Collectives™ on Stack Overflow

Bokeh hover tooltip not displaying all data - Ipython notebook

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related