Search code examples
pythongraphhoverbokehalpha-vantage

How to get Bokeh hovertool working for candlesticks chart?


The goal was to have my mouse hover over the candlesticks and have the data appear while I do so. I was able to get the Bokeh hover tool working but, I am not able to pull and display the data. I was able to get the (x,y) data to appear but, not the rest. This is what I have so far:

#Importing Libraries
import requests
import pandas as pd
import datetime
from bokeh.plotting import ColumnDataSource, figure, output_file, show
from math import pi

#Request ticker symbol
API_KEY = 'YOUR API KEY'
symbol = input('Enter ticker symbol: ')
r = requests.get('https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=' + symbol + '&apikey=' + API_KEY)
print(r.status_code)
result = r.json()
dataForAllDays = result['Time Series (Daily)']

#convert to dataframe
df = pd.DataFrame.from_dict(dataForAllDays, orient='index') 
df = df.reset_index()

#rename columns
df = df.rename(index=str, columns={"index": "date", "1. open": "open", "2. high": "high", "3. low": "low", "4. close": "close","5. volume":"volume"})

#Changing to datetime
df['date'] = pd.to_datetime(df['date'])

#Sort according to date
df = df.sort_values(by=['date'])

#Changing the datatype 
df.open = df.open.astype(float)
df.close = df.close.astype(float)
df.high = df.high.astype(float)
df.low = df.low.astype(float)
df.volume = df.volume.astype(int)

#check the data
df.head()

#Hovertool Tooltips
source = ColumnDataSource(data=dict(date=df['date'], open=df.open, close=df.close))
TOOLTIPS = [
    ("(x,y)", "($x, $y)"),    
    ("date", "@date"),
    ("open", "df.open"),
    ("open", "@open"),
    ("close", "df.close"),
    ("close", "@close"),
    ("percent","@changepercent"),
]

#Check the datatype
df.info()
inc = df.close > df.open
dec = df.open > df.close
w = 12*60*60*1000 # half day in ms
TOOLS = "pan,wheel_zoom,box_zoom,reset,save"
title = symbol + ' Chart'
p = figure(x_axis_type="datetime", tools=TOOLS, tooltips=TOOLTIPS, plot_width=1000, title = title)
p.xaxis.major_label_orientation = pi/4
p.grid.grid_line_alpha=0.3
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="#a30e15", line_color="black")
p.vbar(df.date[dec], w, df.open[dec], df.close[dec], fill_color="#53680c", line_color="black")

#Store as a HTML file
output_file("stock_information.html", title="candlestick.py")

# Display in browser
show(p)

Solution

  • The only values that are meaningful in the tooltip specification, are:

    • pre-defined "special variables" denoted by starting with $
    • references to columns in the ColumnDataSource, denoted by starting with @

    So things like "df.open" are meaningless in this context. The actual code to make the hovertool executes in the browser, in javascript, where Python and Pandas and your DataFrame df do not exist. If you want data to show up in a HoverTool then you will have to put a column in your CDS with that data, and reference it in the hover tool specification using the @column_name syntax.

    You may refer to the documentation for more information:

    https://docs.bokeh.org/en/latest/docs/user_guide/tools.html#hovertool