CODEWITHSUNDEEP
pythonvisualizationbokeh
Dror
Dror

Reputation: 13081

Configure the tooltip of Bokeh from pandas.DataFrame column

I have a simple pandas.DataFrame:

df = pd.DataFrame(
    {
        "name": ['foo','bar'],
        "kpi1": [1,2],
        "kpi2": [2,1]
    }
)

Which I want to scatter plot using Bokeh. First step is:

import bokeh.plotting as bpl
import bokeh.models as bmo
bpl.output_notebook()

p = bpl.figure(tools=["hover"])

p.scatter(
    'kpi1', 
    'kpi2', source=source)

bpl.show(p)  # open a browser

Next, I want to configure the tooltip. In particular I want to see the index of each point and the associated name. Here's the second step:

source = bpl.ColumnDataSource.from_df(df)
hover = bmo.HoverTool(
    tooltips=[
        ("index", "$index"),
        ('Name', '$name')
    ]
)

p = bpl.figure(tools=[hover])

p.scatter(
    'kpi1', 
    'kpi2', source=source)

bpl.show(p)  # open a browser

This works partially. The tooltip contains two fields (index and Name) but the latter is filled with ???. How can I make it read the right column from the dataframe and use it for the tooltip's field?

Upvotes: 4

Views: 3604

Answers (1)

Valentina Scipione
Valentina Scipione

Reputation: 154

That is because you call the tooltips with $ instead of @.

The correct definition would be 

hover = bmo.HoverTool(
    tooltips=[
        ("index", "@index"),
        ('Name', '@name')
    ]
)

By the way, you don't need to to import bokeh.plotting and bokeh.models as a variable. You can sinmply do:

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

and then

# Create a ColumnDataSource from df: source
source = ColumnDataSource(df)

# Create the figure: p
p = figure(tools=["hover"])

# Add circle glyphs to the figure p
p.circle('kpi1', 'kpi2', source= source)
show(p)
hover = HoverTool(tooltips=[("index", "@index"),
    ('Name', '@name')])

p.add_tools(hover)
show(p)

Upvotes: 4

Related Questions