Bokeh Widget - Checkbox Workgroup Example

Question

I evaluate Bokeh to see if it is ready for wider use. I built two columns of the data frame (code at the end), "Close" and "Close Adj".

I want to check the boxes to toggle the display of both graphs on the graph. Therefore, if the corresponding check box is not selected, the line is not displayed. The Bokeh documentation at http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html talks about a group of checkboxes, but does not contain an explicit working example. I would appreciate any help in getting checkboxes working for data columns.

import pandas as pd from bokeh.plotting import figure, output_file, show IBM = pd.read_csv( "http://ichart.yahoo.com/table.csv?s=IBM&a=0&b=1&c=2011&d=0&e=1&f=2016", parse_dates=['Date']) output_file("datetime.html") p = figure(width=500, height=250, x_axis_type="datetime") p.line(IBM['Date'], IBM['Close'], color='navy', alpha=0.5) p.line(IBM['Date'], IBM['Adj Close'], color='red', alpha=0.5) show(p) 

Answer 1

I have not yet been able to set the checkboxes, although I would not be surprised if this functionality appears soon. In the meantime, this is a workaround using a multi-select widget:

 from bokeh.io import vform from bokeh.models import CustomJS, ColumnDataSource, MultiSelect from bokeh.plotting import figure, output_file, show import pandas as pd IBM = pd.read_csv( "http://ichart.yahoo.com/table.csv?s=IBM&a=0&b=1&c=2011&d=0&e=1&f=2016", parse_dates=['Date']) output_file("datetime.html") source = ColumnDataSource({'x': IBM['Date'], 'y1': IBM['Close'], \ 'y2': IBM['Adj Close'], 'y1p': IBM['Close'], 'y2p': IBM['Adj Close']}) p = figure(width=500, height=250, x_axis_type="datetime") p.line('x', 'y1', source=source, color='navy', alpha=0.5) p.line('x', 'y2', source=source, color='red', alpha=0.5) callback = CustomJS(args=dict(source=source), code=""" var data = source.get('data'); var f = cb_obj.get('value') y1 = data['y1'] y2 = data['y2'] y1p = data['y1p'] y2p = data['y2p'] if (f == "line2") { for (i = 0; i < y1.length; i++) { y1[i] = 'nan' y2[i] = y2p[i] } } else if (f == "line1") { for (i = 0; i < y2.length; i++) { y1[i] = y1p[i] y2[i] = 'nan' } } else if (f == "none") { for (i = 0; i < y2.length; i++) { y1[i] = 'nan' y2[i] = 'nan' } } else { for (i = 0; i < y2.length; i++) { y1[i] = y1p[i] y2[i] = y2p[i] } } source.trigger('change'); """) multi_select = MultiSelect(title="Lines to plot:", \ value=["line1", "line2", "none"], \ options=["line1", "line2", "none"], callback=callback) layout = vform(multi_select, p) show(layout) 

The result is as follows:

Answer 2

This is obviously a late answer, but I'm currently trying to learn python and bokeh to crack some kind of data dashboard. I tried to figure out how the checkboxes work, and I came across your question. This solution only works with bokeh. I don't know how to make it work on HTML output.

I only change the visibility of the line, not the source. I haven't tried it yet, but I'm sure that the legends will still show invisible lines

Sorry for the code tape code.

 #-| bokeh serve #-| import pandas as pd from bokeh.io import curdoc,output_file, show from bokeh.layouts import row, widgetbox from bokeh.plotting import figure from bokeh.models import ColumnDataSource from bokeh.models.widgets import * #Widgets ticker = TextInput(title='Ticker Symbol',value='IBM') button=Button(label='Lookup',button_type='success') log = Paragraph(text="""log""", width=200, height=100) cb_group = CheckboxButtonGroup(labels=['Close', 'Adj Close'],active=[0,1]) cb_group.labels.append('Placebo') #Plot p = figure(title='',width=500, height=250, x_axis_type='datetime') source = ColumnDataSource({'x': [], 'y1': [],'y2': []}) lineClose=p.line('x','y1',source=source, color='navy', alpha=0.5) lineAdj=p.line('x','y2',source=source, color='red', alpha=0.5) lines=[lineClose,lineAdj] #Event handling def error(msg): log.text=msg def update_data(): try: src='http://ichart.yahoo.com/table.csv?s={symb}&a=0&b=1&c=2011&d=0&e=1&f=2016'.format(symb=ticker.value) df=pd.read_csv(src,parse_dates=['Date']) source.data=({'x': df['Date'], 'y1': df['Close'],'y2': df['Adj Close']}) except: error('Error ticker') def update_plot(new): switch=cb_group.active for x in range(0,len(lines)): if x in switch: lines[x].visible=True else: lines[x].visible=False error('<CheckboxButtonGroup>.active = '+str(switch)) button.on_click(update_data) cb_group.on_click(update_plot) inputs=widgetbox(ticker,button,cb_group,log) curdoc().add_root(row(inputs,p,width=800)) curdoc().title = 'Bokeh Checkbox Example' button.clicks=1 

I added a “Placebo” flag to find out if I can add flags to the group instead of the typical method, so I'm sure there is a way to add flags more elegantly and dynamically.

how will it look like