CODEWITHSUNDEEP
pythonbokeh
withayk
withayk

Reputation: 146

Python - Bokeh vbar hover tool

I have a simple multiple data bar graph (non stacked) and wish to be able to be shown the (max) value of the bar chart upon a hover over with the mouse.

I'm having trouble linking the hover location to the data though. I'm not sure how of the syntax/coding for calling an index from the bar chart.

Here is my code: 

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

output_file("bars.html")

LOCATIONS = ['CPC','OG2','HS82-83','IG6','IG4','IG10']
CHECKS = ['AID CHECKS', 'ITEMS SCREENED', 'PERSONS SCREENED']

data = {'LOCATIONS' : LOCATIONS,
        'AID CHECKS'   : [208,622,140,1842,127,1304],
        'PERSONS SCREENED'   : [201,484,126,1073,81,676],
        'ITEMS SCREENED' : [28,71,31,394,32,207]}



x = [ (location, check) for location in LOCATIONS for check in CHECKS ]
counts = sum(zip(data['AID CHECKS'], data['PERSONS SCREENED'], data['ITEMS SCREENED']), ()) # like an hstack

source = ColumnDataSource(data=dict(x=x, counts=counts))



p = figure(x_range=FactorRange(*x), plot_height=600, plot_width=990, title="NPS Locations by Security Checks",
           tools="pan,wheel_zoom,box_zoom,reset, save")

p.xaxis.axis_label_text_font_size = "5pt"
p.xaxis.axis_label_text_font_style='bold'

p.vbar(x='x', top='counts', width=0.9, source=source)

p.add_tools(HoverTool(tooltips=[("LOCATION", "@location"), ("TOTAL", "@check")]))


p.y_range.start = 0
p.x_range.range_padding = 0.1
p.xaxis.major_label_orientation = 1
p.xgrid.grid_line_color = None

show(p)

Upvotes: 2

Views: 6484

Answers (1)

mc51
mc51

Reputation: 2287

Adjust the following line:

p.add_tools(HoverTool(tooltips=[("LOCATION", "@x"), ("TOTAL", "@counts")]))

See the documentation:

Field names that begin with @ are associated with columns in a ColumnDataSource. For instance the field name "@price" will display values from the "price" column whenever a hover is triggered. If the hover is for the 17th glyph, then the hover tooltip will correspondingly display the 17th price value.

Upvotes: 7

Related Questions