I'm trying to write a bokeh application, in which a datasource for a DataTable is selected by clicking on a point in a mapplot. A callback function of this mapplot selects the data, which then should be plotted in a DataTable.
I iniciate the DataTable with "dummy-data" to get it displayed correctly. After clicking on a point (station) the callback function of the mapplot should update the table's datasource, so the selected data is displayed. But I struggle with updating the table's datasource, there's only one row updated/displayed.
Here's some simplified code from my app:
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource
from bokeh.events import Tap
from bokeh.models import TapTool, DateFormatter
from bokeh.tile_providers import get_provider, Vendors
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.layouts import layout, row
from bokeh.io import curdoc
def callback(event):
"""
Callback function for tap event in mapplot
"""
# change data for table
df = ColumnDataSource(data=dict(index=[50000000,55000000,60000000], LT=[13.5,20.2,-3.1]))
data_table.source = df
dfm = ColumnDataSource(data=dict(x=[1196199], y=[5907860])) # samplestation for mapplot
df = ColumnDataSource(data=dict(index=[0], LT=['NaN'])) # initial data for datatable
#### Mapplot
tile_provider = get_provider(Vendors.CARTODBPOSITRON)
tools_to_show_p1 = 'box_zoom,pan,save,reset,tap,wheel_zoom'
p1 = figure(x_range=(1043319, 1471393), y_range=(5684768, 6176606),
x_axis_type="mercator", y_axis_type="mercator",
tools=tools_to_show_p1, sizing_mode="scale_both")
p1.add_tile(tile_provider)
p1.circle(x="x", y="y", size=15, fill_color="blue", fill_alpha=0.4, source=dfm)
#### Datatable
datefmt = DateFormatter(format="%m/%d/%Y %H:%M:%S")
columns = [
TableColumn(field="index", title="date", formatter=datefmt),
TableColumn(field="LT", title="LT"),
]
data_table = DataTable(source=df, columns=columns, width=300, height=600, fit_columns=True, editable=True)
#### Events
taptool = p1.select(type=TapTool)
p1.on_event(Tap, callback)
doc_layout = layout(children=[row(p1, data_table)], sizing_mode='fixed')
curdoc().add_root(doc_layout)
Note: you can't run this in jupyter notebook, it has to be run as bokeh serve xxx.py --show
How do I update my DataTable to display the whole data?
(Please no JsCallback functions, as I have a different logic how the whole callback is done, this is just a simplified example)
You should not replace the ColumnDataSource. Instead, you should update the CDS, by assigning to its .data property:
data_table.source.data = new_data
Note that .data should generally be a plain Python dict. You can use ColumnDataSource.from_df(...) to convert a DatFrame to the expected format. In future versions these kinds of things will issue explicit errors.