title: Filter Dataframe Using Bokeh Dropdown Widget/CustomJS
body: <p>I have to make a standalone html dashboard so I'm trying to figure out how to add a callback to a bokeh dropdown widget using CustomJS. Problem is even after consulting other posts on variations on the subject I still can't figure it out. Any help would be appreciated! Ultimately, I would use the dropdown to filter a stacked bar chart, but I want to take a stab at figuring that out on my own after messing with filtering the datatable first.</p>
  
  <p>I've consulted <a href="https://stackoverflow.com/questions/46720831/filtering-dataframe-using-bokeh-widget-callback">Filtering dataframe using Bokeh/Widget/Callback</a>, <a href="https://stackoverflow.com/questions/55089115/bokeh-datatable-filtering-inconsistency">Bokeh datatable filtering inconsistency</a>, and <a href="https://stackoverflow.com/questions/46720831/filtering-dataframe-using-bokeh-widget-callback">Filtering dataframe using Bokeh/Widget/Callback</a>, and <a href="https://stackoverflow.com/questions/47517922/python-bokeh-customjs-callback-update-datatable-widget">Python bokeh CustomJS callback update DataTable widget</a>. Additionally, I've been going through the docs at <a href="https://docs.bokeh.org/en/1.3.4/docs/user_guide/interaction/callbacks.html#userguide-interaction-jscallbacks" rel="nofollow noreferrer">https://docs.bokeh.org/en/1.3.4/docs/user_guide/interaction/callbacks.html#userguide-interaction-jscallbacks</a>,</p>
  
  <pre><code>import pandas as pd
  from bokeh.models.widgets import Dropdown
  from bokeh.layouts import widgetbox
  from bokeh.models import ColumnDataSource, DataTable, TableColumn, CustomJS
  from bokeh.io import show, output_file, output_notebook, reset_output
  
  
  raw_data = {'ORG': ['APPLE', 'ORANGE', 'MELON'],
              'APPROVED': [5, 10, 15],
              'CREATED': [1, 3, 5],
              'INPROCESS': [4,2,16]}
  
  df = pd.DataFrame(raw_data)
  
  # create list of orgs to use later
  org_l = list(df['ORG'].unique())
  
  # create CDS for source
  src = ColumnDataSource(df)
  
  # create cols
  table_columns = [TableColumn(field = Ci, title = Ci) for Ci in df.columns] 
  
  
  # create filtered table
  filtered_df = df.loc[df['ORG']=='f']
  
  # create CDS for filtered source
  new_src = ColumnDataSource(filtered_df)
  
  # create dropdown
  dropdown = Dropdown(label="Dropdown button", button_type="warning", menu = org_l)
  
  callback_code = """"
                  var data = src.data;
                  var new_data = new_src.data;
                  var f = cb_obj.value;
                  var list = org_l;
                  if var i = org_list[i] {
                  new_src.data = src.data
                  }
  
                """
  
  callback=CustomJS(args=dict(dropdown = dropdown,source=src),
               code=callback_code)
  
  # create table
  member_table = DataTable(source = new_src, columns = table_columns)
  
  dropdown.js_on_change('value', callback)
  
  show(widgetbox(dropdown, member_table))
  </code></pre>
  
  <p>''''</p>