We Keep Coding

Bokeh soo slow when updating plot in the browser

I am trying to create a dashboard in bokeh. I am fairly new to bokeh. The plots work alright but when I try to update it using bokeh server, it gets very slow, it takes more than a minute to update the plots.
I don't know if I'm doing anything wrong. Below is the code I'm using:
import pandas as pd
from bokeh.io import curdoc
from bokeh.plotting import figure
from bokeh.models import (
Div, SingleIntervalTicker, DatetimeTickFormatter, NumeralTickFormatter, DateRangeSlider, ColumnDataSource
)
from bokeh.layouts import layout
def _get_data(path, name):
df = pd.read_csv(path)
df.drop(columns='Province/State', inplace=True)
df.rename(columns={'Country/Region': 'country', 'Lat': 'lat', 'Long': 'long'}, inplace=True)
df = df.melt(var_name='date', value_name=name, id_vars=['country', 'lat', 'long'])
df = df.groupby(by=['country', 'date'], as_index=False, sort=False, dropna=False).sum()
df['id'] = df.country + df.date
df['date'] = pd.to_datetime(df['date'], format='%m/%d/%y', infer_datetime_format=True)
return df
def _merged_data():
confirmed = _get_data('data/time_series_covid19_confirmed_global.csv', 'confirmed')
deaths = _get_data('data/time_series_covid19_deaths_global.csv', 'deaths')
recovered = _get_data('data/time_series_covid19_recovered_global.csv', 'recovered')
merged = pd.merge(confirmed, deaths[['id', 'deaths']], on='id', validate='1:1')
merged = merged.merge(recovered[['id', 'recovered']], on='id', validate='1:1')
merged.drop(columns='id', inplace=True)
return merged
def line_fig(label, interval, **kwargs):
fig = figure(
plot_width=400,
plot_height=250,
background_fill_color='#222222',
y_axis_label=label,
border_fill_color='#222222',
outline_line_color='#222222',
**kwargs
)
# Fig
fig.toolbar_location = None
fig.tools = []
# Axis
fig.axis.major_label_text_color = '#bdbdbd'
fig.axis.major_tick_line_color = '#5c5c5c'
fig.axis.major_tick_in = 0
fig.axis.minor_tick_line_color = None
fig.axis.axis_label_text_color = '#bdbdbd'
fig.axis.axis_line_color = "#5c5c5c"
# X-Axis
fig.xgrid.grid_line_color = "#5c5c5c"
fig.xgrid.grid_line_width = 1
fig.xgrid.grid_line_alpha = 0.4
fig.xgrid.grid_line_dash = [3, 9]
fig.xaxis.formatter = DatetimeTickFormatter(months="%b %Y")
# Y-Axis
fig.ygrid.grid_line_color = "#5c5c5c"
fig.ygrid.grid_line_width = 1
fig.ygrid.grid_line_alpha = 0.4
fig.ygrid.grid_line_dash = [3, 9]
fig.yaxis.ticker = SingleIntervalTicker(interval=interval)
fig.yaxis.formatter = NumeralTickFormatter(format='0a')
return fig
source = _merged_data()
datacache = ColumnDataSource(source)
date = datacache.data['date']
start_date = date.min()
end_date = date.max()
date_slider = DateRangeSlider(start=start_date,
end=end_date,
value=(start_date, end_date),
step=1,
show_value=False,
default_size=400)
del date
def date_slider_callback(attr, old, new):
old = pd.to_datetime(date_slider.value_as_date[0], infer_datetime_format=True)
new = pd.to_datetime(date_slider.value_as_date[1], infer_datetime_format=True)
temp_data = source[(source['date'] >= old) & (source['date'] <= new)]
datacache.data = ColumnDataSource.from_df(temp_data)
date_slider.on_change('value', date_slider_callback)
confirmed_chart = make_chart('Confirmed Cases', 'date', 'confirmed', interval=10000000.00, color='#D83020')
death_chart = make_chart('Confirmed Deaths', 'date', 'deaths', interval=300000.00, color='#eaeaea')
recovery_chart = make_chart('Confirmed Recovery', 'date', 'recovered', interval=10000000.00, color='#35ac46')
lay_out = layout(
children=[
[date_slider],
[confirmed_chart],
[death_chart],
[recovery_chart]
]
)
document = curdoc()
document.add_root(lay_out)
Right now, I don't know what I'm doing wrong, maybe there's some kind of best practice I should follow, I don't really know what's making the plot so slow.

Filter Bokeh DataTable on plot selection

