Related
I want to create a visualization with CheckboxGroup, which shows the line of the currency in the graph if the checkbox of this currency is activated. In addition i want one Button 'Select all' and one 'Select none' to select all or none currency at once.
By now, I have this code but I get the following error:
unexpected attribute 'checkbox' to CustomJS, possible attributes are args, code, js_event_callbacks, js_property_callbacks, name, subscribed_events or tags
I would appreciate a check of my code and some help. Thank you
from bokeh.io import output_file, show, save
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, HoverTool, FactorRange, CheckboxGroup, CustomJS, Button
from bokeh.layouts import row, column
...
args = []
code = "active = cb_obj.active;"
for c in range(len(currencies)):
line = p.line(x='dates', y=currencies[c], line_width=2, alpha=1, name=currencies[c], legend_label=currencies[c], source=source)
args += [('line'+str(c), line)]
code += "line{}.visible = active.includes({});".format(c, c)
...
checkbox_group = CheckboxGroup(labels=currencies, active=list(range(len(currencies))))
checkbox_group.callback = CustomJS(args={key:value for key,value in args}, checkbox=checkbox_group, code=code)
def callback_button_on():
checkbox_group.active = list(range(len(currencies)))
def callback_button_off():
checkbox_group.active = []
select_all = Button(label='Select all')
select_all.on_click(callback_button_on)
select_none = Button(label='Select none')
select_none.on_click(callback_button_off)
group = column(select_all, select_none, checkbox_group)
show(row(group, p))
output_file("Daily_Returns.html")
A CustomJS callback does not accept arbitrary arguments, but all bokeh models that should be available in the javascript code must be part of the args dictionary. Simply add the checkbox group into it:
args = []
args.append(("checkbox", checkboxgroup))
code = "active = cb_obj.active;"
...
checkbox_group.callback = CustomJS(args={key:value for key,value in args}, code=code)
or if your code has no explicit mention of the checkboxgroup (i tonly uses cb_obj) you can also just not pass the checkbox to the CustomJS callback.
This code works for Boekh v2.1.1
There were a few issues with your code:
Callback data is only allowed inside args dictionary
In JS you need to always use var for variable declaration => var active = cb_obj.active
Your Python callbacks for buttons won't work in a stand-alone HTML page. Python callbacks only work in a server app. For your stand-alone HTML page use only JS callbacks => js_on_click.
from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, CheckboxGroup, CustomJS, Button
from bokeh.layouts import row, column
from datetime import datetime, timedelta
currencies = ['EUR', 'GBP']
data = {'dates': [datetime(2017,1,1) + timedelta(days=x) for x in range(0,3)], 'EUR': [1.3, 1.1, 1.3], 'GBP': [1.6, 1.7, 1.6]}
source = ColumnDataSource(data)
p = figure(x_axis_type="datetime")
checkbox_group = CheckboxGroup(labels=currencies, active=list(range(len(currencies))))
select_all = Button(label='Select all')
select_none = Button(label='Select none')
args = [('checkbox', checkbox_group)]
code = "var active = cb_obj.active;"
for c in range(len(currencies)):
line = p.line(x='dates', y=currencies[c], line_width=2, alpha=1, name=currencies[c], legend_label=currencies[c], source=source)
args += [('line'+str(c), line)]
code += "line{}.visible = active.includes({});".format(c, c)
checkbox_group.js_on_change('active', CustomJS(args={key:value for key,value in args}, code=code))
select_all.js_on_click(CustomJS(args={'checkbox_group': checkbox_group, 'currencies': currencies}, code="checkbox_group.active = Array.from(currencies, (x, i) => i);"))
select_none.js_on_click(CustomJS(args={'checkbox_group': checkbox_group}, code="checkbox_group.active = [];"))
group = column(select_all, select_none, checkbox_group)
show(row(group, p))
I need to assign a name to each plot in the same figure. I want to get this name of the top most plot upon hovering or tapping in the figure. For now I use a TextInput to show the name. Inside the CustomJS, what is the correct method to access the name of the plot? I googled around and couldn't find a document for what is inside the cb_obj or cb_data. Thank you for any help.
Sample code:
from bokeh.server.server import Server
from bokeh.plotting import figure, ColumnDataSource, show
from bokeh.layouts import column
from bokeh.models import Button, HoverTool, TapTool, TextInput, CustomJS
import numpy as np
def make_document(doc):
p = figure(match_aspect=True)
img1 = np.random.rand(9, 9)
img2= np.random.rand(9, 9)
p.image(image=[img1], x=0, y=0,
dw=img1.shape[0], dh=img1.shape[1],
palette="Greys256", name='image1')
p.image(image=[img2], x=5.5, y=5.5,
dw=img2.shape[0], dh=img2.shape[1],
palette="Greys256", name='image2')
text_hover = TextInput(title='', value='', disabled=True)
callback_hover = CustomJS(args=dict(text_hover=text_hover), code="""
text_hover.value = cb_obj['geometry']['name'];
""") # what should be used here?
hover_tool = HoverTool(callback=callback_hover, tooltips=None)
p.add_tools(hover_tool)
doc.add_root(column([p, text_hover], sizing_mode='stretch_both'))
apps = {'/': make_document}
server = Server(apps)
server.start()
server.io_loop.add_callback(server.show, "/")
try:
server.io_loop.start()
except KeyboardInterrupt:
print('keyboard interruption')
print('Done')
I noticed there exists a tags argument, it can be accessed in CustomJS, but how?
tags (List ( Any )) –
An optional list of arbitrary, user-supplied values to attach to this
model.
This data can be useful when querying the document to retrieve
specific Bokeh models
Or simply a convenient way to attach any necessary metadata to a model
that can be accessed by CustomJS callbacks, etc.
By consulting multiple sources, got a temporary solution:
from bokeh.plotting import figure, ColumnDataSource, show
from bokeh.models import HoverTool, CustomJS
import numpy as np
img1 = np.random.rand(9, 9)
img2= np.random.rand(9, 9)
source = ColumnDataSource(dict(image=[img1, img2],
name=['image1', 'image2'],
x=[0, 5.5],
y=[0, 5.5],
dw=[img1.shape[0], img2.shape[0]],
dh=[img1.shape[1], img2.shape[0]]))
p = figure(match_aspect=True)
render =p.image(source=source, image='image', x='x', y='y', dw='dw', dh='dh', name='name', palette="Greys256")
callback = CustomJS(code="""
var tooltips = document.getElementsByClassName("bk-tooltip");
for (var i = 0, len = tooltips.length; i < len; i ++) {
tooltips[i].style.top = ""; // unset what bokeh.js sets
tooltips[i].style.left = "";
tooltips[i].style.top = "0vh";
tooltips[i].style.left = "4vh";
}
""")
hover = HoverTool(renderers=[render], callback=callback)
hover.tooltips = """
<style>
.bk-tooltip>div:not(:last-child) {display:none;}
</style>
#name
"""
p.add_tools(hover)
show(p)
You just need to access p.title.text:
from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import TextInput, CustomJS, HoverTool
from bokeh.plotting import figure
p = figure(title="Hello there")
p.circle(0, 0)
text_hover = TextInput(title='', value='', disabled=True)
callback_hover = CustomJS(args=dict(text_hover=text_hover, plot=p),
code="text_hover.value = plot.title.text;")
p.add_tools(HoverTool(callback=callback_hover, tooltips=None))
show(column([p, text_hover]))
I'm putting together a bokeh server to collect multiple streams of data, and provide a live plot of whichever channel the user selects in a MultiSelect menu. I have the streaming bit working, but I'm not sure how to select which stream is displayed in the figure that I've added to the layout.
I've tried using curdoc().remove_root() to remove the current layout and then add a new one, but that just kills the app and the new layout doesn't show up. I've also tried to simply update the figure, but that also just kills the app.
from bokeh.layouts import column
from bokeh.plotting import figure,curdoc
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import MultiSelect
def change_plot(attr,old,new):
global model,selector,p,source
curdoc().remove_root(mode)
p = figure()
p.circle(x=new+'_x',y=new+'_y',source=source)
model = column(selector,p)
curdoc().add_root(model)
def update_plot():
newdata = {}
for i in range(10):
# the following two lines would nominally provide real data
newdata[str(i)+'_x'] = 1
newdata[str(i)+'_y'] = 1
source.stream(newdata,100)
selector = MultiSelect(title='Options',value=[str(i) for i in range(10)])
selector.on_change('value',change_plot)
data = {}
for i in range(10):
data[str(i)+'_x'] = 0
data[str(i)+'_y'] = 0
source = ColumnDataSource(data=data)
p = figure()
p.circle(x='0_x',y='0_y',source=source)
curdoc().add_root(model)
curdoc().add_periodic_callback(update_plot,100)
I run this code using bokeh serve --show app.py, and I would've expected it to create a new plot every time the MultiSelect is updated, but instead, it just crashes somewhere in the change_plot callback.
In this code selecting a line in MultiSelect adds a new line if it was not in the canvas and starts streaming or just toggles streaming if the line already was in the canvas. Code works for Bokeh v1.0.4. Run with bokeh serve --show app.py
from bokeh.models import ColumnDataSource, MultiSelect, Column
from bokeh.plotting import figure, curdoc
from datetime import datetime
from random import randint
from bokeh.palettes import Category10
lines = ['line_{}'.format(i) for i in range(10)]
data = [{'time':[], item:[]} for item in lines]
sources = [ColumnDataSource(item) for item in data]
plot = figure(plot_width = 1200, x_axis_type = 'datetime')
def add_line(attr, old, new):
for line in new:
if not plot.select_one({"name": line}):
index = lines.index(line)
plot.line(x = 'time', y = line, color = Category10[10][index], name = line, source = sources[index])
multiselect = MultiSelect(title = 'Options', options = [(i, i) for i in lines], value = [''])
multiselect.on_change('value', add_line)
def update():
for line in lines:
if line in multiselect.value:
if plot.select({"name": line}):
sources[lines.index(line)].stream(eval('dict(time = [datetime.now()], ' + line + ' = [randint(5, 10)])'))
curdoc().add_root(Column(plot, multiselect))
curdoc().add_periodic_callback(update, 1000)
Result:
I'm trying to create a widget filter (made up of TextInput and MultiSelect) that is replicated on two different Bokeh Tabs. The desired functionality is that filtering results should be preserved between tabs, regardless of which filter receives the text to filter off of.
The code below(it is working code) builds the Filter widget which is instantiated as filter1 and filter2. The callback is the update function which does the actual filtering and updates the MultiSelect part of the filter.
from bokeh.io import curdoc
from bokeh.layouts import column, widgetbox, row, layout, gridplot
from bokeh.models import Slider, Select, TextInput, MultiSelect
from bokeh.models.widgets import Panel, Tabs
import pandas as pd
from functools import partial
df = pd.DataFrame(["apples", "oranges", "grapes"], columns=["fruits"])
multiselect = None
input_box = None
def update(widget, attr, old, new):
print("df['fruits']: {}".format(list(df['fruits'])))
print("{} : {} changed: Old [ {} ] -> New [ {} ]".format(widget, attr, old, new))
if widget == 'input':
col_data = list(df[df['fruits'].str.contains(new)]['fruits'])
print("col_date: {}".format(col_data))
multiselect.update(options = sorted(list(col_data)))
def init():
global multiselect
multiselect = MultiSelect(title = 'multiselect',
name = 'multiselect',
value = [],
options = list(df["fruits"]))
multiselect.on_change('value', partial(update, multiselect.name))
global input_box
input_box = TextInput(title = 'input',
name ='input',
value='Enter you choice')
input_box.on_change('value', partial(update, input_box.name))
class Filter:
def __init__(self):
self.multiselect = multiselect
self.input_box = input_box
self.widget = widgetbox(self.input_box, self.multiselect)
init()
filter1 = Filter().widget
filter2 = Filter().widget
curdoc().add_root(row(filter1, filter2))
The code above produces/assembles the widget as shown here:
Also, the functionality of the two mirrored filters is as desired; when text is entered in one of the boxes, the results are displayed on both filters.
Now, and here is where I need help, I want the same filters with the same functionality but I need them in two different tabs; one filter in one tab and the other filter in the other tab.
The code used to build the two tabs structure is:
p1 = Panel(child = filter1, title = "Panel1")
p2 = Panel(child = filter2, title = "Panel2")
tabs = Tabs(tabs=[ p1, p2 ])
curdoc().add_root(layout(tabs))
On the results side, the code preserves the desired functionality but filters are displayed on the same page. More than that, panels/tabs are not even being built.
Any idea what's missing? (If you want to play with the code it should work right off the bat if you have bokeh installed.)
I do not think your example should even build a document, both your textinputs and multiselect models have the same id, which may be why the display of tabs gets messed up.
My solution is similar to HYRY's, but with a more general function to share attributes using two different things:
model.properties_with_values()
Can be used with any bokeh model and returns a dictionary of all the attribute:value pairs of the model. It's mostly useful in ipython to explore bokeh objects and debug
Document.select({'type':model_type})
Generator of all the widgets of the desired type in the document
Then I just filter out the widgets that do not share the same tags as the input widget, which would avoid "syncing" other inputs/multiselect not generated with box_maker(). I use tags because different models cannot have the same name.
When you change a TextInput value, it will change the associated Multiselect in the update function, but it will also change all the other TextInputs and trigger their update in the same way too. So each Input triggers update once and changes the options of their respective multiselect (and not multiplte times each because it's a "on_change" callback, if you give the same value for the new input it does not trigger).
For the Multiselect the first trigger of update will do the job, but since it changed the values of the other Multiselect it still triggers as many times as there are Multiselect widgets.
from bokeh.io import curdoc
from bokeh.layouts import widgetbox
from bokeh.models import TextInput, MultiSelect
from bokeh.models.widgets import Panel, Tabs
import pandas as pd
from functools import partial
df = pd.DataFrame(["apples", "oranges", "grapes"], columns=["fruits"])
def sync_attr(widget):
prop = widget.properties_with_values() # dictionary of attr:val pairs of the input widget
for elem in curdoc().select({'type':type(widget)}): # loop over widgets of the same type
if (elem!=widget) and (elem.tags==widget.tags): # filter out input widget and those with different tags
for key in prop: # loop over attributes
setattr(elem,key,prop[key]) # copy input properties
def update(attr,old,new,widget,other_widget):
print("\ndf['fruits']: {}".format(list(df['fruits'])))
print("{} : {} changed: Old [ {} ] -> New [ {} ]".format(str(widget),attr, old, new))
if type(widget)==TextInput:
col_data = list(df[df['fruits'].str.contains(new)]['fruits'])
print("col_date: {}".format(col_data))
other_widget.update(options = sorted(list(col_data)))
sync_attr(widget)
def box_maker():
multiselect = multiselect = MultiSelect(title = 'multiselect',tags=['in_box'],value = [],options = list(df["fruits"]))
input_box = TextInput(title = 'input',tags=['in_box'],value='Enter you choice')
multiselect.on_change('value',partial(update,widget=multiselect,other_widget=input_box))
input_box.on_change('value',partial(update,widget=input_box,other_widget=multiselect))
return widgetbox(input_box, multiselect)
box_list = [box_maker() for i in range(2)]
tabs = [Panel(child=box,title="Panel{}".format(i)) for i,box in enumerate(box_list)]
tabs = Tabs(tabs=tabs)
curdoc().add_root(tabs)
Note that the highlighting of the options in multiselect may not look consistent, but that just seems to be visual as the values/options of each of them are changing correctly.
But unless you are particularly attached to the layout look when you put the widgets inside the panels, you could just put one input and multiselect outside, and write their callbacks to deal with what will be in the different panels.
You can't use the same widget model to create multiple views. You can create new widgets in every tabs and link the value:
from bokeh.io import curdoc
from bokeh.layouts import column, widgetbox, row, layout, gridplot
from bokeh.models import Slider, Select, TextInput, MultiSelect, CustomJS
from bokeh.models.widgets import Panel, Tabs
import pandas as pd
from functools import partial
df = pd.DataFrame(["apples", "oranges", "grapes"], columns=["fruits"])
class Filter:
def __init__(self):
self.multiselect = MultiSelect(title = 'multiselect',
name = 'multiselect',
value = [],
options = list(df["fruits"]))
self.multiselect.on_change('value', self.selection_changed)
self.input_box = TextInput(title = 'input',
name ='input',
value='Enter you choice')
self.input_box.on_change('value', self.input_box_updated)
self.widget = widgetbox(self.input_box, self.multiselect)
def input_box_updated(self, attr, old, new):
print(attr, old, new)
col_data = list(df[df['fruits'].str.contains(new)]['fruits'])
self.multiselect.update(options = sorted(list(col_data)))
def selection_changed(self, attr, old, new):
print(new)
filter1 = Filter()
filter2 = Filter()
def link_property(property_name, *widgets):
wb = widgetbox(*widgets)
wb.tags = [property_name, 0]
def callback(widgets=wb):
if widgets.tags[1] != 0:
return
widgets.tags[1] = 1
for widget in widgets.children:
widget[widgets.tags[0]] = cb_obj.value
widgets.tags[1] = 0
jscallback = CustomJS.from_py_func(callback)
for widget in widgets:
widget.js_on_change(property_name, jscallback)
link_property("value", filter1.input_box, filter2.input_box)
link_property("value", filter1.multiselect, filter2.multiselect)
p1 = Panel(child = filter1.widget, title = "Panel1")
p2 = Panel(child = filter2.widget, title = "Panel2")
tabs = Tabs(tabs=[ p1, p2 ])
curdoc().add_root(layout(tabs))
It seems that there is a bug in MultiSelect that doesn't deselect previous items.
When I use a DataTable in my bokeh application, the plots on my page become decativated whenever I click inside the datatable. This happens with editable=True and editable=False.
The only way that I found to activate the plot again is to click the "Reset" tool button.
Questions:
Am I doing something wrong in my Bokeh app?
Has anyone else encountered this, and found a workaround? (a Javascript workaround, perhaps?)
Screen shot (notice the deactivated color in the plot):
The complete bokeh app is below, run with bokeh serve --show filename.py:
from datetime import datetime, timedelta
import numpy as np
import pandas as pd
import bokeh
from bokeh.layouts import widgetbox, row, layout
from bokeh.models import ColumnDataSource, Button, DataTable, TableColumn, Paragraph
from bokeh.models.widgets.tables import DateFormatter, StringEditor
from bokeh.plotting import curdoc, figure
def create_dataframe(number_of_series, number_of_values):
t0 = datetime(2017, 1, 1)
data = {
"timestamp": [t0 + (i * timedelta(seconds=3600*2)) for i in range(number_of_values)]
}
data.update({
"col{}".format(i): np.random.rand(number_of_values)
for i in range(number_of_series)
})
return pd.DataFrame(data).set_index("timestamp")
source = ColumnDataSource(create_dataframe(10, 1000))
btn = Button(label="Click Me")
my_figure = figure(x_axis_type="datetime")
my_figure.line(y="col0", x="timestamp", source=source)
data_table = DataTable(editable=True, source=source, columns=[
TableColumn(title="Timestamp", field="timestamp", formatter=DateFormatter(format="%Y-%m-%d %H:%M:%S"), editor=StringEditor()),
TableColumn(title="col0", field="col0")
])
page_layout = layout([
[widgetbox(Paragraph(text="Bokeh version: {}".format(bokeh.__version__)))],
[widgetbox(btn), my_figure],
[data_table]
])
curdoc().add_root(page_layout)
This is actually the intended behaviour behind using a bokeh ColumnDataSource. When you select a row in the table, that is registered in the data source selected attribute. see
https://docs.bokeh.org/en/latest/docs/user_guide/data.html#columndatasource
You cant notice this at first because there are a large number of data points on the plot - any one isnt visible when selected.Try shift click and select multiple rows, and you will see segments of the plot turn dark blue - corresponding to those rows.
The simplest way to prevent the behaviour is to use seperate data sources.
If you wanted them to be the same, you would have to restore the source.selected dictionary each time it is updated, which seems pointless.
from datetime import datetime, timedelta
import numpy as np
import pandas as pd
import bokeh
from bokeh.layouts import widgetbox, row, layout
from bokeh.models import ColumnDataSource, Button, DataTable, TableColumn, Paragraph
from bokeh.models.widgets.tables import DateFormatter, StringEditor
from bokeh.plotting import curdoc, figure
def create_dataframe(number_of_series, number_of_values):
t0 = datetime(2017, 1, 1)
data = {
"timestamp": [t0 + (i * timedelta(seconds=3600*2)) for i in range(number_of_values)]
}
data.update({
"col{}".format(i): np.random.rand(number_of_values)
for i in range(number_of_series)
})
return pd.DataFrame(data).set_index("timestamp")
source = ColumnDataSource(create_dataframe(10, 1000))
sourcetable = ColumnDataSource(create_dataframe(10, 1000))
btn = Button(label="Click Me")
my_figure = figure(x_axis_type="datetime")
my_figure.line(y="col0", x="timestamp", source=source)
data_table = DataTable(editable=True, reorderable=False, source=sourcetable, columns=[
TableColumn(title="Timestamp", field="timestamp", formatter=DateFormatter(format="%Y-%m-%d %H:%M:%S"), editor=StringEditor()),
TableColumn(title="col0", field="col0")
])
page_layout = layout([
[widgetbox(Paragraph(text="Bokeh version: {}".format(bokeh.__version__)))],
[widgetbox(btn), my_figure],
[data_table]
])
curdoc().add_root(page_layout)