Skip to main content
Version: 5.2.1

Scrolling surface

A variant of Surface, this feature is suitable for streaming applications where data is measured and visualized in real-time.

Chart with scrolling surface seriesChart with scrolling surface series

Scrolling surfaces work same as Static surfaces for the most part. The main differences are creation syntax and data input.

// Creation of scrolling surface series
const surfaceSeries = chart.addSurfaceScrollingGridSeries({
    // Scroll along X axis
    scrollDimension: 'columns',
    // Each sample has 5 values
    rows: 5,
    // Number of samples to keep in memory
    columns: 100,
})
    .setStart({ x: 0, z: 0 })
    .setStep({ x: 1, z: 1 })

Data input​

A sample is added to a scrolling surface with addValues method:

surfaceSeries.addValues({
    yValues: [0, 1, 2, 3, 4]
})

Color by separate data set​

See static surface guide on topic here. If you want to use the same approach with a scrolling surface series, then supply intensity values like this:

surfaceSeries.addValues({
    yValues: [0, 1, 2, 3, 4],
    intensityValues: [100, 110, 90, 80, 20]
})

Using timestamps​

Scrolling surface series don't currently have a simple, robust way to input timestamped data. The input data should be uniform stepping (always same time step between samples), which is usually not realistic in real applications. Feeding timestamped data to scrolling surface series is absolutely possible, but requires some data handling in application side logic. e.g. dropping extra samples if too many samples arrive too frequently, or duplicating samples if too few samples arrive.

If you are interested in a use case with timestamped scrolling surface series, we invite you to contact us and see how we can support you.

In our online example Audio Spectrogram 3D, a timestamped surface series is realized by using an estimated data input rate as Time axis step for the surface series. This, however, can go out of time sync when running for extended times.

3D color shading​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Depth testing​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line