How to update data table if source is updated by Python code?

Community Support
1

Hello, I am inquiring about updating DataTable, if its source CDS is updated from Python code.
Saying

datasource = {‘x’: [1, 2], ‘y’: [14, 15]}
table_source = ColumnDataSource(data=datasource)
columns = [TableColumn(field=“x”, title=“X axis”),TableColumn(field=“y”, title=“Y axis”)]
data_table = DataTable(source=table_source, columns=columns, editable=True, reorderable=False)
verycircle = map_figure.circle(x=‘x’, y=‘y’, source=data_table, size=5, color=“red”)

Now, if a periodic callback changes datasource in background, saying changing datasource = {‘x’: [3, 4], ‘y’: [14, 15]}
how do I redraw a DataTable and plot automatically?
Also is it possible to update Data source not by editing the table, but also by code and periodically with redrawing of the DataTable as new values arrive ?

2

Hi, Sorry I’m not so familiar with bokeh server callbacks, but I think this code will do what you are asking using a CustomJS callback. I think the key is the source for your plot needs to be the same as the source of your table rather than the table itself. (also I’m not familiar with map_figure and it produced an error for me).

from bokeh.plotting import figure, show
from bokeh.layouts import gridplot
from bokeh.models import ColumnDataSource, CustomJS, Button
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.events import ButtonClick

datasource = {'x':[1, 2], 'y':[14, 15]}
table_source = ColumnDataSource(data=datasource)
columns = [TableColumn(field='x', title='X axis'),
            TableColumn(field='y', title='Y axis')]
data_table = DataTable(source=table_source, columns=columns, width=300,
                        editable=True, reorderable=False)
verycircle = figure(plot_width=300, plot_height=300)
verycircle.circle(x='x', y='y', source=table_source, size=5, color='red')

button = Button(label='multiply by 2')

callback = CustomJS(args=dict(source=table_source), code="""

    var dx = source.data['x'];
    source.data['x'] = dx.map(x => x *2);;
    console.log(dx);
    source.change.emit();

""" )

button.js_on_event(ButtonClick, callback)

layout = gridplot([[button],[verycircle, data_table]])
show(layout)
1 Like