from bokeh.core.properties import value
from bokeh.io import show, output_file
from bokeh.models import ColumnDataSource, HoverTool
from bokeh.plotting import figure
from bokeh.transform import dodge
from bokeh.layouts import layout
from bokeh.models import Toggle, BoxAnnotation, CustomJS
months = [‘0-20 km/h’, ‘20-40 km/h’, ‘40-60 km/h’, ‘60-80 km/h’, ‘80-100 km/h’,‘100< km/h’]
#V = [‘v1’, ‘v2’, ‘v3’,‘v4’]
v=X
data = {‘months’ : months,
‘d1’ : s1,
‘d2’ : s2,
‘d3’ : s3,
‘d4’ : s4,
‘d5’ : s5}
source = ColumnDataSource(data=data)
p = figure(x_range=months, y_range=(0, 1000), plot_height=500,plot_width=800, title=“Vehicle cover distance in km”,x_axis_label=‘speed in intervals’,y_axis_label=‘Distance in km’,
toolbar_location=None, tools="")
x=p.vbar(x=dodge(‘months’, -0.30, range=p.x_range), top=‘d1’, width=0.15, source=source,
color="#c9d9d3", legend=value(v[0]))
y=p.vbar(x=dodge(‘months’, -0.15, range=p.x_range), top=‘d2’, width=0.15, source=source,
color="#718dbf", legend=value(v[1]))
z=p.vbar(x=dodge(‘months’, 0.00, range=p.x_range), top=‘d3’, width=0.15, source=source,
color="#e84d60", legend=value(v[2]))
a=p.vbar(x=dodge(‘months’, 0.15, range=p.x_range), top=‘d4’, width=0.15, source=source,
color=“pink”, legend=value(v[3]))
n=p.vbar(x=dodge(‘months’, 0.30, range=p.x_range), top=‘d5’, width=0.15, source=source,
color=“green”, legend=value(v[4]))
p.add_tools(HoverTool(tooltips=[(v[0]+" in km", “@d1”), (v[1]+" in km", “@d2”),(v[2]+" in km", “@d3”),(v[3]+" in km", “@d4”),(v[4]+" in km", “@d5”)]))
p.x_range.range_padding = 0.1
p.xgrid.grid_line_color = None
p.legend.location = “top_left”
p.legend.orientation = “horizontal”
We write coffeescript to link toggle with visible property of box and line
code = ‘’’\
object.visible = toggle.active
‘’’
callback1 = CustomJS.from_coffeescript(code=code, args={})
toggle1 = Toggle(label=v[0], button_type=“success”, callback=callback1,width=1)
callback1.args = {‘toggle’: toggle1, ‘object’: x}
callback2 = CustomJS.from_coffeescript(code=code, args={})
toggle2 = Toggle(label=v[1], button_type=“success”, callback=callback2,width=10)
callback2.args = {‘toggle’: toggle2, ‘object’: y}
callback3 = CustomJS.from_coffeescript(code=code, args={})
toggle3 = Toggle(label=v[2], button_type=“success”, callback=callback3,width=19)
callback3.args = {‘toggle’: toggle3, ‘object’: z}
callback4 = CustomJS.from_coffeescript(code=code, args={})
toggle4 = Toggle(label=v[3], button_type=“success”, callback=callback4,width=28)
callback4.args = {‘toggle’: toggle4, ‘object’: a}
callback5 = CustomJS.from_coffeescript(code=code, args={})
toggle5 = Toggle(label=v[4], button_type=“success”, callback=callback5,width=37)
callback5.args = {‘toggle’: toggle5, ‘object’: n}
output_file(“vehicle_in_km.html”)
show(layout([p], [toggle1,toggle2,toggle3,toggle4,toggle5]))
I just want to know how to align button in the graph
plot_button.ipynb (18.8 KB)
vehicle_in_km.html (321 KB)