Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SurfaceScrollingGridSeries3D

Series for visualizing a 3D Surface Grid inside Chart3D, with API for pushing data in a scrolling manner (append new data on top of existing data).

The grid is defined by imagining a plane along X and Z axis, split to < COLUMNS > (cells along X axis) and < ROWS > (cells along Z axis)

The total amount of < CELLS > in a surface grid is calculated as columns * rows. Each < CELL > can be associated with DATA from an user data set.

This series is optimized for massive amounts of data - here are some reference specs to give an idea:

  • A data set of tens of millions data points is rendered in a matter of seconds.
  • Maximum data set size is entirely limited by available memory (RAM). Even billion (1 000 000 000) data points have been visualized on a personal computer. Interacting with massive surface charts (more than tens of millions data points) requires a powerful GPU !
  • Scrolling Surface Grid input stream rate is virtually unlimited - even 10 million incoming data points per second can easily be processed. Application limitations usually come from previously mentioned RAM and/or GPU bottlenecks.

Creating Surface Scrolling Grid Series:

SurfaceScrollingGridSeries3D are created with Chart3D.addSurfaceScrollingGridSeries method.

Some properties of SurfaceScrollingGridSeries3D can only be configured when it is created. Some of these arguments are optional, while some are required. They are all wrapped in a single object parameter:

 // Example,
 const surfaceScrollingGridSeries = Chart3D.addSurfaceScrollingGridSeries({
     columns: 100,
     rows: 200,
 })

To learn about these properties, refer to SurfaceScrollingGridSeries3DOptions.

Frequently used methods:

SurfaceScrollingGridSeries3D is designed for visualizing real-time data sources, where either new columns or rows are pushed in periodically.

For visualizing 3D surface grid with static columns and rows amount, refer to NewSurfaceGridSeries3D.

Index

Methods

addValues

  • addValues(arg: object): this
  • Append values to the Surface Scrolling Grid Series.

    The series type can contain between 1 and 2 different data sets (Y values and Intensity values). This same method is used for managing both types of data;

    When addValues is called, the parameter is wrapped in an object { }, and one of (or both) yValues and intensityValues can be supplied.

     // Example syntax,
     surfaceScrollingGridSeries.addValues({
         yValues: ...
         intensityValues ...
     })
    

    The type of yValues and intensityValues is a number matrix. At first level, it is a list of samples to add.

     yValues: [
         // Sample 1,
         // Sample 2
     ]
    

    If both yValues and intensityValues are specified, then their length should be exactly same!

    Order of sample data is selected when the series is created;

    scrollDimension: 'columns' ->

     yValues: [
         [
             0, // column = 0, row = 0
             0, // column = 0, row = 1
             0, // column = 0, row = n
         ],
         [
             0, // column = 1, row = 0
             0, // column = 1, row = 1
             0, // column = 1, row = n
         ],
     ]
    

    scrollDimension: 'rows' ->

     yValues: [
         [
             0, // row = 0, column = 0
             0, // row = 0, column = 1
             0, // row = 0, column = n
         ],
         [
             0, // row = 1, column = 0
             0, // row = 1, column = 1
             0, // row = 1, column = n
         ],
     ]
    

    Example usage:

     // Create X-scrolling surface series.
     const scrollingSurfaceSeries = Chart3D.addSurfaceScrollingGridSeries({
         scrollDimension: 'columns',
         rows: 5,
         columns: 50,
     })
    
     // Push two Y columns into the series.
     scrollingSurfaceSeries.addValues({
         yValues: [
             [0, 0, 0, 0, 0],
             [0, 10, 0, 20, 0]
         ]
     })
    

    addValues can trigger warnings when used controversially (for example, data overflow). In production applications, these can be controlled with LightningChartOptions.warnings.

    Parameters

    • arg: object

      Object with yValues and/or intensityValues matrixes to append on top of previously added data.

      • Optional intensityValues?: number[][]
      • Optional yValues?: number[][]

    Returns this

    Object itself for fluent interface.

attach

  • Attach object to an legendBox entry

    Parameters

    • entry: LegendBoxEntry

      Object which has to be attached

    • disposeOnClick: boolean

      Flag that indicates whether the Attachable should be disposed/restored, when its respective Entry is clicked.

    Returns this

    Series itself for fluent interface

