I am learning to visualize data with bokeh and is stuck with HoverTool and it's tool tips. Here is the code that I have currently,
from alpha_vantage.timeseries import TimeSeries
import pandas as pd
from pandas.plotting import register_matplotlib_converters
import matplotlib.pyplot as plt
from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import DatetimeTickFormatter, HoverTool
register_matplotlib_converters()
pd.set_option('display.precision',4)
ticker_symbol = 'AAPL'
ts = TimeSeries(key=API_Key, output_format='pandas')
data, meta_data = ts.get_intraday(symbol=ticker_symbol,interval='1min', outputsize='full')
plt_tools = 'hover, pan,wheel_zoom,box_zoom,reset'
p = figure(title='Intraday Times Series', x_axis_label='Time', x_axis_type='datetime', y_axis_label='Price', plot_width=1280, plot_height=960, toolbar_location='below', tools=plt_tools)
h_line = HoverTool()
h_line.mode = 'vline'
h_line.tooltips = [('date','@index'), # not sure if this works
('close','$@{4. close}{%0.2f}')] # not sure if this works
h_line.formatters = {'date': 'datetime', '4. close': 'printf'} # not sure if this works
p.add_tools(h_line)
p.line(data.index.values, data['4. close'], legend_label=ticker_symbol, line_width=2)
output_file('lines.html')
show(p)
and the data looks like this
1. open 2. high 3. low 4. close 5. volume
date
2019-12-23 09:35:00 281.0400 281.3582 281.0400 281.3582 171044.0
2019-12-23 09:34:00 281.0400 281.0400 281.0400 281.0400 129570.0
2019-12-23 09:33:00 281.3100 281.3900 281.2100 281.3300 97498.0
2019-12-23 09:32:00 281.4400 281.4800 281.1600 281.2800 194802.0
2019-12-23 09:31:00 281.4246 281.4246 281.4246 281.4246 957947.0
I manage to get the HoverTool and vline working but I'm getting 2 tooltips from the plot. Stacked over each other (stacked tooltips) and the original tooltips without h_line.tooltips & h_line.formatters (original tooltip)
How can I changed the tool tip to show like the block at the bottom instead of scientific number and price on the same line:
Date: DD-MM-YY HH:MM
Close: xxx.xx
example for Date - 01-01-20 13:15
example for Close - 291.86
The issue here is that you are passing data directly to p.line, rather than creating a ColumnDataSource and referencing the data from there. When you pass data directly to a glyph function, Bokeh has to create a ColumnDataSource for you, and since you have not told it what names to use for the columns, it can only use generic names like 'x' and 'y' (e.g. in this case). These generic names don't match up with the column names you configured for the hover tool. You can either:
Change your hover tool configuration to use the generic column names 'x' and 'y', or
Create a ColumnDataSource and pass that as the source for p.line.
Note that if you want additional columns to also be usable for hover tools, then you must use the second option, with the all columns you want to be available to the tool.
See the User's Guide chapter Providing Data for information on all of this.