Load graphic data from files when a button is pressed using bokeh

Question

I am trying to use the toggle buttons in Bokeh to create an interactive website on which the user can click the toggle buttons to select which graphs will be drawn.

The buttons will load data from a text file (containing two columns x and y of data). data files have two columns containing data x and y, separated by a space.

When the switching buttons are selected, then the corresponding data will be displayed, the graph will be deleted if the switching button is not selected.

I'm currently having trouble passing an argument to a callback event, is this possible?

from bokeh.io import vform from bokeh.models import CustomJS, ColumnDataSource from bokeh.models.widgets import Toggle from bokeh.plotting import figure, output_file, show output_file("load_data_buttons.html") x = [0] y = x source = ColumnDataSource(data=dict(x=x, y=y)) plot = figure(plot_width=400, plot_height=400) plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6) callback = CustomJS(args=filename,dict(source=source), code=""" var data = source.get('data'); console.log(filename) x = data['x'] y = data['y'] #load data stored in the file name and assign to x and y source.trigger('change'); """) toggle1 = Toggle(label="Load data file 1", type="success",callback=callback("data_file_1.txt")) toggle2 = Toggle(label="Load data file 2", type="success",callback=callback("data_file_2.txt")) layout = vform(toggle1, toggle2, plot) show(layout) 

Answer 1

You have to upload two files and save the data in a DataSource object, here is an example:

 from bokeh.io import vplot import pandas as pd from bokeh.models import CustomJS, ColumnDataSource from bokeh.models.widgets import Button from bokeh.plotting import figure, output_file, show output_file("load_data_buttons.html") df1 = pd.read_csv("data_file_1.txt") df2 = pd.read_csv("data_file_2.txt") plot = figure(plot_width=400, plot_height=400) source = ColumnDataSource(data=dict(x=[0, 1], y=[0, 1])) source2 = ColumnDataSource(data=dict(x1=df1.x.values, y1=df1.y.values, x2=df2.x.values, y2=df2.y.values)) plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6) callback = CustomJS(args=dict(source=source, source2=source2), code=""" var data = source.get('data'); var data2 = source2.get('data'); data['x'] = data2['x' + cb_obj.get("name")]; data['y'] = data2['y' + cb_obj.get("name")]; source.trigger('change'); """) toggle1 = Button(label="Load data file 1", callback=callback, name="1") toggle2 = Button(label="Load data file 2", callback=callback, name="2") layout = vplot(toggle1, toggle2, plot) show(layout)