I am new to Javascript. I am trying to use to select widgets to filter the data shown in the plot
Should I be using one or two callback functions? When I use one callback function for each widget (instead of one callback function for two widgets), I cannot filter based on the values selected on each widget. Only thing I was able to get to was either:
- selection of widget 1, default value of widget 2
or - selection of widget 2, default value of widget 1
I hope this was clear. Any ideas?
source = ColumnDataSource(data=df)
source_temp = ColumnDataSource(data=df)
load_case_list = np.unique(df['Load_Name'].values)
select_load_case = Select(title="Select Load Case:", value='ALL', options=list(load_case_list),
width = 200)
select_load_case.js_link
story_list = np.unique(df['Story'].values)
select_floor = Select(title="Select Story:", value='ALL', options=list(story_list),
width = 200)
callback = CustomJS(args=dict(source=source, temp_source = source_temp, load_case = select_load_case.value, story = select_floor.value ), code="""
var temp_data = temp_source.data;
var data = source.data;
var story = story
var load_case = cb_obj.value
var temp_object = []
for (var i = 0; i < data.Joint.length; i++) {
var temp_obj = {}
if (data.Load_Name[i]===load_case && data.Story[i]===story){
for (const [key, value] of Object.entries(data)) {
temp_obj[key] = value[i];
}
temp_object.push(temp_obj)
}
}
let filtered_data = temp_object.reduce((a, e, i) => {
Object.entries(e).forEach(function(t) {
(a[t[0]] = a[t[0]] || []).push(t[1]);
})
return a;
}, {});
temp_source.data = filtered_data;
temp_source.change.emit();
""")
select_floor.js_on_change('value', callback)
select_load_case.js_on_change('value', callback)