Slider not updating CDS Bokeh

Question

I have been struggling with callbacks in js as I don't have enough knowledge on it. I understood the select widget along few others, but the slider is just not working. The code below the plot will change but the Yaxis will crop in half, so all the bars are flat.

I found few examples, but mostly to do with PI and lines, some from a ColumnDataSource, still I couldn't grasp the concept properly.

dataset

Aim to update the plot accordingly to the slider value, i.e., from 2009 to 2018, using the CDS variables.

import pandas as pd
import numpy as np

from bokeh.layouts import column, row, gridplot
from bokeh.models import ColumnDataSource, CustomJSTransform, Select, HoverTool, Slider
from bokeh.plotting import figure
from bokeh.io import (output_notebook, show, curdoc, output_file)
from bokeh.palettes import Pastel2, viridis
import matplotlib.pyplot as plt
%matplotlib inline
output_notebook()

df1 = pd.read_csv('ageGroupYear.csv', delimiter=',', index_col='Age Groups')
df1['color'] = viridis(len(df1.index))

source = ColumnDataSource(data=dict(x=df1.index, _2009=df1['2009'], _2010=df1['2010'], _2011=df1['2011'],
                                    _2012=df1['2012'], _2013=df1['2013'], _2014=df1['2014'], _2015=df1['2015'],
                                    _2016=df1['2016'], _2017=df1['2017'], _2018=df1['2018'], c=df1['color']))

p = figure(x_range=list(df1.index.values), plot_height=350, plot_width=550,title='Irish Population Breakdown by Age Group',
            tools='pan, wheel_zoom, box_zoom, reset')
p.vbar(x='x', top='_2016', width=0.5, source=source, color='c')

#plot style
p.xaxis.major_label_orientation = 45
p.grid.grid_line_color=None
p.outline_line_color=None
p.axis.major_label_text_font_style = 'bold'
p.toolbar.autohide = True

hoverp = HoverTool()
hoverp.tooltips=[('Group Population', '@_2009')]
p.add_tools(hoverp)


tick_labels_p = {'100':'100K','200':'200K','300':'300K','400':'400K'}
p.yaxis.major_label_overrides = tick_labels_p


#ts = ['y09','y10', 'y11', 'y12','y13','y14','y15','y16','y17','y18']
#slider = Slider(start=2009, end=2018, value=2016, step=1, title="Year")

select = Select(title="Year:", align='start', value='_2016', width=80, height=30, options=['_2009','_2010', '_2011', '_2012','_2013','_2014','_2015','_2016','_2017','_2018'])
select.callback = callback

callback = CustomJS(args={'source':source},code="""
        console.log(' changed selected option', cb_obj.value);

        var data = source.data;

        // allocate column
        data['_2016'] = data[cb_obj.value];

        // register the change 
        source.change.emit();
""")

callback3 = CustomJS(args=dict(source=source), code="""
    var data = source.data;
    var f = cb_obj.value
    x = data['x']
    y = data['_2016']


    for (i = 0; i < x.length; i++) {
        y[i] = (y[i], f)
    }

    source.change.emit();

""")

slider3 = Slider(start=2009, end=2018, value=2016, step=1, title="Year", callback=callback3)
slider3.js_on_change('value', callback3)

layout = column(slider3, p)
show(layout)

#layout = row(select,p)
#show(layout)

Hi @EugenePakhomov that is the issue, I dont really know how to setup a callback in js, so I am trying to understand the codes offered, but most of them are geometric value with PI, which doesnt help me much. So if I can get one done with a data that I am familiar with and how I use to set my CDS, I will have the north. Thanks — ReinholdN
I still don't understand. Forget about JS - what do you want to happen when the slider value changes? — Eugene Pakhomov
Update the plot accordingly to the slider value, i.e., from 2009 to 2018, using the CDS variables. I managed to get it done with the select widget, the slider though I just cant it done. Can I say spasibo to you? Just wondering because your name. — ReinholdN

Eugene Pakhomov Eugene Pakhomov · Accepted Answer · 2020-06-29T05:45:38

Take a look at this answer, starting from the second paragraph.

Relevant information - do not change the data, change the pointers to the data.

vbar = p.vbar(...)

# Somewhere in CustomJS code:
vbar.glyph.top = {field: new_year}

Slider not updating CDS Bokeh

1 Answers