bokeh select widget callback using CustomJS to filter dataframe and plot

Question

I want to add callback to my bokeh select widget using CustomJS .I need to filter my dataframe according to callback from select widget. Since am a novice to JavaScript programming i havent been able to write the code for the callback

    true_source=ColumnDataSource(data={'a':df.loc[, 'MONTH_YR'],
                            'b':df.loc[, 'MCOUNT'],
                            'qty':df.loc[,'MPDCQTY'],
                            'value':df.loc[,'MQTYRATE'],
                            'section':df.loc['MSECTION']})

    #I added the true_source so I could have a reference from my original dataframe while filtering

    source=ColumnDataSource(data={'x':df.loc[df['MSECTION']=='TURRET','MONTH_YR'],
              'y':df.loc[df['MSECTION']=='TURRET', 'MCOUNT'],
              'qty':df.loc[df['MSECTION']=='TURRET','MPDCQTY'],
               'value':df.loc[df['MSECTION']=='TURRET','MQTYRATE']})

    def callback_select(attr, old, new):
        s=section.value
        new_data={'x':df.loc[df['MSECTION']==s, 'MONTH_YR'],
                  'y':df.loc[df['MSECTION']==s, 'MCOUNT'],
                  'qty':df.loc[df['MSECTION']==s,'MPDCQTY'],
              'value':df.loc[df['MSECTION']==s,'MQTYRATE']}
        source.data=new_data

Since i want to deploy a HTML file, writing the callback in python wont work. So i tried writing the callback using CustomJS. But am sure i wrote it wrong.

    callback=CustomJS(args=dict(source=source, ts=true_source), code=""""
                    var data1=ts.data;
                    var section=data1['section']
                    var a=data1['a']
                    var b=data1['b']

                    var data=source.data;
                    var f=cb_obj.value;

                    var x=[];
                    var y=[];
                    var j=0;

                    for(var i=0;i<section.length;i++){
                        if(section==f){
                        x[j].push(a[i]);
                        y[j].push(b[i]);
                        }   
                    }   
                    source.change.emit();    
                            """)

this image here shows the plot, select option dosent work

Can anyone help me with this JS code?

You are making and populating some local variable lists x and y – and then immediately throwing them away. For them to have effect, you need to use them to set source.data to be a new dict. It's not clear exactly what you are trying to do, so it's hard to be more specific. You almost certainly also want if(section[i]==f) instead of what you have now. — bigreddot
those x and y are the keys for source.I want to update them based on the if(section___) condition . — Aseer Ahmad Ansari
All I want is to rewrite the def callback_select() in JavaScript .Those x and y are supposed to be the source ColumnDataSource keys. I saw somewhere that the keys to be updated need also be initialized someway within CustomJS, so thats what i am trying to do which i totally have done wrong here. — Aseer Ahmad Ansari
You've skipped the last part of callback_select which is the crucial bit: You need something like source.data = new_data but you don't. You are never actually updating source, which is why nothing is changing. — bigreddot
I understood somehow ....maybe a lathargic way but yes i got the solution thanx — Aseer Ahmad Ansari

Aseer Ahmad Ansari Aseer Ahmad Ansari · Accepted Answer · 2018-06-05T17:55:19

For the callbcak in python as mentioned in question one can create similar in CustomJS for implementing in htmls.Here var x, y, qty, value are keys for source and a, b, qty, value are for true_source. I updated for source using them.

callback=CustomJS(args=dict(source=source,ts=true_source), code="""
                    var data=ts.data;
                    var section=data['section'];

                    var a=data['a'];
                    var b=data['b'];
                    var qty_t=data['qty_t'];
                    var value_t=data['value_t'];

                    var data1=source.data;
                    var f=cb_obj.value;

                    var x=[];
                    var y=[];
                    var qty=[];
                    var value=[];

                    for(var i=0;i<a.length; i++){
                        if(section[i]==f){
                          x.push(a[i]);
                          y.push(b[i]);
                          qty.push(qty_t[i]);
                          value.push(value_t[i]);

                        }
                    }
                    data1['x']=x;
                    data1['y']=y;
                    data1['qty']=qty;
                    data1['value']=value;

                    source.change.emit();
            """)

bokeh select widget callback using CustomJS to filter dataframe and plot

1 Answers