Changing source of plot in bokeh with a callback

Question

Imagine I have 2 (or more) sources of data with the same number of columns and rows:

#Data
dates = [date(2016, i, 1) for i in range(1,13)]

data1 = pd.DataFrame(index = dates, data = random.randn(12, 2),
                     columns = ['A', 'B'])

data2 = pd.DataFrame(index = dates, data = random.randn(12, 2),
                     columns = ['A', 'B'])

and I want to plot columns A & B in bokeh as so:

#Bokeh
source = ColumnDataSource(source1)
source1 = ColumnDataSource(data1)
source2 = ColumnDataSource(data2)

p = figure(x_axis_type = 'datetime')
l1 = p.line(source = source, x = dates, y= 'A', color = 'Red')
l2 = p.line(source = source, x = dates, y= 'B', color = 'Blue')

and I have a dropdown list:

select = Select(options = ['source1', 'source2'], value = 'source1')

What's the easiest way to create a callback for select so that the source of data in the line charts change as a different option is chosen in the dropdown list? I have little to no experience in JS and can't really wrap my head around callbacks so any help would be appreciated.

Edit:

I've tried this:

codes = """
var f = cb_obj.get('value');
var sdata = source.data;
var 1data = source1.data;
var 2data = source2.data;

if (f == "source1") {
sdata = 1data ;
source.trigger('change');
};

if (f == "source2") {
sdata = 2data ;
source.trigger('change');
};


"""

select.callback= CustomJS(args= dict(source = source, source1=source1,
                          source2=source2), code = codes)

But it doesn't work...

Seb · Accepted Answer · 2018-05-18 19:11:41Z

3

EDIT: obj.trigger('change',arg) was changed for bokeh 0.12.6 and is now deprecated, the new syntax is obj.change.emit(arg), see Bokeh releases

You can empty your "source" data columns and refill them in a for loop with .push()

Also you shouldn't use variable names starting with numbers

codes = """
var f = cb_obj.get('value');
var sdata = source.data;
var data1 = source1.data;
var data2 = source2.data;

if (f == "source1") {
sdata["A"] = [] ;
for (i=0;i<data1["A"].length; i++) {
sdata["A"].push(data1["A"][i]);
}
sdata["B"] = [] ;
for (i=0;i<data1["B"].length; i++) {
sdata["B"].push(data1["B"][i]);
}
source.trigger('change');
};

if (f == "source2") {
sdata["A"] = [] ;
for (i=0;i<data2["A"].length; i++) {
sdata["A"].push(data2["A"][i]);
}
sdata["B"] = [] ;
for (i=0;i<data2["B"].length; i++) {
sdata["B"].push(data2["B"][i]);
}
source.trigger('change');
};
"""

EDIT to answer the comment

from bokeh.plotting import figure, output_file
from bokeh.models import CustomJS, ColumnDataSource, Select
from bokeh.layouts import gridplot
from bokeh.resources import CDN
from bokeh.embed import file_html

from random import random

key_list = list('ABCDEFGHIJKLMNOP')

DATA1 = {key:[random() for i in range(10)] for key in key_list}
DATA2 = {key:[random() for i in range(10)] for key in key_list}
DATA1['xaxis'] = range(10)
DATA2['xaxis'] = range(10)

source1 = ColumnDataSource(data=DATA1)
source2 = ColumnDataSource(data=DATA2)

fill_source = ColumnDataSource(data=DATA1)

fig = figure()

for key in key_list:
    fig.line(x='xaxis',y=key,source=fill_source)

select = Select(options=['source1','source2'],value='source1')

codes = """
var f = cb_obj.value;
var sdata = source.data;
var data1 = source1.data;
var data2 = source2.data;

console.log(data2);

for (key in data1) {console.log(key);}

if (f == "source1") {
for (key in data1) {
    sdata[key] = [];
    for (i=0;i<data1[key].length;i++){
    sdata[key].push(data1[key][i]);
    }
}
} else {
for (key in data2) {
    sdata[key] = [];
    for (i=0;i<data2[key].length;i++){
    sdata[key].push(data2[key][i]);
    }
}
};

source.trigger("change");
"""
select.callback = CustomJS(args=dict(source=fill_source,source1=source1,source2=source2),code=codes)

grid = gridplot([[select],[fig]])

outfile=open('select.html','w')
outfile.write(file_html(grid,CDN,'select'))
outfile.close()

The lines console.log() are not necessary, but you can use it to help yourself with understanding/debugging your callbacks, those are print statement in the browser console (right click -> inspect -> Console )

edited May 18, 2018 at 19:11

answered Apr 5, 2017 at 16:05

Seb

1,79510 silver badges24 bronze badges

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

4 Comments

MHMirza Over a year ago

Thank you @Seb, this works perfectly. My actual data sources have more than 10 columns tho, can you think of any way of streamlining the code? Or does it have to be column by column? Thanks again

Seb Over a year ago

I assume you have one line for each column, you can just loop over the dictionary keys, I edited my answer with an example code

MHMirza Over a year ago

Perfect. Thanks so much @Seb

James Over a year ago

Please update: source.trigger("change") is depricated. Use source.change.emit() instead.

Collectives™ on Stack Overflow

Changing source of plot in bokeh with a callback

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related