I am trying to filter by dataTable based on the plot selection. I am getting stuck on incorporating cb_obj
I produce a scatterplot where I will like to select any point. Once selected I want to populate the table with values where the selected y (or x) value is greater than the values in the second datasource i.e. the datasource for the DataTable.
from random import random
from bokeh.layouts import row
from bokeh.models import CustomJS, ColumnDataSource, TapTool,BoxZoomTool, Column
from bokeh.plotting import figure, output_file, show
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn
output_file("callback.html")
x = [random()*10 for x in range(10)]
y = [random()*10 for y in range(10)]
s1 = ColumnDataSource(data=dict(x=x, y=y))
p1 = figure(plot_width=400, plot_height=400, title="Select Here")
p1.add_tools(TapTool(), BoxZoomTool())
p1.circle('x', 'y', source=s1, alpha=10)
x1=range(1, 10)
y1=range(1, 10)
s2 = ColumnDataSource(data=dict(x=x1, y=y1))
C1 = [
TableColumn(field="x", title="x"),
TableColumn(field="y", title="y"),
]
f_data_table = DataTable(columns=C1,source=s2)
s3 = ColumnDataSource(data=dict(x=[],y=[]))
C2 = [
TableColumn(field="x", title="x"),
TableColumn(field="y", title="y"),
]
data_table = DataTable(columns=C2,source=s3)
s1.selected.js_on_change('indices', CustomJS(args=dict(s1=s1, s2=s2,s3=s3), code="""
var data = s1.data;
var f = cb_obj.indices;
var d2 = s2.data;
var d3 = s3.data;
d3['x']=[]
d3['y']=[]
for(i = 0; i < d2['y'].length;i++){
if(d2['y'][i]>f['y']){
d3['x'].push(d2['x'][i])
d3['y'].push(d2['y'][i])
}
}
s3.change.emit()
// trigger change on datatable
data_table.change.emit()
""")
)
layout = Column(p1, data_table, f_data_table )
show(layout)
EDIT:
Got it working
from random import random
from bokeh.layouts import row
from bokeh.models import CustomJS, ColumnDataSource, TapTool,BoxZoomTool, Column
from bokeh.plotting import figure, output_file, show
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn
output_file("callback.html")
x = [random()*10 for x in range(10)]
y = [random()*10 for y in range(10)]
s1 = ColumnDataSource(data=dict(x=x, y=y))
p1 = figure(plot_width=400, plot_height=400, title="Select Here")
p1.add_tools(TapTool(), BoxZoomTool())
p1.circle('x', 'y', source=s1, alpha=10)
x1=range(1, 10)
y1=range(1, 10)
s2 = ColumnDataSource(data=dict(x=x1, y=y1))
C1 = [
TableColumn(field="x", title="x"),
TableColumn(field="y", title="y"),
]
f_data_table = DataTable(columns=C1,source=s2)
s3 = ColumnDataSource(data=dict(x=[],y=[]))
C2 = [
TableColumn(field="x", title="x"),
TableColumn(field="y", title="y"),
]
data_table = DataTable(columns=C2,source=s3)
s1.selected.js_on_change('indices', CustomJS(args=dict(s1=s1, s2=s2,s3=s3), code="""
var data = s1.data;
var f = cb_obj.indices;
var d2 = s2.data;
var d3 = s3.data;
d3['x']=[]
d3['y']=[]
for (var j = 0; j < f.length; j++) {
for(i = 0; i < d2['y'].length;i++){
if(d2['y'][i]>data['y'][f] && d2['x'][i]>data['x'][f]){
d3['x'].push(d2['y'][i])
d3['y'].push(d2['y'][i])
}
}
}
s3.change.emit()
// trigger change on datatable
data_table.change.emit()
""")
)
layout = Column(p1, data_table, f_data_table )
show(layout)

Bokeh how to get GlyphRenderer for Annotation

With Bokeh, how do I get a handle to the Renderer (or GlyphRenderer) for an Annotation? Is this possible?
I would like to be able to toggle a Band (which is an Annotation) on and off with an interactive legend, so I need to be able to pass a list of Renderers to the LegendItem constructor.
This code:
maxline = fig.line(x='Date', y=stn_max, line_width=0.5, legend=stn_max, name="{}_line".format(stn_max), color=stn_color, alpha=0.75, source=source)
minline = fig.line(x='Date', y=stn_min, line_width=0.5, legend=stn_min, name="{}_line".format(stn_min), color=stn_color, alpha=0.75, source=source)
band = bkm.Band(base='Date', lower=stn_min, upper=stn_max, fill_alpha=0.50, line_width=0.5, fill_color=stn_color, source=source)
bkm.LegendItem(label=stn, renderers=[maxline, minline, band])
Produces this error
...
ValueError: expected an element of List(Instance(GlyphRenderer)), got seq with invalid items [Band(id='1091', ...)]

