HoverTool not working with multi_line

Community Support
1

Hi there,

I can’t get the HoverTool to work with a multi_line figure. I’ve tried a number of examples online, but I keep getting the same error on the debug console on my webbrowser.

Example script:

def build_document(doc):
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, HoverTool
from bokeh.io import show, output_notebook
import pandas as pd
import numpy as np

index = ['2018-01-31', '2018-02-28', '2018-03-31', '2018-04-30', '2018-05-31', 
        '2018-06-30', '2018-07-31', '2018-08-31', '2018-09-30', '2018-10-31']

columns = ['Argentina', 'Turkey', 'Mexico']

np.random.seed(123)
data = np.random.rand(10, 3)
df = pd.DataFrame(index=index, columns=columns, data=data)
df_transposed = df.transpose()
source = ColumnDataSource({"xs": [df.index.values.tolist()]*len(list(df.columns.values)), "ys": df_transposed.values.tolist(), "colors": ["red", "green", "blue"], "names": list(df.columns.values)})

output_notebook()
p = figure(plot_height=400, x_range=index)
p.multi_line(xs='xs', ys='ys', color = "colors", name="names", legend_label="names", source=source)
p.xaxis.major_label_orientation = 0.90
p.legend.click_policy="hide"
p.add_tools(HoverTool(tooltips=[('Country', '@names'),
                                ('Date', '$x'),
                                ('Value', '$y')]))

# show(p)
doc.add_root(p)

if __name__ == "__main__":
from bokeh.application import Application
from bokeh.application.handlers.function import FunctionHandler
from bokeh.layouts import column, row
from bokeh.models import ColumnDataSource, DataRange1d, Dropdown, Slider, HoverTool
from bokeh.plotting import figure
from bokeh.server.server import Server

    apps = {"/": Application(FunctionHandler(build_document))}
    server = Server(apps)
    print("Server running at `http://localhost:5006/`")
    server.start()
    server.io_loop.start()

I’m using bokeh version 2.2.3 with python3.6. Is there something I’m missing here? /How can I get this to work? Thanks

Error (on chrome developer console):

Uncaught TypeError: Cannot read property '2' of undefined
at b._update (bokeh.min.js?v=c77564ca8be6e4b5a67648d980fe180d62bd99ccfc01bd272a3e708b9533f34b1c86b24a1a28c86555f838fa26e429697aad84c411cac25f0472231ed56f1eab:569)
at b.<anonymous> (bokeh.min.js?v=c77564ca8be6e4b5a67648d980fe180d62bd99ccfc01bd272a3e708b9533f34b1c86b24a1a28c86555f838fa26e429697aad84c411cac25f0472231ed56f1eab:240)
at o.emit (bokeh.min.js?v=c77564ca8be6e4b5a67648d980fe180d62bd99ccfc01bd272a3e708b9533f34b1c86b24a1a28c86555f838fa26e429697aad84c411cac25f0472231ed56f1eab:181)
at p.inspect (bokeh.min.js?v=c77564ca8be6e4b5a67648d980fe180d62bd99ccfc01bd272a3e708b9533f34b1c86b24a1a28c86555f838fa26e429697aad84c411cac25f0472231ed56f1eab:258)
at b._inspect (bokeh.min.js?v=c77564ca8be6e4b5a67648d980fe180d62bd99ccfc01bd272a3e708b9533f34b1c86b24a1a28c86555f838fa26e429697aad84c411cac25f0472231ed56f1eab:569)
at b._move (bokeh.min.js?v=c77564ca8be6e4b5a67648d980fe180d62bd99ccfc01bd272a3e708b9533f34b1c86b24a1a28c86555f838fa26e429697aad84c411cac25f0472231ed56f1eab:569)
at b.<anonymous> (bokeh.min.js?v=c77564ca8be6e4b5a67648d980fe180d62bd99ccfc01bd272a3e708b9533f34b1c86b24a1a28c86555f838fa26e429697aad84c411cac25f0472231ed56f1eab:497)
at b.<anonymous> (bokeh.min.js?v=c77564ca8be6e4b5a67648d980fe180d62bd99ccfc01bd272a3e708b9533f34b1c86b24a1a28c86555f838fa26e429697aad84c411cac25f0472231ed56f1eab:240)
at o.emit (bokeh.min.js?v=c77564ca8be6e4b5a67648d980fe180d62bd99ccfc01bd272a3e708b9533f34b1c86b24a1a28c86555f838fa26e429697aad84c411cac25f0472231ed56f1eab:181)
at d.trigger (bokeh.min.js?v=c77564ca8be6e4b5a67648d980fe180d62bd99ccfc01bd272a3e708b9533f34b1c86b24a1a28c86555f838fa26e429697aad84c411cac25f0472231ed56f1eab:497)
2

