Can't update x_range/y_range using CustomJS and select from dropdown

I am trying to update y_range for my Bokeh plot using CustomJS which should update based on the selection from the dropdown widget. I tried using y_range.factors = factors in CustomJS, but it does not seem to be working. My axis is categorical. It would be great if someone could help me in this. Here’s my code:

p3 = figure(title="title",
           x_axis_location="below", plot_width=400, plot_height=800,
            x_range=sensors, y_range=FactorRange(*run_ids),
           tools=TOOLS, toolbar_location='above',
           tooltips=[('Tooltip', '@tooltip'])

callback = CustomJS(args=dict(source1 = Overall, sc1 = Curr, plot = p3), code="""
console.log(plot)
var f = cb_obj.value
console.log(f)
sc1.data['run_id']=[\*]
for(var i = 0; i <= source1.get_length(); i++){
    if (source1.data['computer_name'][i] == f){
        sc1.data['run_id'].push(source1.data['run_id'][i])
        }
    }
console.log(plot.y_range)
plot.y_range.factors = sc1.data['run_id'].filter((v, i, a) => a.indexOf(v) === i);
console.log(plot.y_range)
plot.y_range.change.emit();
""")

p3.rect(x="sensor", y="run_id", width=1, height=1,
       source=Curr,
       fill_color={'field': 'avg', 'transform': mapper},
       line_color=None)

menu = Select(options=list(df['computer_name'].unique()),value=laptop_list[0], title = 'Laptop')

menu.js_on_change('value', callback)
layout=column(menu, p3)
show(layout)

It throws an error in console when setting y_range.factors:
“cannot read property ‘length’ of undefined”

Please let me know if I can improve on submitting a question. Thank you!

Hi @Yogi please edit your post to use code formatting so that the code is intelligible (either with the </> icon on the editing toolbar, or triple backtick ``` fences around the code blocks)

Hi Bryan, thank you for the feedback. I changed it.

Also, figured out the solution. Instead of plot.y_range.change.emit() it needs to be plot.change.emit()

@Yogi I am surprised that you need either. Are you saying it does not work if you delete the emit line altogether?

Sorry for the delayed response @Bryan. Yes, if I remove emit line, the plot does not update.

That’s strange, but a would need complete minimal reproducer to investigate further.

I will test this with a simple dataset today and will let update you with what I find.

Hi Bryan,

I am facing similar issues and seems like it’s still not working after updating to plot.change.emit() as Yogi suggested. Any help on this would be appreciated.

import pandas as pd
import bokeh
from bokeh.plotting import figure,output_file,show, save
from bokeh.io import output_notebook
from bokeh.models import NumeralTickFormatter,HoverTool,ColumnDataSource, CategoricalColorMapper,Select,FactorRange
from bokeh.transform import factor_cmap
from bokeh.palettes import Blues8
from bokeh.models.widgets import Tabs,Panel
from bokeh.models import Slider, CustomJS
from bokeh.layouts import row,column
from bokeh.client import push_session

output_file('index.html')

gap = pd.read_csv('C:/Users/ambhuiya/Downloads/gapminder_tidy1.csv')
gap1 = gap.loc[:, ['Country', 'Year', 'fertility', 'region']]
gap2 = gap1[gap1['Country'] == 'Afghanistan']


Overall = ColumnDataSource(data=gap1)
Curr = ColumnDataSource(data=gap2)

reason_code_range_BE = FactorRange(factors=(Curr.data['region'].tolist()))
print(reason_code_range_BE)

menu = Select(options=list(gap['Country'].unique()), value='Afghanistan', title='Country')  # drop down menu
p = figure(plot_width=1200,x_axis_label='region', y_axis_label='fertility',x_range=reason_code_range_BE)
# plot and the menu is linked with each other by this callback function
callback = CustomJS(args=dict(plot=p, source=Overall, sc=Curr), code="""
console.log(plot);
var f = cb_obj.value
console.log(f);
sc.data['region']=[]
sc.data['fertility']=[]
for(var i = 0; i <= source.get_length(); i++){
	console.log(source.get_length());
	if (source.data['Country'][i] == f){

		sc.data['region'].push(source.data['region'][i])
		sc.data['fertility'].push(source.data['fertility'][i])

	 }
}
console.log(plot.x_range);
plot.x_range.update= sc.data['region'];

console.log(plot.x_range);
plot.change.emit();

""")


# menu = Select(options=list(gap['Country'].unique()), value='Afghanistan', title='Country')  # drop down menu
# p = figure(plot_width=1200,x_axis_label='region', y_axis_label='fertility',x_range=reason_code_range_BE)  # creating figure object
p.vbar(x='region', top='fertility',bottom=0, color='green', source=Curr)  # plotting the data using glyph circle
menu.js_on_change('value', callback)  # calling the function on change of selection
layout = column(menu, p)  # creating the layout
show(layout)  # displaying the layout

Hi @Abdul_Bhuiya please edit your post to use code formatting so that the code is more intelligible (either with the </> icon on the editing toolbar, or triple backtick ``` fences around the code blocks)

@Bryan Sure, it’s updated with </>. Let me know if this looks good now. Thanks again. adding @Yogi as well for any input.

@Abdul_Bhuiya I wanted to actually run your code, as I can very often get to the root of problem much faster that way, but I see your script requires a data file. Please either provide a link to to the file, or update the script to use synthetic data of some sort.

@Bryan Not sure if there is a way to attach a csv file here but below is the csv data that I am using as an example for this code. The main issue is the region for albania has aa and ab in it which don’t get updated in x axis after Albania is selected. Thanks again.

@Abdul_Bhuiya I’d suggest putting it in a gist, I can’t use it from the post

@Bryan Thanks for the link. Below is the gist file link:

@Abdul_Bhuiya you need to trigger a change signal on the data source:

sc.change.emit()

That is what signals the plot to update.

Alternatively, if you change your code to update .data all at once:

sc.data = new_data

That is a change that Bokeh can automatically detect and respond to automatically.

@Bryan Thanks a lot for the suggestions. So, If I do:

sc.change.emit(), it does seem to update the plot but doesn’t update and plot the new x axis values (for Albania, it has aa and ab instead of a and b that is in afganistan). Will there be a way to update the x axis values as well? Otherwise, it’s not showing the aa and ab region values for Albania as shown in the screenshot below. the a and b region stays with no data.

Also, I have, plot.x_range.update= sc.data[‘region’]; but Yogi used plot.x_range.factors. Should that make a difference? If I update to .factors, then the sc.change.emit() doesn’t work.

Also, to use the sc.data=ne

Capture1556×837 28.1 KB

Thanks again for your help.

@Abdul_Bhuiya If you pass the range to the CustomJS callback, you can update range.factors in the JS code to whatever the new set of values is.

If I update to .factors, then the sc.change.emit() doesn’t work.

Would need to see that exact callback code you tried, I can’t really speculate otherwise. The only thing that comes to mind is you are setting factors to an invalid value. It should be the unique list of values that should appear on the axis, in the order you want them to appear on the axis. If there are duplicate factors that is an error (it does not make sense for a categorical axis to have factors repeated).

@Bryan Thanks again for your input. The x axis values are unique list of values.

This is what I have for callback. Seems like I can see in console that factors got updated correctly but I don’t see the x axis values got updated on the plot. It still has the same x axis value from before. Am I missing any emit line setup?

callback = CustomJS(args=dict(source=Overall, sc=Curr,x_range=reason_code_range_BE), code="""

var f = cb_obj.value
console.log(f);
sc.data['region']=[]
sc.data['fertility']=[]
for(var i = 0; i <= source.get_length(); i++){
	console.log(source.get_length());
	if (source.data['Country'][i] == f){

		sc.data['region'].push(source.data['region'][i])
		sc.data['fertility'].push(source.data['fertility'][i])

	 }
}
console.log(x_range);
x_range.factors= sc.data['region']

console.log(x_range);


sc.change.emit();

""")

@Abdul_Bhuiya your code works if I switch the order slightly and put the event emit first:

sc.change.emit();
x_range.factors= sc.data['region']

I guess I would regard this over-sensitivity as unfortunate, or even a slight bug. But tracing through things I see why it is happening, and I am not certain there is much that can be done about it.

@Bryan Thanks again for the input. I tried changing accordingly but looks like it still doesn’t update the x axis with aa and ab value as expected.

but then I added like below and it worked. Basically, I passed the plot parameter and updated x range on it.

Still one last issue that I have is, it looks like the first selection sets the length of x axis values ie. if I have Albania to have more values for X axis, it does update the plot but plots only the amount of lines that Afghanistan has and leaves the rest empty even though that data exist in the csv file. Below is a snapshot where you can see plot got updated with aa and ab values but at the end of x axis it should have updated the at and arr values but as that’s more that the length of x axis values of Afghanistan, it didn’t update it. Any thought here? Highly appreciate your help throughout this problem.

Capture1551×827 26 KB

callback = CustomJS(args=dict(plot=p,source=Overall, sc=Curr,x_range=reason_code_range_BE), code="""

var f = cb_obj.value
console.log(f);
sc.data['region']=[]
sc.data['fertility']=[]
for(var i = 0; i <= source.get_length(); i++){
	console.log(source.get_length());
	if (source.data['Country'][i] == f){

		sc.data['region'].push(source.data['region'][i])
		sc.data['fertility'].push(source.data['fertility'][i])

	 }
}
console.log(x_range);

sc.change.emit();

plot.x_range.factors = sc.data['region']
plot.change.emit();
console.log(x_range);


""")

There is no difference between passing plot and setting plot.x_range.factors and passing the range and setting range.factors so I don’t see how that could make any effect. I would have to see the exact code you tried (that didn’t work) to speculate. As I mentioned all I changed in your code was to set the range before calling emit (which is also what you have done above).

In any case I can’t really speculate about the other issue without data to reproduce and investigate. The sample data in the gist does not appear to have any entries for those categories.

@Bryan Thanks for all your help and sorry for the late reply. I was trying to get it all working. I think I have it working now. It did need 2 emit() calls and I also used source data to make sure it works for any selection. This is the code:

import pandas as pd
import bokeh
from bokeh.plotting import figure,output_file,show, save
from bokeh.io import output_notebook
from bokeh.models import NumeralTickFormatter,HoverTool,ColumnDataSource, CategoricalColorMapper,Select,FactorRange
from bokeh.transform import factor_cmap
from bokeh.palettes import Blues8
from bokeh.models.widgets import Tabs,Panel
from bokeh.models import Slider, CustomJS
from bokeh.layouts import row,column
from bokeh.client import push_session

output_file('index.html')

gap = pd.read_csv('C:/Users/ambhuiya/Downloads/gapminder_tidy1.csv')
gap1 = gap.loc[:, ['Country', 'Year', 'fertility', 'region']]
gap2 = gap1[gap1['Country'] == 'Afghanistan']

reason_code_range_BE = gap1['region'].unique().tolist()
print(reason_code_range_BE)

Overall = ColumnDataSource(data=gap1)
Curr = ColumnDataSource(data=gap2)

# reason_code_range_BE = Overall.data['region'].tolist().unique()
# print(reason_code_range_BE)

menu = Select(options=list(gap['Country'].unique()), value='Afghanistan', title='Country')  # drop down menu
p = figure(plot_width=1200,x_axis_label='region', y_axis_label='fertility',x_range=reason_code_range_BE)
# plot and the menu is linked with each other by this callback function
callback = CustomJS(args=dict(plot=p,source=Overall, sc=Curr,x_range=reason_code_range_BE), code="""

var f = cb_obj.value
console.log(f);
sc.data['region']=[]
sc.data['fertility']=[]
for(var i = 0; i <= source.get_length(); i++){
	console.log(source.get_length());
	if (source.data['Country'][i] == f){

		sc.data['region'].push(source.data['region'][i])
		sc.data['fertility'].push(source.data['fertility'][i])

	 }
}
console.log(x_range);

sc.change.emit();

plot.x_range.factors = sc.data['region']
plot.change.emit();
console.log(x_range);


""")


# menu = Select(options=list(gap['Country'].unique()), value='Afghanistan', title='Country')  # drop down menu
# p = figure(plot_width=1200,x_axis_label='region', y_axis_label='fertility',x_range=reason_code_range_BE)  # creating figure object
p.vbar(x='region', top='fertility',bottom=0, color='green', source=Overall)  # plotting the data using glyph circle
menu.js_on_change('value', callback)  # calling the function on change of selection
layout = column(menu, p)  # creating the layout
show(layout)  # displaying the layout