Converting python callback function to javascript

Question

I would like some help translating my callback function in bokeh from python to javascript. My code is showed next (I've deleted most of it since it was not important to the translation.)

#returns a CDS of a dataframe based on one parameter
def create_df(option): 
    return ColumnDataSource(incident_df)

all_df = create_df('all')
critical_df = create_df('1')
high_df = create_df('2')
avg_low_df = create_df('3/4')
data_points = create_df('all')    
color_mapper=LinearColorMapper(palette=RdBu7,low=data_points.data['freq'].min(),high=data_points.data['freq'].max())

radio_button_group = RadioButtonGroup(
        labels=["All Priorities", "1 - Critical", "2 - High", "3/4 - Average/Low"], active=0)

#Define the callback function
def callback(attr, old, new):
    if radio_button_group.active == 0:
        new_cds = all_df
    if radio_button_group.active == 1:
        new_cds = critical_df 
    if radio_button_group.active == 2:
        new_cds = high_df
    if radio_button_group.active == 3:
        new_cds = avg_low_df
    data_points.data = new_cds.data
    color_mapper.low=min(data_points.data['freq'])
    color_mapper.high=max(data_points.data['freq'])

radio_button_group.on_change('active', callback)

What have you tried so far and where are you stuck?

cygri
– cygri

2019-04-18 08:48:05 +00:00
Commented Apr 18, 2019 at 8:48 — cygri
– cygri, Commented Apr 18, 2019 at 8:48

Tony · Accepted Answer · 2019-04-18 19:22:10Z

1

Your Python callback could be translated to JS callback like this (provided it was working in Python):

from bokeh.models import CustomJS

code = """
    if (radio_button_group.active == 0)
        new_cds = all_df
    if (radio_button_group.active == 1)
        new_cds = critical_df 
    if (radio_button_group.active == 2)
        new_cds = high_df
    if (radio_button_group.active == 3)
        new_cds = avg_low_df

    data_points.data = new_cds.data
    color_mapper.low = Math.min.apply(null, data_points.data['freq'])
    color_mapper.high = Math.max.apply(null, data_points.data['freq'])
 """
callback = CustomJS(args = dict(data_points = data_points,
                                color_mapper = color_mapper
                                radio_button_group = radio_button_group
                                all_df = all_df,
                                critical_df = critical_df,
                                high_df = high_df,
                                avg_low_df = avg_low_df), 
                    code = code)

radio_button_group.js_on_change('active', callback)

edited Apr 18, 2019 at 19:22

answered Apr 18, 2019 at 10:46

Tony

8,3273 gold badges28 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

L. Rebelo Over a year ago

Thanks for the reply. It's not working though. I get the default plot working but when I click the buttons, the plot doesn't change. I've looked at the console and when I click on a button it gives me the following error 'x_df is not defined'. Do you know what can I do to fix this?

Tony Over a year ago

I forgotten to add you datasources to the callback. See updated code. But the error you are getting is different and I can't say where it comes from until I see the full code. It is difficult without the full code overview. Please always provide minimal but runnable code

L. Rebelo Over a year ago

The code works now. I just needed to make one correction from your code. Where it is 'color_mapper.low = Math.min(data_points.data['freq'])' it should be 'color_mapper.low = Math.min.apply(null, data_points.data.freq)' and the same for the maximum value. Thank you very much for your help.

amanb Over a year ago

@L.Rebelo, if this answer has helped, consider upvoting/accepting as answer.

L. Rebelo Over a year ago

Done. Thanks for the heads up.

Collectives™ on Stack Overflow

Converting python callback function to javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related