Jeremy - I am seeing the same thing - this is on existing code that used to work fine so I think something was broken somewhere. Not entirely sure where to start with this one - I will have a crack at using basic glyphs but that is generally frowned upon.

1 Like
3

A simple example on 2.2.3…

title = "No CEO Selected"
source = ColumnDataSource(data=dict(
    Years = [[0,1],[0,1]],
    ys = [[100,100],[90,110]],
    label = ['Market','Sector'],
    color = ['red','blue']
))

ifig = figure(title=title,x_axis_label="Years", y_axis_label="Relative Performance",  \
            sizing_mode="scale_height")

ifig.multi_line(xs='Years', ys='ys', color='color', legend_field='label', source=source)
ifig.add_tools(
        HoverTool(
            tooltips=[('Test', '$index')] # @ceo
        ))

show(ifig)

Gives the following JS error on console on mouseover event firing…

bokeh-2.2.3.min.js:569 Uncaught TypeError: Cannot read property '0' of undefined
    at b._update (bokeh-2.2.3.min.js:569)
    at b.<anonymous> (bokeh-2.2.3.min.js:240)
    at o.emit (bokeh-2.2.3.min.js:181)
    at p.inspect (bokeh-2.2.3.min.js:258)
    at b._inspect (bokeh-2.2.3.min.js:569)
    at b._move (bokeh-2.2.3.min.js:569)
    at b.<anonymous> (bokeh-2.2.3.min.js:497)
    at b.<anonymous> (bokeh-2.2.3.min.js:240)
    at o.emit (bokeh-2.2.3.min.js:181)
    at d.trigger (bokeh-2.2.3.min.js:497)
_update @ bokeh-2.2.3.min.js:569
(anonymous) @ bokeh-2.2.3.min.js:240
emit @ bokeh-2.2.3.min.js:181
inspect @ bokeh-2.2.3.min.js:258
_inspect @ bokeh-2.2.3.min.js:569
_move @ bokeh-2.2.3.min.js:569
(anonymous) @ bokeh-2.2.3.min.js:497
(anonymous) @ bokeh-2.2.3.min.js:240
emit @ bokeh-2.2.3.min.js:181
trigger @ bokeh-2.2.3.min.js:497
(anonymous) @ bokeh-2.2.3.min.js:497
_trigger @ bokeh-2.2.3.min.js:497
_mouse_move @ bokeh-2.2.3.min.js:497
(anonymous) @ bokeh-2.2.3.min.js:497
4

Actually using Bokeh example - works with plot.line, not when plot.multi_line used…

from bokeh.models import HoverTool
from bokeh.plotting import figure, output_file, show
from bokeh.sampledata.glucose import data

output_file("styling_hover.html")

subset = data.loc['2010-10-06']

x, y = subset.index.to_series(), subset['glucose']
y2 = [x + 25 for x in y]

# Basic plot setup
plot = figure(plot_width=600, plot_height=300, x_axis_type="datetime", tools="",
              toolbar_location=None, title='Hover over points')

plot.line(x, y, line_dash="4 4", line_width=1, color='gray')
#plot.multi_line(xs=[x,x],ys=[y,y2])

plot.add_tools(HoverTool(tooltips="Fred", mode='mouse'))

show(plot)

The property error "Cannot read property ‘nnn’ (in this case) - nnn = index of x value

1 Like
5

@andrew.waites let me know if you find a solution!

6

Any solutions to this? I am having the same problem.

7

Hi all, this was a bug in the 2.2.x line. It was fixed recently in this PR:

The change will be part of the upcoming 2.3 release.

2 Likes