I've set some charts up in Bokeh, which I'm generally very happy with on desktop screens.
However, when I open them on a mobile screen I have several functionality issues that makes them really horrible to use:
The hover functionality won't work (or at least is very buggy). When I click certain lines nothing happens and other times it recognizes that I'm clicking a completely difference part of the screen
There is a huge white space after each chart, when I embed the HTML in a site.
Code for my charts below (I embed the resulting HTML on a website). Any advice?
Thanks!
### V3: Top Positive words
from bokeh.io import output_notebook, show, output_file, save, output
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, HoverTool, Legend
from bokeh.embed import file_html
from google.colab import files
from bokeh.io import curdoc # removes old html runs # https://github.com/bokeh/bokeh/issues/5681
curdoc().clear()
output_notebook()
use = pos_tailor
# set out axes
x = 'time_rnd'
y = 'count'
# Add annotations
# set colour palette
col_brew = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']
# map out figure
plot = figure(tools='', x_axis_type='datetime', sizing_mode='scale_both', toolbar_location='above')
# add HoverTool
hover_info = [('time', '@hover_time'),
('word', '@word'),
('count', '@count')]
hover = HoverTool(names=['use'],tooltips=hover_info,
mode='mouse',
show_arrow=True
)
plot.add_tools(hover)
# FORMAT
plot.title.text = 'Positive Deep Dive: Key Callouts'
plot.title.align = "center"
plot.axis.minor_tick_in = -3
plot.axis.minor_tick_out = 6
plot.xaxis.axis_label = 'Time'
plot.xaxis.axis_label_standoff = 15
plot.yaxis.axis_label = 'Count'
plot.yaxis.major_label_text_color = "orange"
plot.yaxis.axis_label_standoff = 15
### FOR LOOP Data
# https://stackoverflow.com/questions/46730609/position-the-legend-outside-the-plot-area-with-bokeh
legend_it = []
for i in use:
df_eng_word = df_eng_timeline[df_eng_timeline['word']==i]
source = ColumnDataSource(df_eng_word)
c = plot.line(x, y, line_width = 3,
line_alpha = 0.5, line_color=col_brew[use.tolist().index(i)],
hover_line_alpha = 1.0,
hover_line_color = 'grey',
#hover_line_color = col_brew[top_wds.index(i)],
source = source, name = 'use'
)
# materialize the plot
show(plot)
# output html file
output_file("v2_postail.html")
save(plot)
files.download('v2_postail.html')