Bokeh Plot Update Using Slider

Question

I am trying to use a slider to update my Bokeh Plot. I am finding it difficult to achieve it using pandas dataframe(did not find any examples so far). The other way is to use the "columndatasource" (found some examples over forums) but still not able to achieve the functionality. So I have two columns, X axis is date and the Y axis is Volume. I want to change my Y values based on slider input. I am able to see the plot but the slider functionality is not working

Any help will be very much appreciable.

source = ColumnDataSource(data=dict(x=df2['Date'],y=df2['Vol']))
S1 = figure(plot_width=400,plot_height=400,tools=TOOLS1,title="Volume Per Day",x_axis_type="datetime")
S1.line('x','y',source=source)

callback_test = CustomJS(args=dict(source=source), code="""
var data = source.get('data');
var s_val = cb_obj.value
x = data['x']
y = data['y']
console.log(cb_obj) 
for (i = 0; i < s_val; i++) {
    y[i] = y[i]            
    }
source.trigger('change');
""")

slider = Slider(start=0, end= max_Vol, value=1, step=100,title="Vol Per Day",callback=callback_test)

With i from 0 to s_val, you are just replacing each y[i] by itself, so nothing changes. — Seb
– Seb, Commented Apr 24, 2017 at 15:28
In your post you say "I want to change my Y values based on slider input.", how exactly do you want your Y values to change? — Seb
– Seb, Commented Apr 27, 2017 at 15:25
based on the slider value the dataframe's "Vol" column is selected. e.g. if y= 4000 then df2[vol] < 4000 are selected and plotted against the time. — MoChen
– MoChen, Commented Apr 28, 2017 at 5:41

Seb · Accepted Answer · 2017-04-28 13:27:01Z

You are trying to update the range of data that is plotted using a slider.

When you do:

y = data['y']
for (i = 0; i < s_val; i++) {
    y[i] = y[i]            
    }

the python equivalent would be, if y is some array with length>s_val:

for i in range(s_val):
    y[i] = y[i]

This just replaces the elements from 0 to s_val-1 by themselves and doesn't change the rest of the list.

You can do two things:

update the displayed axis range directly
use an empty source that you will fill from your existing source based on the slider value

.

source = ColumnDataSource(data=dict(x=df2['Date'],y=df2['Vol']))
fill_source = ColumnDataSource(data=dict(x=[],y=[]))
S1 = figure(plot_width=400,plot_height=400,tools=TOOLS1,title="Volume Per Day",x_axis_type="datetime")
S1.line('x','y',source=fill_source)

callback_test = CustomJS(args=dict(source=source,fill_source=fill_source), code="""
var data = source.data;
var fill_data = fill_source.data;
var s_val = cb_obj.value;
fill_data['x']=[];
fill_data['y']=[];
for (i = 0; i < s_val; i++) {
    fill_data['y'][i].push(data['y'][i]);
    fill_data['x'][i].push(data['x'][i]);          
    }
fill_source.trigger('change');
""")

Amstrad2Python · Accepted Answer · 2020-05-24 18:50:44Z

Here is the changes I have made to make it work with Bokeh last version

Some syntax error in the JavaScript part have been corrected, the method to trigger change is now change.emit, and the callback for a stand alone document is set after the Slider definition thanks to js_on_change

I have added all the import commands to give a complete example I have also changed the visualization to show only data below the number of flight set by the slider (for more comprehension when moving the Slider towards lower values)

Below is the resulting code:

from bokeh.layouts import column, widgetbox
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Slider
from bokeh.plotting import Figure
import pandas as pd
from datetime import datetime, date, timedelta
from bokeh.plotting import show
from random import randint

today = date.today()
random_data = [[today + timedelta(days = i), randint(0, 10000)] for i in range(10)]
df2 = pd.DataFrame(random_data, columns = ['Date', 'Vol'])

source = ColumnDataSource(data = dict(x = df2['Date'], y = df2['Vol']))
fill_source = ColumnDataSource(data = dict(x = df2['Date'], y = df2['Vol'])) # set the graph to show all data at loading
TOOLS1 = []
S1 = Figure(plot_width = 400, plot_height = 400, tools = TOOLS1, title = "Volume Per Day", x_axis_type = "datetime")
S1.line('x', 'y', source = fill_source)

callback_test = CustomJS(args = dict(source = source, fill_source = fill_source), code = """
var data = source.data;
var fill_data = fill_source.data;
var s_val = cb_obj.value;
fill_data['x']=[];
fill_data['y']=[];
for (var i = 0; i <= data.x.length; i++) {   // added "var" declaration of variable "i"
        if (data['y'][i] <= s_val) { // more meaningful visualization: assuming you want to focuss on dates with less number of flights
            fill_data['y'].push(data['y'][i]); // [i] index on left side of assignment removed
        }
        else {
            fill_data['y'].push(0);
        }
        fill_data['x'].push(data['x'][i]);
    }
    fill_source.change.emit() ; // "trigger" method replaced by "change.emit"
""")

max_Vol = df2['Vol'].max()
slider = Slider(start = 0, end = max_Vol, value = max_Vol, step = 100, title = "Vol Per Day") # Remove attribute "callback = callback_test"
slider.js_on_change('value', callback_test) # new way of defining event listener

controls = widgetbox(slider)
layout = column(controls, S1)
show(layout)

Would be nice if I could embbed the resulting (HTML) visualization directly in this answer, let me now if it's possible ;)

Collectives™ on Stack Overflow

Bokeh Plot Update Using Slider

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related