Size mismatch in AjaxDataSource in append mode

Community Support
1

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!

2

You will have to use separate data sources for each glyph, full stop. It is an absolute assumption that all columns in a CDS (which an AjaxDataSource is a specific subtype of) are always all the same length, at all times. You should think of a CDS like a “lightweight DataFrame”—you can’t ever have different column lengths in DataFrames.

1 Like
3

Undertstood - thank you!