Only show the most recently received n datapoints with ZingChart without ever resetting

Question

I am trying to write a real-time data display for scientific data. I have a sever that is logging the data to a file so I don't care about keeping values past a window of about 15 minutes. I have not found a way to both toss the data points older than 15 minutes ago, and not reset the entire chart. Resetting the chart isn't an option as being able to see recent values is critical to the operation of this equipment. Things I have tried:

Note: This uses websockets in "push" mode.

1. This started as attempting to have a preview window with a fixed width (15 minutes) that the user could drag across the data. But I quickly found the using previews seems to be incompatible with real-time data streaming.
2. I tried fiddling with the refresh object options, but those would just change when the chart would reset.
3. My current try was to attempt to catch the "addnode" event when a node is added by the websocket handler, but from what I can tell the event never gets tripped.

The current iteration of my chart object is the following:

let chartConfig = {
    graphset: [
            {
        timezone: -1 * (today.getTimezoneOffset() / 60), // Weird timezone stuff
        type: 'line',
        borderColor: '#cccccc',
        borderRadius: '2px',
        borderWidth: '1px',
        utc: true,
        title: {
            text: title,
            adjustLayout: true,
            marginTop: '20px'
        },
        legend: {
            backgroundColor: 'transparent',
            borderWidth: '0px',
            draggable: true,
            header: {
                text: test,
                backgroundColor: '#f0f0f0'
            },
            item: {
                margin: '5 17 2 0',
                padding: '3 3 3 3',
                cursor: 'hand',
                fontColor: '#fff'
            },
            marker: {
                visible: false
            },
            verticalAlign: 'middle'
        },
        plot: {
            aspect: 'segmented',
        },
        plotarea: {
            margin: 'dynamic'
        },
        scrollX: {},
        scaleX: {
            autoFit: false,
            itemsOverlap: false,
            maxItems: 15,
            maxLabels: 15,
            step: "15minute",
            transform: {
                type: 'date',
                all: '%M-%dd-%Y<br>%G:%i',

            },
            guide: {
                    alpha: 0.5,
                    lineColor: "#cccccc",
                    lineWidth: 2,
                    lineStyle: "solid",
                    visible: true
            },
            zooming: true
        },
        scaleY: {
            guide: {
                lineStyle: 'solid'
            },
            offsetStart: "5%",
            offsetEnd: "5%",
            label: {
                text: 'Data'
            },
        },
        crosshairX: {
            lineColor: '#555',
            marker: {
                borderColor: '#fff',
                borderWidth: '1px',
                size: '5px'
            },
            plotLabel: {
                backgroundColor: '#fff',
                borderRadius: '2px',
                borderWidth: '2px',
                multiple: true
            },
            scaleLabel: {
                transform: {
                    type: "date",
                    all: "%G:%i:%s"
                }
            }
        },
        tooltip: {
            visible: false
        },
        refresh: {
            type: "feed",
            transport: "websockets",
            url: "wss://zingchart-websockets.glitch.me",
            method: "push",
            maxTicks: 15*60,
            resetTimeout: 15*60*10,
            adjustScale: false,
            curtain: {
                text: 'Starting Feed...',
                color: '#424242',
                fontSize: 45,
                backgroundColor: '#b3e5fc',
            }
        },
        series: [
            {
                text: 'plot0',
                values: [],
                legendItem: {
                    backgroundColor: '#29A2CC',
                    borderRadius: '2px',
                }
            },
        ]
        }
    ],
    gui: {
        contextMenu: {
        alpha: 0.9,
        button: {
            visible: true
        },
        docked: true,
        item: {
            textAlpha: 1
        },
        position: 'right'
        }
    }
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'PlotArea',
data: chartConfig,
});

// Callbacks
// --------------------------
zingchart.bind('PlotArea', 'addnode', function(e) {
    var cur_data = zingchart.exec('PlotArea', 'getseriesvalues', {});
    if (length(cur_data) > 2*60) {
        zingchart.exec('PlotArea', 'removenode', {
            graphid: 0,
            plotindex: 0,
            nodeindex: 0
        })
    }
});

I am currently grabbing data from the websocket endpoint at glitchme because the webserver hasn't been written yet as I would like to get the hard part, the UI, ready first. Thanks for any help that can be provided.

Answer 1

In your refresh object, add 'preserve-data': false. This seems unintuitive, but this will preserve the data after the max ticks threshold is reached instead of clearing the chart.