Hello all - I’m having some trouble working with an AjaxDataSource displaying continuously updating data in a browser. If it is at all relevant, I am using Flask to serve the data.
What I am trying to do:
I am attempting to continuously update a plot with an AjaxDataSource that has two line glyphs, each with it’s own independent x and y lists of data (x is time and y is values). This means that the columns in the AjaxDataSource will have different sizes, but that does not affect the result as long as each line’s x and y are the same.
The problem I am having is when the AjaxDataSource is in “append” mode with a “max_size” parameter set. Right when the AjaxDataSource is filled to the point where old data would usually start to be removed because of the max_size parameter, it fails with the JS error “Uncaught error: size mismatch.”
Here is how I am defining my layout in python:
source = AjaxDataSource(
data_url='/stream/update/testing),
method='GET',
polling_interval=500,
mode='append',
max_size=1000,
if_modified=True)
fig = figure(title='Test')
fig.line(x='time_1', y='data_1', legend_label='Data 1', color='blue', source=source)
fig.line(x='time_2', y='data_2', legend_label='Data 2', color='green', source=source)
So with this example, as soon as one of the data columns reaches 1000 data points, the error occurs.
What I have tried:
When using a regular ColumnDataSource, the way that I would usually fix the problem of different-sized data columns is to pad the smaller ones with numpy.nan values. I have tried same thing with the AjaxDataSource, but I cannot find a way that works. From other posts here (like this one) I have learned that this is because JSON does not support NaN values.
Is there a way to avoid the first problem, or if not, is there a way to pad the lengths of the columns in an AjaxDataSource?
Please let me know what screenshots or code would be helpful.
Thank you for any help!
