bokeh hover multiline with datetime axis

Question

I want to create a multiline Bokeh plot with datetime axis and a hover tool that shows the datetime of the data point. This should be supported and I have tried to obtain the intended behaviour in two ways:

• Use hover.formatters to format the x-value. This has no effect on the plot.
• Add a description variable with the correctly formatted date/time values. This results in a hover tool where all date/time values are displayed in a list for each point.

I have included a smaller example of my code that illustrates my approach and the result. It is used in conjunction with a checkboxgroup that updates the data. This is why a new ColumnDataSource is made from the dataframe.

import pandas as pd
import numpy as np
from bokeh.io import output_file, show
from bokeh.plotting import figure
from bokeh.models import HoverTool, ColumnDataSource
from bokeh.palettes import Spectral4
from bokeh.layouts import column

#output_file("demo.html")

available_quant = ["LACTIC_ACID", "GLUCOSE", "XYLOSE", "FORMIC_ACID"]
quant_legend = ["Lactic acid", "Glucose", "Xylose", "Formic acid"]

Create a dataframe with 4 quantities and the time

datelist = pd.date_range(end = pd.datetime.today(), periods=100).tolist()
desc = datelist
for i, date in enumerate(datelist):
    desc[i] = str(date)
RT_x = np.linspace(-5, 5, num=100)
lactic = RT_x**2
data = {'time': datelist, 'desc': desc, 'LACTIC_ACID': RT_x**2 + 2, 'GLUCOSE': RT_x**2, 'XYLOSE': RT_x**2 - 2, 'FORMIC_ACID': RT_x**2 - 4}
df = pd.DataFrame.from_dict(data)
df['time'] = pd.to_datetime(df['time'], format = "%Y-%m-%d %H:%M:%S")

Copy the relevant data to a columndatasource

substance_colors = Spectral4
quant_to_plot = available_quant
xs = []
ys = []
xsprint = []
colors = []
labels = []

for i, substance in enumerate(quant_to_plot):
    xs.append(list(df['time']))
    ys.append(list(df[substance]))
    xsprint.append(list(df['desc']))
    index = available_quant.index(substance)
    colors.append(substance_colors[index])
    labels.append(quant_legend[index])

new_src = ColumnDataSource(data={'x': xs, 'y': ys, 'desc': xsprint, 'color': colors, 'label': labels})

Make the first plot using hover.formatters

p = figure(plot_width=800, plot_height=400, x_axis_type="datetime", title = 'Demo', x_axis_label = 'Time', y_axis_label = 'c [g/mL]')

p.multi_line('x','y', color = 'color', legend = 'label', source = new_src)

hover = HoverTool(tooltips=[('Type','@label'), 
                            ('Time','$x'), 
                            ('Conc','$y')], 
                  formatters={'Time': 'datetime'}, 
                  mode = 'mouse',
                 line_policy='next')
p.add_tools(hover)
p.legend.location = "top_left"
p.legend.orientation = "horizontal"

Make second plot using description variable

p2 = figure(plot_width=800, plot_height=400, x_axis_type="datetime", title = 'Demo', x_axis_label = 'Time', y_axis_label = 'c [g/mL]')

p2.multi_line('x','y', color = 'color', legend = 'label', source = new_src)

hover = HoverTool(tooltips=[('Type','@label'), 
                            ('Time','@desc'), 
                            ('Conc','$y')], 
                  mode = 'mouse',
                 line_policy='nearest')
p2.add_tools(hover) 

mylayout = column(p, p2)
show(mylayout)

Am I missing something trivial? I am running Bokeh 0.13.0 and python 3.6.4.

Answer 1

The first approach works with the following modification of the hovertool:

hover = HoverTool(tooltips=[('Type','@label'), 
                        ('Time','$x{%F}'), 
                        ('Conc','$y')], 
              formatters={'$x': 'datetime'},
              mode = 'mouse',
             line_policy='nearest')