I am attempting to modify the range_tool.py ( https://docs.bokeh.org/en/latest/docs/gallery/range_tool.html ) example from the Bokeh gallery so that when the user chooses a range with the Select figure, the p figure displays a wider, instead of the exact, range selected. The p figure uses a Range1d object for x_range, and it seems I cannot substitute a DataRange1d object ( which has padding ) in its place.
So, I am trying to roll my own functionality by having a range selection in the Select.line change the x_range of the p.line with up to 10% padding. However, I cannot figure out why my callback is not firing when I drag in the Select figure. My two figures display and I can drag a selection box in both, but when I do so in the Select figure, my very simple callback does not appear to fire.
- What am I doing wrong with the callback in this case ( code below )?
- Is there a better/simple way to get the padding functionality I am looking for, rather than having a change in the select_source.selected indices of the “Range Tool” graph change the range ( with additional padding ) of the “Display” graph?
from bokeh.io import show from bokeh.layouts import column from bokeh.models import ColumnDataSource, Range1d, CustomJS from bokeh.plotting import figure import pandas as pd df = pd.read_csv('input_data.csv', usecols=[0, 3]) df_len = len(df) quarter = df_len // 4 start = df['Date'][quarter] end = df['Date'][(int(quarter * 3))] x_range=Range1d(start=start, end=end) source = ColumnDataSource(df) select_source = ColumnDataSource(df) p = figure(plot_height=400, plot_width=900, x_axis_location="above", background_fill_color="#efefef", x_range=x_range, tools=['wheel_zoom', 'box_zoom', 'reset', 'xpan', 'xbox_select'], toolbar_location="below", active_drag="xbox_select") p.line('Date', 'VDD_APC0_Sense', selection_color="red", source=source) p.yaxis.axis_label = 'Power(W)' select = figure(title="Drag the middle and edges of the selection box to change the range above", plot_height=130, plot_width=800, y_range=p.y_range, x_axis_type="datetime", y_axis_type=None, background_fill_color="#efefef", tools=['wheel_zoom', 'box_zoom', 'reset', 'xpan', 'xbox_select'], toolbar_location="below", active_drag="xbox_select") select.line('Date', 'VDD_APC0_Sense', source=select_source, selection_color="orange") select.ygrid.grid_line_color = None select_source.selected.js_on_change('indices', CustomJS(args=dict(source=source, select_source=select_source), code=""" alert('A'); """)) show(column(p, select))