# Bokeh models to plot interactive addition of columns using CustomJS and CheckboxGroup

**URL:** <https://discourse.bokeh.org/t/bokeh-models-to-plot-interactive-addition-of-columns-using-customjs-and-checkboxgroup/8929>\
**Category:** Community Support\
**Tags:** customjs, bokehjs, bokeh\
**Created:** [February 22, 2022, 4:51am UTC](https://discourse.bokeh.org/t/bokeh-models-to-plot-interactive-addition-of-columns-using-customjs-and-checkboxgroup/8929 "2022-02-22T04:51:12Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![brainonlunchbreak](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/brainonlunchbreak/32/4910_2.png) [@brainonlunchbreak](https://discourse.bokeh.org/u/brainonlunchbreak)\
**Post date:** [February 22, 2022, 4:51am UTC](https://discourse.bokeh.org/t/bokeh-models-to-plot-interactive-addition-of-columns-using-customjs-and-checkboxgroup/8929/1 "2022-02-22T04:51:12Z")

</div>

I want a CheckboxGroup to represent different columns of a dataframe. The idea is for the user to be able to add multiple column values if they select multiple columns and interactively display the sum as a plot.

I have the following:

```auto
from bokeh.io import output_file, show
from bokeh.plotting import figure
from bokeh.layouts import layout, widgetbox
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import CheckboxGroup, CheckboxButtonGroup, TextInput
import pandas as pd

output_file('additive_checkbox.html')
names = ['Number', 'A', 'B', 'C']
rows = [(340, 77, 70, 15),
        (341, 80, 73, 15),
        (342, 83, 76, 16),
        (343, 86, 78, 17)]
data = pd.DataFrame(rows, columns=names)
data['combined'] = None
source = ColumnDataSource(data)
callback = CustomJS(args=dict(source=source), code="""
    const labels = cb_obj.labels;
    const active = cb_obj.active;
    const data = source.data;
    const sourceLen = data.combined.length;
    const combined=Array(sourceLen).fill(undefined);
    var combined_label = ''

if (active.length > 0) {
    const selectedColumns = labels.filter((val, ind) => active.includes(ind));
    for(let i = 0; i < sourceLen; i++) {
        let sum = 0;
        for(col of selectedColumns){
            sum += data[col][i];
        }
        combined[i] = sum;
    }
}
data.combined=combined;
source.change.emit();
""")
checkbox_group = CheckboxButtonGroup(labels=names[1:], active=[], js_event_callbacks=callback, width=400)

final_col = column(p, checkbox_group)
show(final_col)

```

And it is giving me the following error: `ValueError: failed to validate CheckboxButtonGroup(id='1223', ...).js_event_callbacks: expected an element of Dict(String, List(Instance(CustomJS))), got CustomJS(id='1222', ...)`

I am not good with JS and have no idea what it means!

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [February 22, 2022, 6:53am UTC](https://discourse.bokeh.org/t/bokeh-models-to-plot-interactive-addition-of-columns-using-customjs-and-checkboxgroup/8929/2 "2022-02-22T06:53:15Z")

</div>

Well, first things first. The error has nothing to do with JavaScript, per se. You are tying to use `js_event_callbacks`, which is not intended for end-users to ever set directly. \[1\] Instead, you should use `js_on_event` or `js_on_change` which are demonstrated in many examples and have an entire chapter in the user’s guide:

> **[JavaScript callbacks](https://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html#)**
>
> While the main goal of Bokeh is to provide a path to create rich interactive visualizations in the browser purely from Python, there will always be specialized use-cases that are outside the capabi...

Once you have changed to use standard APIs we can look into any further issues.

* * *

1. It had to be made “public” for uninteresting technical reasons related to serialization, but it was explicitly and purposefully never demonstrated in any examples or docs, and otherwise hidden from view to discourage anyone from trying to use it. Hopefully in the future it can be completely hidden.

---

<div class="post-metadata">

**Author:** ![brainonlunchbreak](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/brainonlunchbreak/32/4910_2.png) [@brainonlunchbreak](https://discourse.bokeh.org/u/brainonlunchbreak)\
**Post date:** [February 22, 2022, 8:40pm UTC](https://discourse.bokeh.org/t/bokeh-models-to-plot-interactive-addition-of-columns-using-customjs-and-checkboxgroup/8929/3 "2022-02-22T20:40:43Z")

</div>

Thanks a lot for the help. The error message wasn’t really helpful and neither was the direct reference asking me to change callback to js\_event\_callbacks. I have spent so much time trying to figure out why my code that worked perfectly before suddenly isn’t working any longer. I changed to the following:

```auto
checkbox_group = CheckboxButtonGroup(labels=col_names[1:], active=[])
checkbox_group.js_on_change("active",callback) #not sure if the argument is labels since that is what changes, but both didn't work
# also tried 
# checkbox_group.js_on_click(callback)

p.line(x='Wavelength', y='combined', source=source, line_width =1)
show(column(p,checkbox_group))

```

Now, it doesn’t plot any combined data at all ☹ only shows me the gridplot with the CheckboxGroup Buttons

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [February 22, 2022, 9:37pm UTC](https://discourse.bokeh.org/t/bokeh-models-to-plot-interactive-addition-of-columns-using-customjs-and-checkboxgroup/8929/4 "2022-02-22T21:37:19Z")

</div>

> [@brainonlunchbreak](#):
>
> Now, it doesn’t plot any combined data at all

I would not expect it to, given this line in your code:

```python
data['combined'] = None

```

That has never been valid Bokeh usage. I’m not sure what you are trying to accomplish, but it always been the case that:

- every value in a CDS `.data` dict should be a list/array/series (i.e. a “column”), and
- all columns in a CDS must always be the same length

---

<div class="post-metadata">

**Author:** ![brainonlunchbreak](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/brainonlunchbreak/32/4910_2.png) [@brainonlunchbreak](https://discourse.bokeh.org/u/brainonlunchbreak)\
**Post date:** [February 22, 2022, 9:41pm UTC](https://discourse.bokeh.org/t/bokeh-models-to-plot-interactive-addition-of-columns-using-customjs-and-checkboxgroup/8929/5 "2022-02-22T21:41:20Z")

</div>

In the JS code, it fills that column with sum of two or more selected columns using the CheckBoxGroup. I have actually used this standalone html tool for over a year and then we got new data and I came to update it and it broke.

---

<div class="post-metadata">

**Author:** ![brainonlunchbreak](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/brainonlunchbreak/32/4910_2.png) [@brainonlunchbreak](https://discourse.bokeh.org/u/brainonlunchbreak)\
**Post date:** [February 22, 2022, 9:46pm UTC](https://discourse.bokeh.org/t/bokeh-models-to-plot-interactive-addition-of-columns-using-customjs-and-checkboxgroup/8929/6 "2022-02-22T21:46:52Z")

</div>

That actually creates a column with None of length equal to other columns in the dataframe just like data[‘combined’] = 0 would, and I have tried that too. The JS event calls are broken, everything else should be okay.

My gridplot also consists of the non-interactive baseline plots and that is from a CDS with a series of different column sizes, and that part is working fine.

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [February 23, 2022, 2:47am UTC](https://discourse.bokeh.org/t/bokeh-models-to-plot-interactive-addition-of-columns-using-customjs-and-checkboxgroup/8929/7 "2022-02-23T02:47:19Z")

</div>

@brainonlunchbreak It seems like you have made some changes and tried some different things. At this point I’d ask you provide a new updated complete MRE that I can actually run to investigate directly.

---

<div class="post-metadata">

**Author:** ![system](https://discourse-uploads.bokeh.org/original/2X/1/14eb24f9e10e4e9b78e3f10f66c04ffa96446e5a.svg) [@system](https://discourse.bokeh.org/u/system)\
**Post date:** [May 24, 2022, 2:48am UTC](https://discourse.bokeh.org/t/bokeh-models-to-plot-interactive-addition-of-columns-using-customjs-and-checkboxgroup/8929/8 "2022-05-24T02:48:15Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.