clear

  • clear(): this
  • Clear all values added into the series.

     // Example syntax,
     surfaceScrollingGridSeries.clear()
    

    This only affects Y and Intensity data. Other than any styles, etc. this will make the series behave as if it was just created.

    Returns this

    Object itself for fluent interface.

dispose

  • dispose(): this
  • Tell the owning chart to remove this component.

    Returns this

    Object itself.

getAutoScrollingEnabled

  • getAutoScrollingEnabled(): boolean
  • Get whether series is taken into account with automatic scrolling and fitting of attached axes.

    By default, this is true for all series.

    Returns boolean

    true default, axes will take series into account in scrolling and fitting operations. false, axes will ignore series boundaries.

getColorShadingStyle

getCullMode

  • Get cull mode for this Surface grid series.

    Culling means skipping drawing of specific geometry parts, based on its orientation.

    'disabled' -> full geometry is drawn.

    'cull-back' -> the behind of geometry is not drawn.

    'cull-front' -> the front of geometry is not drawn.

    Surface series default cull mode is 'disabled' to show both sides of the surface.

    Returns CullMode3D

    Active cull mode.

getDepthTestEnabled

  • getDepthTestEnabled(): boolean
  • Get 3D depth test enabled for this series.

    By default this is enabled, meaning that any series that is rendered after this series and is behind this series will not be rendered.

    Can be disabled to alter 3D rendering behavior.

    Returns boolean

    Depth test enabled?

getFillStyle

  • Get fill style of series.

    Returns FillStyle

    FillStyle.

getHighlightOnHover

  • getHighlightOnHover(): boolean
  • Get boolean flag for whether object should highlight on mouse hover

    Returns boolean

    Boolean for if object should highlight on mouse hover or not.

getHighlighted

  • getHighlighted(): boolean

getIntensityInterpolation

getIsUnderMouse

  • getIsUnderMouse(): boolean
  • Get boolean flag for whether object is currently under mouse or not

    Returns boolean

    Boolean for is object under mouse currently

getMouseInteractions

  • getMouseInteractions(): boolean
  • Get mouse interactions enabled or disabled. Disabled mouse-interactions will naturally prevent mouse-driven highlighting from ever happening.

    Returns boolean

    Mouse interactions state

getName

  • getName(): string
  • Get the name of the Component.

    Returns string

    The name of the Component.

getWireframeStyle

  • Get surface grid wireframe style.

    Returns LineStyle

    LineStyle object.

getXMax

  • getXMax(): number | undefined
  • Returns number | undefined

    Max X value of the series

getXMin

  • getXMin(): number | undefined
  • Returns number | undefined

    Min X value of the series

getYMax

  • getYMax(): number | undefined
  • Returns number | undefined

    Max Y value of the series

getYMin

  • getYMin(): number | undefined
  • Returns number | undefined

    Min Y value of the series

getZMax

  • getZMax(): number | undefined
  • Returns number | undefined

    Max Z value of the series

getZMin

  • getZMin(): number | undefined
  • Returns number | undefined

    Min Z value of the series

isDisposed

  • isDisposed(): boolean
  • Returns boolean

    TODO: True for enabled and false for disabled

offHighlight

  • offHighlight(token: Token): boolean
  • Unsubscribe from Highlight object event. This is called whenever an object is highlighted

    Parameters

    • token: Token

      Token that was received when subscribing to the event.

    Returns boolean

    True if the unsubscription was successful.

offMouseClick

  • offMouseClick(token: Token): boolean
  • Remove event listener from Mouse Click Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDoubleClick

  • offMouseDoubleClick(token: Token): boolean
  • Remove event listener from Mouse Double Click Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDown

  • offMouseDown(token: Token): boolean
  • Remove event listener from Mouse Down Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDrag

  • offMouseDrag(token: Token): boolean
  • Remove event listener from Mouse Drag Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDragStart

  • offMouseDragStart(token: Token): boolean
  • Remove event listener from Mouse Drag Start Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDragStop

  • offMouseDragStop(token: Token): boolean
  • Remove event listener from Mouse Drag Stop Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseEnter

  • offMouseEnter(token: Token): boolean
  • Remove event listener from Mouse Enter Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseLeave

  • offMouseLeave(token: Token): boolean
  • Remove event listener from Mouse Leave Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseMove

  • offMouseMove(token: Token): boolean
  • Remove event listener from Mouse Move Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseUp

  • offMouseUp(token: Token): boolean
  • Remove event listener from Mouse Up Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseWheel

  • offMouseWheel(token: Token): boolean
  • Remove event listener from Mouse Wheel Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offTouchEnd

  • offTouchEnd(token: Token): boolean
  • Remove event listener from Touch End Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offTouchMove

  • offTouchMove(token: Token): boolean
  • Remove event listener from Touch Move Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offTouchStart

  • offTouchStart(token: Token): boolean
  • Remove event listener from Touch Start Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

