I have tried changing multiple parameters(arguments) but this doesn't work.
The bokeh version is 1.3.4.
from bokeh.layouts import column
from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource, Slider, Select
from bokeh.plotting import Figure, output_notebook, show
import numpy as np
a = 20
bokeh_tools = "pan,wheel_zoom"
output_notebook()
plot_2s = ColumnDataSource(data=dict(x=[1, 2, 3], y=[1, 2, 3]))
plot_3s = ColumnDataSource(data=dict(x=[3, 4, 5], y=[1, 2, 3]))
line_source = ColumnDataSource(data=dict(x=[1, 2, 3], y=[1, 2, 3]))
plot_1 = figure(x_axis_type="datetime", plot_width=800, tools=bokeh_tools, title="plot_1")
plot_1.line(x = 'x', y='y', source=plot_2s)
plot_2 = figure(x_axis_type="datetime", plot_width=800, tools=bokeh_tools, title="plot_2")
plot_2.line(x='x', y='y', source=line_source)
select = Select(title="SELECT", options=["val1", "val2"])
column = column(select, plot_2)
show(column)
select.callback = CustomJS(args={"cds2": plot_2s, "cds3": plot_3s, "ls": line_source}, code="""
if(cb_obj.value === "val1"){
ls.data = cds2.data;
}else if(cb_obj.value === "val2"){
ls.data = cds3.data;
}
ls.change.emit();
""")
There are no error message the callback is not implemented
You callback is never executed, because it is never added to the output. As soon as you call show the HTML output is generated and displayed. Anything after that point is effectively a no-op, and does not exist as far as the output is concerned. Typically show should be called last.
Related
I'm trying to implement a python callback function for a RangeSlider. The Slider Value should tell which Index a IndexFilter should get for display.
For example: If rangeslider.value is (3, 25) my plots should only contain/view data with the Index from 3 to 25.
from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource, GMapOptions, CustomJS, CDSView, IndexFilter
from bokeh.plotting import gmap, ColumnDataSource, figure
from bokeh.layouts import column, row
from bokeh.models.widgets import RangeSlider
import numpy as np
def slider_callback(attr, old, new):
p.view = CDSView(source=source, filters=[IndexFilter(np.arange(new.value[0], new.value[1]))])
v.view = CDSView(source=source, filters=[IndexFilter(np.arange(new.value[0], new.value[1]))])
# data set
lon = [[48.7886, 48.7887, 48.7888, 48.7889, 48.789],
[48.7876, 48.7877, 48.78878, 48.7879, 48.787],
[48.7866, 48.7867, 48.7868, 48.7869, 48.786],
[48.7856, 48.7857, 48.7858, 48.7859, 48.785],
[48.7846, 48.7847, 48.7848, 48.7849, 48.784]]
lat = [[8.92, 8.921, 8.922, 8.923, 8.924],
[8.91, 8.911, 8.912, 8.913, 8.914],
[8.90, 8.901, 8.902, 8.903, 8.904],
[8.89, 8.891, 8.892, 8.893, 8.894],
[8.88, 8.881, 8.882, 8.883, 8.884]]
time = [0, 1, 2, 3, 4, 5]
velocity = [23, 24, 25, 24, 20]
lenght_dataset = len(lon)
# define source and map
source = ColumnDataSource(data = {'x': lon, 'y': lat, 't': time, 'v': velocity})
view = CDSView(source=source, filters=[IndexFilter(np.arange(0, lenght_dataset))])
map_options = GMapOptions(lat=48.7886, lng=8.92, map_type="satellite", zoom=13)
p = gmap("MY_API_KEY", map_options, title="Trajectory Map")
v = figure(plot_width=400, plot_height=400, title="Velocity")
# plot lines on map
p.multi_line('y', 'x', view=view, source=source, line_width=1)
v.line('t', 'v', view=view, source=source, line_width=3)
# slider to limit plotted data
range_slider = RangeSlider(title="Data Range Slider: ", start=0, end=lenght_dataset, value=(0, lenght_dataset), step=1)
range_slider.on_change('value', slider_callback)
# Layout to plot and output
layout = row(column(p, range_slider),
column(v)
)
output_file("diag_plot_bike_data.html")
show(layout)
Some notes:
time is longer than the rest of the columns - you will receive a warning about it. In my code below, I just removed its last element
view with filters in general should not be used for continuous glyphs like lines (v.line in particular - multi_line is fine). You will receive a warning about it. But if the indices in IndexFilter are always continuous, then you should be fine. Either way, you can use the segment glyph to avoid the warning
In your callback, you're trying to set view on the figures - views only exist on glyph renderers
In general, you don't want to recreate views, you want to recreate as few Bokeh models as possible. Ideally, you would have to just change the indices field of the filter. But there's some missing wiring in Bokeh, so you will have to set the filters field of the view, as below
new argument of Python callbacks receives the new value for the attribute passed as the first parameter to the corresponding on_change call. In this case, it will be a tuple, so instead of new.value[0] you should use new[0]
Since you've decided to use Python callbacks, you can no longer use show and have a static HTML file - you will have to use curdoc().add_root and bokeh serve. The UI needs that Python code to run somewhere in runtime
When changing the slider values, you will notice that the separate segments of multi_line will be joined together - it's a bug and I just created https://github.com/bokeh/bokeh/issues/10589 for it
Here's a working example:
from bokeh.io import curdoc
from bokeh.layouts import column, row
from bokeh.models import GMapOptions, CDSView, IndexFilter
from bokeh.models.widgets import RangeSlider
from bokeh.plotting import gmap, ColumnDataSource, figure
lon = [[48.7886, 48.7887, 48.7888, 48.7889, 48.789],
[48.7876, 48.7877, 48.78878, 48.7879, 48.787],
[48.7866, 48.7867, 48.7868, 48.7869, 48.786],
[48.7856, 48.7857, 48.7858, 48.7859, 48.785],
[48.7846, 48.7847, 48.7848, 48.7849, 48.784]]
lat = [[8.92, 8.921, 8.922, 8.923, 8.924],
[8.91, 8.911, 8.912, 8.913, 8.914],
[8.90, 8.901, 8.902, 8.903, 8.904],
[8.89, 8.891, 8.892, 8.893, 8.894],
[8.88, 8.881, 8.882, 8.883, 8.884]]
time = [0, 1, 2, 3, 4]
velocity = [23, 24, 25, 24, 20]
lenght_dataset = len(lon)
# define source and map
source = ColumnDataSource(data={'x': lon, 'y': lat, 't': time, 'v': velocity})
view = CDSView(source=source, filters=[IndexFilter(list(range(lenght_dataset)))])
map_options = GMapOptions(lat=48.7886, lng=8.92, map_type="satellite", zoom=13)
p = gmap("API_KEY", map_options, title="Trajectory Map")
v = figure(plot_width=400, plot_height=400, title="Velocity")
p.multi_line('y', 'x', view=view, source=source, line_width=1)
v.line('t', 'v', view=view, source=source, line_width=3)
range_slider = RangeSlider(title="Data Range Slider: ", start=0, end=lenght_dataset, value=(0, lenght_dataset), step=1)
def slider_callback(attr, old, new):
view.filters = [IndexFilter(list(range(*new)))]
range_slider.on_change('value', slider_callback)
layout = row(column(p, range_slider), column(v))
curdoc().add_root(layout)
For my project I need to add and remove glpyhs and annotations in bokeh (line, multiline and arrows). I want to make it as interactive as possible. So in order to remove a glyph/annotation in want to select it with a mouse click and then e.g. delete it with a button. The minimal example would look like that:
import numpy as np
import random
from bokeh.plotting import figure, ColumnDataSource
from bokeh.models import Button, TapTool,Arrow,NormalHead
from bokeh.layouts import layout
from bokeh.application import Application
from bokeh.server.server import Server
from bokeh.application.handlers.function import FunctionHandler
plot = figure(plot_height=300, plot_width=600, x_range=(0, 8), y_range=(0, 11),
title="Testplot", tools='save, reset, tap')
Lay = layout(children=[])
#adds the glyphs/annotaions to figure
def Click_action():
x = np.array((random.randrange(1,10),random.randrange(1,10)))
y = np.array((random.randrange(1,10),random.randrange(1,10)))
source = ColumnDataSource(data=dict(x = x,
y = y))
arro = Arrow(end=NormalHead(size=5, fill_color="#C0392B"),
x_start=random.randrange(0,10),
y_start=random.randrange(0,10),
x_end=random.randrange(0,10),
y_end=random.randrange(0,10),
line_width=3,
line_color="#C0392B")
plot.multi_line(xs=[[1,5],[1,1],[3,3],[5,5]],ys=[[5,5],[5,1],[5,1],[5,1]], color='blue', selection_color='red' )
plot.add_layout(arro)
plot.line(x='x',y='y', source = source,selection_color='red')
def Click_delet():
""" Delete the selected Glyphs/Annotations"""
def make_document(doc):
btn1 = Button(label="Click", button_type="success")
btn2 = Button(label="Click_delet", button_type="success")
btn1.on_click(Click_action)
btn2.on_click(Click_delet)
Lay.children.append(plot)
Lay.children.append(btn1)
Lay.children.append(btn2)
doc.add_root(Lay)
if __name__ == '__main__':
bkapp = {'/': Application(FunctionHandler(make_document))}
server = Server(bkapp, port=5004)
server.start()
server.io_loop.add_callback(server.show, "/")
server.io_loop.start()
The problems I currently have are:
How can I select the arrow ?
How do I get all selected glyphs and annotations? (If possible without a CoustomJS callback since I do not know java that well)
Is it possible to select the multiline as one glyph?
I have already solved the issue how to delete lines and arrows from a plot. But I would need the value stored in plot.renders and plot.center in order to delete them and link them to different classes in my project.
Annotations are not interactive in Bokeh
See a minimal example below
No
But I would need the value stored in plot.renders and plot.center in order to delete them and link them to different classes in my project.
Ideally, your workflow should abstain from dynamically creating and removing Bokeh models, especially low-levels ones such as glyphs. If you need to remove a glyph and add a new one with new properties, consider just changing properties of the old glyph. Or maybe just clear the data of the old glyph to hide it.
from bokeh.io import curdoc
from bokeh.layouts import column
from bokeh.models import Button
from bokeh.plotting import figure, ColumnDataSource
line_ds = ColumnDataSource(dict(x=[0, 3, 7],
y=[1, 8, 2]))
multi_line_ds = ColumnDataSource(dict(xs=[[1, 5], [1, 1], [3, 3], [5, 5]],
ys=[[5, 5], [5, 1], [5, 1], [5, 1]]))
p = figure(x_range=(0, 8), y_range=(0, 11), tools='save, reset, tap')
p.line('x', 'y', source=line_ds, selection_color='red')
p.multi_line('xs', 'ys', source=multi_line_ds, color='blue', selection_color='red')
b = Button(label="Delete selected", button_type="success")
def delete_rows(ds, indices):
print(indices)
if indices:
print(ds.data)
ds.data = {k: [v for i, v in enumerate(vs) if i not in set(indices)]
for k, vs in ds.data.items()}
print(ds.data)
def delete_selected():
delete_rows(line_ds, line_ds.selected.line_indices)
delete_rows(multi_line_ds, multi_line_ds.selected.indices)
b.on_click(delete_selected)
curdoc().add_root(column(p, b))
I have the following problem when using bokeh's TapTool and DataTable together:
As soon as one dot is clicked (TapTool used), selections on the DataTable do no longer get represented in the plot anymore.
Here is the minimal example for a Jupyter Notebook:
from bokeh.plotting import show, output_notebook, figure
from bokeh.models import ColumnDataSource, OpenURL, TapTool
from bokeh.layouts import widgetbox, column
from bokeh.models.widgets import DataTable, TableColumn
source = ColumnDataSource(dict(
x=[1, 2, 3, 4, 5],
y=[6, 7, 2, 4, 5],
url=["http://www.stackoverflow.com"]*5))
p = figure(plot_width=400,
plot_height=400,
tools="tap,reset",
)
p.circle(source=source,
x="x",
y="y",
size=20,
color="navy",
alpha=0.5)
columns = [
TableColumn(field="x", title="X-Value"),
TableColumn(field="y", title="Y-Value"),
TableColumn(field="url", title="URL")
]
data_table = DataTable(source=source, columns=columns,
width=400, height=400)
url = "#url"
taptool = p.select(type=TapTool)
taptool.callback = OpenURL(url=url)
output_notebook()
show(column(p, widgetbox(data_table)))
Expected behaviour: Selections from the DataTable get represented in the plot like before clicking one dot.
Thank you all in advance.
Problem solved. This was an issue in bokeh 0.13
With anaconda I couldn't update to 1.0.1, so I created a new environment, where bokeh can be 1.0.1 an the problem no longer exists.
I would like to know if there is a way to add markers to multiline for bokeh. I can get the multiple lines but then p.circle() doesn't seem to work on list of lists. Here is a sample:
from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource
from bokeh.palettes import Spectral6, Spectral11
numlines = 2
mypalette = Spectral6[0:numlines]
data = {'x_values': [[1, 2, 3], [1,2,3]],
'y_values': [[1, 2, 3], [4 ,5, 6]], 'labels': ['a', 'b'], 'line_color': mypalette}
source = ColumnDataSource(data=data)
p = figure()
p.multi_line(xs='x_values', ys='y_values', line_color='line_color', source=source)
show(p)
As of Bokeh 0.13.0 there is not. You would need to call p.circle, p.square, etc. for each "sub" line in the multi-line.
I saw this example
from bokeh.models import ColumnDataSource, OpenURL, TapTool
from bokeh.plotting import figure, output_file, show
output_file("openurl.html")
p = figure(plot_width=400, plot_height=400,
tools="tap", title="Click the Dots")
source = ColumnDataSource(data=dict(
x=[1, 2, 3, 4, 5],
y=[2, 5, 8, 2, 7],
color=["navy", "orange", "olive", "firebrick", "gold"]
))
p.circle('x', 'y', color='color', size=20, source=source)
# use the "color" column of the CDS to complete the URL
# e.g. if the glyph at index 10 is selected, then #color
# will be replaced with source.data['color'][10]
url = "http://www.colors.commutercreative.com/#color/"
taptool = p.select(type=TapTool)
taptool.callback = OpenURL(url=url)
show(p)
I would like to do something similar, instead of opening the url, I would like to show some text on the right when i click on the circle related to that circle. And the text should change when I click on another circle.
I also saw this: https://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html#customjs-for-user-interaction-events but I couldn't change the mouse prints with some text based on the circle.
Thank you.
use CustomJS instead of OpenUrl
from bokeh.models import CustomJS
taptool.callback = CustomJS(code="""
var ind = cb_data.index['1d'].indices[0];
var color = cb_obj.source.data['color'][ind];
$('#div_id').text(color);
""")
more explanations see here JavaScript callback to get selected glyph index in Bokeh