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:

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.

Smithson

Answer 1

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

Ducan

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

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

Answer 2

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.

Foe

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. – Foe