onHighlight

  • onHighlight(handler: function): Token
  • Subscribe to highlight object event. This is called whenever an object is highlighted.

    Parameters

    • handler: function

      Function that is called when event is triggered.

        • Parameters

          • isHighlighted: boolean

          Returns void

    Returns Token

    Token that can be used to unsubscribe from the event.

onMouseClick

  • Add event listener to Mouse Click Event

    Parameters

    Returns Token

    Token of the event listener

onMouseDoubleClick

  • Add event listener to Mouse Double Click Event

    Parameters

    Returns Token

    Token of the event listener

onMouseDown

  • Add event listener to Mouse Down Event

    Parameters

    Returns Token

    Token of the event listener

onMouseDrag

onMouseDragStart

onMouseDragStop

onMouseEnter

  • Add event listener to Enter Event

    Parameters

    Returns Token

    Token of the event listener

onMouseLeave

  • Add event listener to Mouse Leave Event

    Parameters

    Returns Token

    Token of the event listener

onMouseMove

  • Add event listener to Mouse Move Event

    Parameters

    Returns Token

    Token of the event listener

onMouseUp

  • Add event listener to Mouse Up Event

    Parameters

    Returns Token

    Token of the event listener

onMouseWheel

onTouchEnd

  • Subscribe to Touch End event

    Parameters

    Returns Token

    Token of subscription

onTouchMove

onTouchStart

restore

  • restore(): this
  • Tell the owning chart to restore this component.

    Returns this

    Object itself.

setAutoScrollingEnabled

  • setAutoScrollingEnabled(enabled: boolean): this
  • Set whether series is taken into account with automatic scrolling and fitting of attached axes.

    By default, this is true for all series.

    By setting this to false, any series can be removed from axis scrolling/fitting.

     // Example syntax, remove series from automatic scrolling / fitting.
     LineSeries.setAutoScrollingEnabled(false)
    

    Parameters

    • enabled: boolean

      true default, axes will take series into account in scrolling and fitting operations. false, axes will ignore series boundaries.

    Returns this

    Object itself for fluent interface.

setColorShadingStyle

  • Set Color Shading Style for series.

    Shading style changes the visual style of the rendering. See ColorShadingStyles for available shading styles.

    Use Simple color shading style:

    series3D.setShadingStyle(new ColorShadingStyles.Simple())
    

    Use Phong color shading style:

    series3D.setShadingStyle(new ColorShadingStyles.Phong())
    

    Configuring specular highlight for Phong shading style:

    series3D.setShadingStyle(new ColorShadingStyles.Phong({
         specularReflection: 0.5,
         specularColor: ColorRGBA(255, 255, 255)
    }))
    

    Parameters

    Returns this

    Object itself for fluent interface.

setCullMode

  • Set culling of this Surface grid series.

    Culling means skipping drawing of specific geometry parts, based on its orientation.

    'disabled' -> full geometry is drawn.

    'cull-back' -> the behind of geometry is not drawn.

    'cull-front' -> the front of geometry is not drawn.

    Surface series default cull mode is 'disabled' to show both sides of the surface.

    Parameters

    • mode: CullMode3D | boolean

      CullMode3D or false | true to disable/enable culling respectively.

    Returns this

    Object itself for fluent interface.

setDepthTestEnabled

  • setDepthTestEnabled(enabled: boolean): this
  • Set 3D depth test enabled for this series.

    By default this is enabled, meaning that any series that is rendered after this series and is behind this series will not be rendered.

    Can be disabled to alter 3D rendering behavior.

     // Example syntax, disable depth test.
     pointSeries3D.setDepthTestEnabled(false)
    

    Parameters

    • enabled: boolean

      Depth test enabled?

    Returns this

    Object itself for fluent interface.

