CODEWITHSUNDEEP
pythoncallbackwidgetbokeh
mfavre
mfavre

Reputation: 25

How to use the output of one Bokeh widget as an input in another widget through a callback function?

I have a dataframe with some random characteristics (factors) for some companies. I would like to select one factor in the first widget and then the min and the max value of the second widget to be updated accordingly. I tried this with the below code, but as I am not an expert in JS, I really do not know how to process. Your help or tips is more than welcome.

Thank you very much in advance

Matthieu

import math
import numpy as np
import pandas as pd
import random
import matplotlib.pyplot as plt
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, HoverTool,CustomJS
from bokeh.sampledata.autompg import autompg_clean as df
from bokeh.models.widgets import Slider, Select, TextInput,RangeSlider,DataTable,TableColumn
from bokeh.layouts import layout, column


CompanyList = ['00', '01', '02','03'] 

a = pd.DataFrame({
    'Factor1' : [random.randint(0, 10) for t in range(4)], 
    'Factor2' : [random.randint(0,100) for t in range(4)],
    'Factor3' : [random.randint(0,1000) for t in range(4)],
    'CompanyNo' : CompanyList})

a =a.set_index('CompanyNo')

C1 = Select(title="Constraint No1", options=sorted(list(a.columns)), value='Factor1')
R1 = RangeSlider(title="Range Constraint 2",value=(a[C1.value].min(),a[C1.value].max()),start=a[C1.value].min(),end=a[C1.value].max(),step=0.1,width=300)

I need help for this part:

C1.callback = CustomJS(args=dict(R1=R1,C1=C1,a=a), code="""
    R1.start = a[C1.value].min()                   
    R1.end = a[C1.value].max();
    """)

show(column(C1,R1))

Upvotes: 0

Views: 588

Answers (1)

Tony
Tony

Reputation: 8287

Because a DataFrame is not serializable you have to pass its columns separately in the list format. I tested the code in Bokeh v1.1.0.

import math
import numpy as np
import pandas as pd
import random
import matplotlib.pyplot as plt
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, HoverTool, CustomJS
from bokeh.sampledata.autompg import autompg_clean as df
from bokeh.models.widgets import Slider, Select, TextInput, RangeSlider, DataTable, TableColumn
from bokeh.layouts import layout, column

CompanyList = ['00', '01', '02', '03']

a = pd.DataFrame({
    'Factor1' : [random.randint(0, 10) for t in range(4)],
    'Factor2' : [random.randint(0, 100) for t in range(4)],
    'Factor3' : [random.randint(0, 1000) for t in range(4)],
    'CompanyNo' : CompanyList})

a = a.set_index('CompanyNo')

C1 = Select(title = "Constraint 1", options = sorted(list(a.columns)), value = 'Factor1')
R1 = RangeSlider(title = "Range Constraint 2", value = (a[C1.value].min(), a[C1.value].max()), start = a[C1.value].min(), end = a[C1.value].max(), step = 0.1, width = 300)

C1.callback = CustomJS(args = dict(R1 = R1, C1 = C1, Factor1 = a['Factor1'].values, Factor2 = a['Factor2'].values, Factor3 = a['Factor3'].values), code = """
    array = eval(C1.value)
    R1.start = Math.min(...array);                  
    R1.end = Math.max(...array);
    R1.value = [Math.min(...array), Math.max(...array)];    
    """)

show(column(C1, R1))

Upvotes: 1

Related Questions