1

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:

  1. 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

  2. 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')
bigreddot
  • 33,642
  • 5
  • 69
  • 122

0 Answers0