For LegendItem only instances of GlyphRenderer can be passed to its renderers attribute and Band is not based on GlyphRenderer so it gives error. In the code below the Band visibility is being toggled by means of a callback:
from bokeh.plotting import figure, show
from bokeh.models import Band, ColumnDataSource, Legend, LegendItem, CustomJS
import pandas as pd
import numpy as np
x = np.random.random(2500) * 140 - 20
y = np.random.normal(size = 2500) * 2 + 5
df = pd.DataFrame(data = dict(x = x, y = y)).sort_values(by = "x")
sem = lambda x: x.std() / np.sqrt(x.size)
df2 = df.y.rolling(window = 100).agg({"y_mean": np.mean, "y_std": np.std, "y_sem": sem})
df2 = df2.fillna(method = 'bfill')
df = pd.concat([df, df2], axis = 1)
df['lower'] = df.y_mean - df.y_std
df['upper'] = df.y_mean + df.y_std
source = ColumnDataSource(df.reset_index())
p = figure(tools = "pan,wheel_zoom,box_zoom,reset,save")
scatter = p.scatter(x = 'x', y = 'y', line_color = None, fill_alpha = 0.3, size = 5, source = source)
band = Band(base = 'x', lower = 'lower', upper = 'upper', source = source)
p.add_layout(band)
p.title.text = "Rolling Standard Deviation"
p.xaxis.axis_label = 'X'
p.yaxis.axis_label = 'Y'
callback = CustomJS(args = dict(band = band), code = """
if (band.visible == false)
band.visible = true;
else
band.visible = false; """)
legend = Legend(items = [ LegendItem(label = "x", renderers = [scatter, band.source.selection_policy]) ])
legend.click_policy = 'hide'
scatter.js_on_change('visible', callback)
p.add_layout(legend)
show(p)
Result:

bokeh hover multiline with datetime axis

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.

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')

How to update Pretext in Bokeh with a Select tool

I have a bokeh plot that updates my plot through a select tool. The select tool contains subjects that update the plot where the values are x='Polarity'and y='Subjectivity'.
Here is a dummy data for what I want:
import pandas as pd
import random
list_type = ['All', 'Compliment', 'Sport', 'Remaining', 'Finance', 'Infrastructure', 'Complaint', 'Authority',
'Danger', 'Health', 'English']
df = pd.concat([pd.DataFrame({'Subject' : [list_type[i] for t in range(110)],
'Polarity' : [random.random() for t in range(110)],
'Subjectivity' : [random.random() for t in range(110)]}) for i in range(len(list_type))], axis=0)
My code for updating the plot looks like this:
options = []
options.append('All')
options.extend(df['Subject'].unique().tolist())
source = ColumnDataSource(df)
p = figure()
r = p.circle(x='Polarity', y='Subjectivity', source = source)
select = Select(title="Subject", options=options, value="All")
output_notebook()
def update_plot(attr, old, new):
if select.value=="All":
df_filter = df.copy()
else:
df_filter = df[df['Subject']==select.value]
source1 = ColumnDataSource(df_filter)
r.data_source.data = source1.data
select.on_change('value', update_plot)
layout = column(row(select, width=400), p)
#show(layout)
curdoc().add_root(layout)
I want to add a 'Pretext' that has a df.describe(), that can update with the plot through the select tool. I tried this by adding these codes but it displays nothing:
stats = PreText(text='', width=500)
t1 = select.value
def update_stats(df, t1):
stats.text = str(df[[t1, select.value+'_returns']].describe())
select.on_change('value', update_plot, update_stats)
layout = column(row(select, width=400), p, stats)
curdoc().add_root(layout)
show(layout)
Anyone know a solution? Thanks!

You don't need two separate function for that, you can just change your original function update_plot to add statement to change the text for PreText as stats.text = str(df_filter.describe()). The function will look as below -
def update_plot(attr, old, new):
if select.value=="All":
df_filter = df.copy()
else:
df_filter = df[df['Subject']==select.value]
source1 = ColumnDataSource(df_filter)
r.data_source.data = source1.data
stats.text = str(df_filter.describe())
Entire code
from bokeh.models.widgets import Select, PreText
from bokeh.layouts import column, row
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure, curdoc
from bokeh.plotting import figure, show
import pandas as pd
import random
list_type = ['All', 'Compliment', 'Sport', 'Remaining', 'Finance', 'Infrastructure', 'Complaint', 'Authority',
'Danger', 'Health', 'English']
df = pd.concat([pd.DataFrame({'Subject' : [list_type[i] for t in range(110)],
'Polarity' : [random.random() for t in range(110)],
'Subjectivity' : [random.random() for t in range(110)]}) for i in range(len(list_type))], axis=0)
options = []
options.append('All')
options.extend(df['Subject'].unique().tolist())
source = ColumnDataSource(df)
p = figure()
r = p.circle(x='Polarity', y='Subjectivity', source = source)
select = Select(title="Subject", options=options, value="All")
#output_notebook()
stats = PreText(text=str(df.describe()), width=500)
def update_plot(attr, old, new):
if select.value=="All":
df_filter = df.copy()
else:
df_filter = df[df['Subject']==select.value]
source1 = ColumnDataSource(df_filter)
r.data_source.data = source1.data
stats.text = str(df_filter.describe())
select.on_change('value', update_plot)
layout = column(row(select, width=400), p, stats)
#show(layout)
curdoc().add_root(layout)