Hello, I have created a CustomJS, whose output is something show in below image. Now I want to implement those CustomJS on my checkbox selection.Have a look over my code, hope it will give you clear idea what I am trying to accomplish.
from bokeh.io import curdoc
from bokeh.layouts import row, widgetbox, column
from bokeh.models import FreehandDrawTool, ColumnDataSource, Segment, CustomJS,
Line, MultiLine, BoxAnnotation, CheckboxGroup
from bokeh.plotting import figure
from bokeh.models import PolyDrawTool, PolyEditTool
p = figure(x_range=(0, 10), y_range=(0, 10), width=400, height=400,
title='Poly Edit Tool')
l1 = p.multi_line([], [], line_width =5, alpha= 0.4, color='red', line_dash = 'dashed')
draw_tool_l1 = PolyDrawTool(renderers=[l1], num_objects=3)
source= ColumnDataSource(data=dict(x=[], y=[]))
source2 = ColumnDataSource(data=dict( x=[], y=[], x1=[], y1=[]))
source3 = ColumnDataSource(data=dict( x=[], y=[], x1=[], y1=[]))
source6 = ColumnDataSource(data=dict( x=[], y=[], x1=[], y1=[]))
sourceBase =ColumnDataSource(data=dict( x=[], y=[], x1=[], y1=[]))
sourceMax = ColumnDataSource(data=dict( x=[], y=[], x1=[], y1=[]))
callback = CustomJS(args=dict(x_range = p.x_range,y_range = p.y_range,source=source, source2= source2, source3=source3, source6=source6, sourceBase = sourceBase, sourceMax=sourceMax), code="""
//console.log('Tap event occurred at x-position: ' + cb_obj.x)
//console.log('Tap event occurred at y-position: ' + cb_obj.y)
//var data = source.data;
if(source.data.x.length == 0){
source.data.x.push(cb_obj.x);
source.data.y.push(cb_obj.y);
}else {
source.data.x[1] = cb_obj.x;
source.data.y[1] = cb_obj.y;
}
console.log("x0 " + source.data.x)
console.log("y0 " + source.data.y)
source.change.emit();
if (source.data.y[0] > source.data.y[1]){
price_max =source.data.y[0]
price_min = source.data.y[1]
x = source.data.x[0]
console.log("price high" + price_max)
console.log("price low" + price_min)
console.log("start point" + x)
diff = price_max - price_min
level1 = price_max - 0.236 * diff
level2 = price_max - 0.382 * diff
level3 = price_max - 0.618 * diff
console.log("level1 " + level1 )
sourceBase.data.x.push(x)
sourceBase.data.y.push(price_max)
sourceBase.data.x1.push(x_range.max)
sourceBase.data.y1.push(price_max)
sourceMax.data.x.push(x)
sourceMax.data.y.push(price_min)
sourceMax.data.x1.push(x_range.max)
sourceMax.data.y1.push(price_min)
source2.data.x.push(x)
source2.data.y.push(level1)
source2.data.x1.push(x_range.max)
source2.data.y1.push(level1)
source3.data.x.push(x)
source3.data.y.push(level2)
source3.data.x1.push(x_range.max)
source3.data.y1.push(level2)
source6.data.x.push(x)
source6.data.y.push(level3)
source6.data.x1.push(x_range.max)
source6.data.y1.push(level3)
}else {
price_max =source.data.y[1]
price_min = source.data.y[0]
x = source.data.x[0]
console.log("price high" + price_max)
console.log("price low" + price_min)
console.log("start point" + x)
diff = price_max - price_min
level1 = price_min + 0.236 * diff
level2 = price_min + 0.382 * diff
level3 = price_min + 0.618 * diff
sourceBase.data.x.push(x)
sourceBase.data.y.push(price_max)
sourceBase.data.x1.push(x_range.max)
sourceBase.data.y1.push(price_max)
sourceMax.data.x.push(x)
sourceMax.data.y.push(price_min)
sourceMax.data.x1.push(x_range.max)
sourceMax.data.y1.push(price_min)
source2.data.x.push(x)
source2.data.y.push(level1)
source2.data.x1.push(x_range.max)
source2.data.y1.push(level1)
source3.data.x.push(x)
source3.data.y.push(level2)
source3.data.x1.push(x_range.max)
source3.data.y1.push(level2)
source6.data.x.push(x)
source6.data.y.push(level3)
source6.data.x1.push(x_range.max)
source6.data.y1.push(level3)
}
source2.change.emit();
source3.change.emit();
source6.change.emit();
sourceBase.change.emit();
sourceMax.change.emit();
""")
#p.js_on_event('doubletap', callback)
s = Line(x='x',y='y')
s1 = Segment(x0='x',y0='y',x1='x1',y1='y1')
s2 = Segment(x0='x',y0='y',x1='x1',y1='y1')
s3 = Segment(x0='x',y0='y',x1='x1',y1='y1')
s4 = Segment(x0='x',y0='y',x1='x1',y1='y1')
s5 = Segment(x0='x',y0='y',x1='x1',y1='y1')
p.add_glyph(source, s, selection_glyph=s, nonselection_glyph=s)
p.add_glyph(source2, s1, selection_glyph=s1, nonselection_glyph=s1)
p.add_glyph(source3, s2, selection_glyph=s2, nonselection_glyph=s2)
p.add_glyph(source6, s3, selection_glyph=s3, nonselection_glyph=s3)
p.add_glyph(sourceBase, s4, selection_glyph=s4, nonselection_glyph=s4)
p.add_glyph(sourceMax, s5, selection_glyph=s5, nonselection_glyph=s5)
checkbox_group = CheckboxGroup(labels=
["fibo"],callback=CustomJS.from_py_func(callback))
inputs=widgetbox(checkbox_group)
def update(attr, old, new):
print("checkbox selected")
p.js_on_change('doubletap', callback)
checkbox_group.js_on_change("active",update)
p.add_tools(draw_tool_l1)
layout = column(p, checkbox_group)
p.toolbar.active_drag = draw_tool_l1
curdoc().add_root(layout)