RadioButtonGroup CustomJS not working

Community Support
1

Hello. Fairly new to bokeh but it’s awesome! Am struggling to get RadioButtonGroup CustomJS working in standalone page - it should work, without server right? What am I doing wrong?

from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.plotting import Figure, output_file, show
from bokeh.models.widgets import RadioButtonGroup, Select

output_file('custjs_test.html')

x = [x*0.05 for x in range(0, 200)]
y = x

source = ColumnDataSource(data=dict(x=x, y=y))

plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

radiohandler = CustomJS(args=dict(source=source), code="""
   var data = source.data;
   console.log('Tap event occurred at x-position: ' + cb_obj.active);
   //plot.title.text=cb_obj.value;
   x = data['x']
   y = data['y']
   if (cb_obj.active==0){
      for (i = 0; i < x.length; i++) {
         y[i] = x[i];
      }
   }
   if (cb_obj.active==1){
      for (i = 0; i < x.length; i++) {
         y[i] = Math.pow(x[i], 2)
      }
   }
   if (cb_obj.active==2){
      for (i = 0; i < x.length; i++) {
         y[i] = Math.pow(x[i], 4)
      }
   }
   source.change.emit();
""")

radio = RadioButtonGroup(labels=["line", "SqureCurve", "CubeCurve"], active=0)
radio.js_on_change('active', radiohandler)

layout = column(radio, plot)
show(layout)
2

You have not added any variable declarations (e.g. const, var). If you open the browser JavaScript console/debugger, you can see the error messages when it tries to execute your code. Here is an updated working version:

console.log('Tap event occurred at x-position: ' + cb_obj.active);
const x = source.data['x']
const y = source.data['y']
if (cb_obj.active==0) {
  for (var i = 0; i < x.length; i++) {
    y[i] = x[i];
  }
}
if (cb_obj.active==1){
  for (var i = 0; i < x.length; i++) {
    y[i] = Math.pow(x[i], 2)
  }
}
if (cb_obj.active==2){
  for (var i = 0; i < x.length; i++) {
    y[i] = Math.pow(x[i], 4)
  }
}
source.change.emit();
3

Perfect, thanks!