CODEWITHSUNDEEP
pythonpandaschartsbokeh
Robex
Robex

Reputation: 47

how to get the axis values on the HoverTool - Bokeh

I have written a code that reads from a .csv files and converts it into a pandas dataframe. I then proceed to plot the chart with candlesticks. The chart itself is good but when i try to use the HoverTools i cannot seem to add the axis values to the tool. I used column data source but i wasnt able to understand it.

  import pandas as pd

  from math import pi

  from bokeh.plotting import figure, show, output_file

  from bokeh.models import HoverTool

  df = pd.read_csv('/Users/robindhillon/Desktop/pyfiles/EURUSD.csv')

  df.columns = ['date','open','high','low','close','volume']

  df['date'] = pd.to_datetime([x[:-9] for x in 
  df['date'].squeeze().tolist()], dayfirst=True)

  inc = df.close > df.open
  dec = df.open > df.close
  w = 86400000


  hover = HoverTool(
    tooltips=[
        ('date',   '@date'),
        ('open',  '@open' ), 
        ('high', '@high'  ),
        ('low',   '@low'   ),
        ('close',  '@close'),
    ],

    formatters={
        'date' : 'datetime', 
        'open' : 'numeral',   
        'high' : 'numeral',
        'low'  : 'numeral',
        'close': 'numeral',                  
    },

    mode='vline'
)

   TOOLS = 'pan,wheel_zoom,box_zoom,reset,save,crosshair'

   p = figure(x_axis_type = 'datetime', tools=TOOLS, plot_width=1200, 
   title='test')

   p.xaxis.major_label_orientation = pi/4
   p.grid.grid_line_alpha = 0.3

   p.add_tools(hover)

   p.segment(df.date, df.high, df.date, df.low, color="black")

   p.vbar(df.date[inc], w, df.open[inc], df.close[inc], 
   fill_color="#12C98C", line_color="black")

   p.vbar(df.date[dec], w, df.open[dec], df.close[dec], 
   fill_color="#F2583E", line_color="black")

   output_file("candlestick.html", title="candlestick.py example")

   show(p)  # open a browser

Upvotes: 1

Views: 2192

Answers (2)

Jasper
Jasper

Reputation: 1795

Field names that begin with @ are associated with columns in a ColumnDataSource. For instance the field name "@date" will display values from the "date" column whenever a hover is triggered. If the hover is for the 17th glyph, then the hover tooltip will correspondingly display the 17th date value. The hover tool won't work if you use field names that begin with @ without a ColumnDataSource

import pandas as pd
from math import pi
from bokeh.plotting import figure, show, output_file
from bokeh.models import HoverTool, ColumnDataSource

df = pd.read_csv('/Users/robindhillon/Desktop/pyfiles/EURUSD.csv')
df.columns = ['date','open','high','low','close','volume']
df['date'] = pd.to_datetime([x[:-9] for x in 
df['date'].squeeze().tolist()], dayfirst=True)

inc = df.close > df.open
dec = df.open > df.close
w = 86400000

hover = HoverTool(
  tooltips=[
    ('date',   '@date{%F}'),
    ('open',  '@open' ), 
    ('high', '@high'  ),
    ('low',   '@low'   ),
    ('close',  '@close'),
  ],
  formatters={
    'date' : 'datetime', 
    'open' : 'numeral',   
    'high' : 'numeral',
    'low'  : 'numeral',
    'close': 'numeral',                  
  },
  mode='vline'
)

df['dateinc'] = df.date[inc]
df['openinc'] = df.open[inc]
df['closeinc'] = df.close[inc]
df['datedec'] = df.date[dec]
df['opendec'] = df.open[dec]
df['closedec'] = df.close[dec]

source = ColumnDataSource(df)

TOOLS = 'pan,wheel_zoom,box_zoom,reset,save,crosshair'

p = figure(x_axis_type = 'datetime', tools=TOOLS, plot_width=1200, 
title='test')

p.xaxis.major_label_orientation = pi/4
p.grid.grid_line_alpha = 0.3

p.add_tools(hover)
p.segment('date', 'high', 'date', 'low', color="black", source=source)
p.vbar('dateinc', w, 'openinc', 'closeinc', fill_color="#12C98C", line_color="black", source=source)

p.vbar('datedec', w, 'opendec', 'closedec', fill_color="#F2583E", line_color="black", source=source)

output_file("candlestick.html", title="candlestick.py example")

show(p)  # open a browser

Upvotes: 1

bigreddot
bigreddot

Reputation: 34618

In addition to the @field_name hover tool specification, there are also some "special variables" to display specific information not-related to the data source. To display the data-space value of the x-coordinate under the cursor, use $x

Upvotes: 0

Related Questions