CODEWITHSUNDEEP
pythonbokeh
s0meguy
s0meguy

Reputation: 21

bokeh: HoverTool() ColumnDataSource shows ??? when using @

I want to add tooltips to ColumDataSource() that snap to the nearest data point. But when using @x, @y it shows ??? instead of the nearest value. Using $x, $y works fine though.

An example is provided below:

from bokeh.plotting import show, figure, ColumnDataSource
from bokeh.models import HoverTool

a = [x for x in range(10)]
b = [x for x in range(10)]
c = [0.5 * x for x in range(10)]

source = ColumnDataSource(data=dict(a=a, b=b, c=c))

p = figure()
p.line(x='a', y='b', source=source)
p.line(x='a', y='c', source=source)

p.add_tools(HoverTool(
    tooltips=[
        ('index', '$index'),
        ('($x, $y)', "($x, $y)"),
        ('(@x, @y)', "(@x, @y)"),
        ('(@a, @b, @c)', "(@a, @b, @c)")],
    line_policy='nearest',
    mode='mouse'))

show(p)

RESULT

enter image description here

When I pass the lists directly it works correctly…

In the figure with two graphs, I only want to show the nearest value of the current hovered graph. Therefore using @b, @c is not what I want.

Update:

The figure has two graphs and I only want to show the value of the y-axis of the graph that is hovered.

The result I want to have is:

enter image description here

But in this case I am passing the list objects directly:

p.line(a, b)
p.line(a, c)

p.add_tools(HoverTool(
    tooltips=[
        ('index', '$index'),
        ('(@x, @y)', "(@x, @y)")],
    line_policy='nearest',
    mode='vline'))

When using ColumnDataSource() I have to use the name of the variables and cannot refer to the y-axis using @y.

Therefore I achieve the following result:

enter image description here

p.line(x='a', y='b', source=source)
p.line(x='a', y='c', source=source)

p.add_tools(HoverTool(
    tooltips=[
        ('index', '$index'),
        ('(@x, @y)', "(@x, @y)"),
        ('@a', '@a'),
        ('@b', '@b'),
        ('@c', '@c')],
    line_policy='nearest',
    mode='vline'))

The HoverTool does not show the y-axis value of the hovered graph only. It shows the value of both (@b and @c).

Upvotes: 1

Views: 1967

Answers (2)

s0meguy
s0meguy

Reputation: 21

I have solved the issue by assigning the HoverTool() to individual renderers.

rb = p.line(x='a', y='b', source=source)
rc = p.line(x='a', y='c', source=source)

p.add_tools(HoverTool(
    renderers=[rb],
    tooltips=[
        ('index', '$index'),
        ('(@a, @b)', "(@a, @b)")],
    line_policy='nearest',
    mode='mouse'))

p.add_tools(HoverTool(
    renderers=[rc],
    tooltips=[
        ('index', '$index'),
        ('(@a, @c)', "(@a, @c)")],
    line_policy='nearest',
    mode='mouse'))

Upvotes: 1

Geomario
Geomario

Reputation: 212

You have to set in the ColumnDataSource your values to display. I am not really understanding what you want to display, but I will paste example code from Bokeh you can find in the page. Basically, the "x" ans "y" are the variables to plot and the next are the variables to display.

# Make the ColumnDataSource: source
source = ColumnDataSource(data={
    'x'       : data.loc[1970].fertility,
    'y'       : data.loc[1970].life,
    'country' : data.loc[1970].Country,
})

# Create the figure: p
p = figure(title='1970', x_axis_label='Fertility (children per woman)', 
y_axis_label='Life Expectancy (years)',plot_height=400, plot_width=700,
tools=[HoverTool(tooltips='@country')])

# Add a circle glyph to the figure p
p.circle(x='x', y='y', source=source)

# Output the file and show the figure
output_file('gapminder.html')
show(p)

Upvotes: 0

Related Questions