setFillStyle

  • Set fill style of Surface Grid.

    Supported fill styles:

    PalettedFill:

    Look-up dynamic per-CELL color based on a look up property and a color look up table (LUT).

    SurfaceScrollingGridSeries3D supports several different look-up modes:

    lookUpProperty: 'value':

    Color each CELL based on its INTENSITY value. Cell intensity values can be specified with invalidateIntensityValues.

     // Example, enable dynamic coloring based on cell intensity data.
     surfaceGridSeries
         .setFillStyle(new PalettedFill({
             lookUpProperty: 'value',
             lut: new LUT({
                 interpolate: true,
                 steps: [
                     { value: 0, color: ColorRGBA(0, 0, 0) },
                     { value: 100, color: ColorRGBA(255, 0, 0) }
                 ]
             })
         }))
    

    lookUpProperty: 'x' | 'y' | 'z':

    Color each CELL based on one of its axis coordinates.

     // Example, enable dynamic coloring based on cell Y coordinate.
     surfaceGridSeries
         .setFillStyle(new PalettedFill({
             lookUpProperty: 'y',
             lut: new LUT({
                 interpolate: true,
                 steps: [
                     { value: 0, color: ColorRGBA(0, 0, 0) },
                     { value: 100, color: ColorRGBA(255, 0, 0) }
                 ]
             })
         }))
    

    Intensity based dynamic coloring can further be configured with setIntensityInterpolation to enable or disable automatic interpolation of Intensity values. This is enabled by default.

    SolidFill:

    Solid color for entire Surface Grid fill.

     // Example, solid surface grid fill.
     heatmapSeries.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    

    If only wireframe rendering is desired, using emptyFill is recommended for better performance.

    emptyFill:

    Disables Surface Grid fill.

     // Example, hide heatmap fill and show wireframe.
     heatmapSeries
         .setFillStyle(emptyFill)
         .setWireframeStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    

    Related functionality:

    Parameters

    Returns this

    Object itself.

setHighlightOnHover

  • setHighlightOnHover(state: boolean): this
  • Set highlight on mouse hover enabled or disabled.

    Mouse interactions have to be enabled on the component for this to function as expected. See setMouseInteractions for more information.

    Parameters

    • state: boolean

      True if highlighting on mouse hover, false if no highlight on mouse hover

    Returns this

    Object itself for fluent interface.

setHighlighted

  • setHighlighted(highLight: boolean): this
  • Enable or disable forced highlighting of component

    Parameters

    • highLight: boolean

      True for enabled and false for disabled

    Returns this

    component itself for fluent interface

setIntensityInterpolation

  • Set surface intensity interpolation mode.

    This only affects surface grid with INTENSITY based dynamic coloring, see setFillStyle for more information.

    This feature is enabled by default ('bilinear').

    'disabled' or undefined: Interpolation disabled; draw data exactly as it is.

    'bilinear': Each PIXEL is colored based on an Bi-linearly interpolated intensity value based on the 4 closest real intensity values.

    Parameters

    Returns this

    Object itself for fluent interface.

setMouseInteractions

  • setMouseInteractions(state: boolean): this
  • Set component mouse interactions enabled or disabled.

    Disabling mouse interactions means that the objects below this component can be interacted through it.

    Possible side-effects from disabling mouse interactions:

    • Mouse events are not triggered. For example, onMouseMove.
    • Mouse driven highlighting will not work.

    Parameters

    • state: boolean

      Specifies state of mouse interactions

    Returns this

    Object itself for fluent interface

setName

  • setName(name: string): this
  • Sets the name of the Component updating attached LegendBox entries

    Parameters

    • name: string

      Name of the Component

    Returns this

    Object itself

setWireframeStyle

  • Set wireframe style of Surface Grid.

    Wireframe consists of thin lines drawn around the borders of each surface CELL. They are generally enabled to improve the perception of surface shape.

    Wireframe style is defined as LineStyle.

     // Example 1, enable wireframe.
     heatmapSeries.setWireframeStyle(new SolidLine({
         thickness: 1,
         fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) })
     }))
    
     // Example 2, disable wireframe.
     heatmapSeries.setWireframeStyle(emptyLine)
    

    At this time, only solid wireframe rendering is supported. In future, this could be extended to coloring wireframe based on some dynamic properties (X, Y, Z, Intensity) similarly as surface fill.

    Related functionality:

    Parameters

    Returns this

    Object itself.