How to align bokeh button

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)

Hi Akash,

You may want to read this: https://bokeh.pydata.org/en/latest/docs/user_guide/layout.html

Regards,

Eugene

···

On Tuesday, January 23, 2018 at 2:39:45 PM UTC+7, Akash Soni wrote:

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