Options
All
  • Public
  • Public/Protected
  • All
Menu

Class HeatmapScrollingGridSeriesIntensityValues

Series class for visualizing a Heatmap Grid, with API for pushing data in a scrolling manner (append new data on top of existing data).

HeatmapScrollingGridSeriesIntensityValues is optimized for massive amounts of data - here are some reference specs on average PC to give an idea:

  • Scrolling Heatmap Chart with 2 million incoming data points per second (rows: 2048, 1000 columns/s) runs consistently and smoothly with 60 FPS and no stuttering. CPU usage stays easily below 40%.
  • Scrolling Heatmap Chart with 8 million incoming data points per second (rows: 4096, 2000 columns/s) runs consistently and smoothly with 60 FPS and minor stuttering.

HeatmapScrollingGridSeriesIntensityValues max data amount is entirely restricted by the client hardware RAM and more specifically amount of RAM usable by the context running LightningChart JS. If performance suddenly plummets at some approximate data threshold, then it is likely that there is not enough RAM available. Use data cleaning configuration and suitable Axis intervals to adjust to your hardware limitations.

Each cell of the heatmap grid is associated with a numeric intensity value, which can be used in conjuction with a Color look up table (LUT).

Created with ChartXY.addHeatmapScrollingGridSeries.

Frequently used API:

Index

Properties

Readonly axisX

axisX : Axis

Axis X

Readonly axisY

axisY : Axis

Axis Y

Readonly chart

chart : ChartXY

Readonly scale

scale : LinearScaleXY

Scale of the series

Methods

addIntensityValues

  • addIntensityValues(intensityValues: number[][]): this
  • Push a Matrix of intensity values into the Heatmap grid. Each value describes one cell in the grid.

    Order of data is selected when creating the series;

    scrollDimension: 'columns' ->

     [
         [
             0, // Intensity value column = 0, row = 0
             0, // Intensity value column = 0, row = 1
             0, // Intensity value column = 0, row = n
         ],
         [
             0, // Intensity value column = 1, row = 0
             0, // Intensity value column = 1, row = 1
             0, // Intensity value column = 1, row = n
         ],
     ]
    

    scrollDimension: 'rows' ->

     [
         [
             0, // Intensity value row = 0, column = 0
             0, // Intensity value row = 0, column = 1
             0, // Intensity value row = 0, column = n
         ],
         [
             0, // Intensity value row = 1, column = 0
             0, // Intensity value row = 1, column = 1
             0, // Intensity value row = 1, column = n
         ],
     ]
    

    Example usage:

     // Create x-scrolling intensity heatmap.
     const series = ChartXY.addHeatmapScrollingGridSeries({
         heatmapDataType: 'intensity',
         scrollDimension: 'columns',
         resolution: 5,
         start: { x: 0, y: 0 },
         step: { x: 1, y: 1 },
     })
    
     // Push a column into heatmap.
     series.addIntensityValues([
         [0, 10, 0, 20, 0]
     ])
    

    invalidateIntensityValues can trigger warnings when used controversially. In production applications, these can be controlled with LightningChartOptions.warnings.

    Parameters

    • intensityValues: number[][]

      Matrix of intensity values - Each array represents a column or row, and each number represents a cell in the grid.

    Returns this

    Object itself for fluent interface.

addMarker

  • Add Marker to the Series.

    Type parameters

    Parameters

    • cursorBuilder: StaticCursorXYBuilder<PointMarkerType, ResultTableBackgroundType>

      StaticCursorBuilderXY object for customized look of marker. MarkerBuilders.XY can be used to build a custom one from scratch.

    Returns SeriesMarkerXY<PointMarkerType, ResultTableBackgroundType>

    SeriesMarkerXY

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 previous data pushed to the series.

    Returns this

    Object itself for fluent interface.

dispose

  • dispose(): this
  • Remove everything related to the object from all collections associated with rendering cycle and allows the object to be collected by GC

    Returns this

    Object itself for fluent interface

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.

getBoundaries

  • getBoundaries(): Interval<Point>
  • Returns Interval<Point>

getCursorEnabled

  • getCursorEnabled(): boolean
  • Returns boolean

    Whether Cursor is enabled or not

getCursorInterpolationEnabled

  • getCursorInterpolationEnabled(): boolean
  • Get if cursor interpolates solved data-points along series by default.

    Returns boolean

    Boolean flag

getCursorResultTableFormatter

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

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.

getPixelInterpolationMode

getWireframeStyle

  • Get style of wireframe.

    Wireframe is a line grid that highlights the edges of each cell of the heatmap.

    Returns LineStyle

    LineStyle.

getXMax

  • getXMax(): number
  • Returns number

    Max X value of the series

getXMin

  • getXMin(): number
  • Returns number

    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

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.

offHover

  • offHover(token: Token): boolean
  • Remove event listener from Series Hover 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

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.

onHover

  • onHover(clbk: function): Token
  • Add event listener to Series Hover Event. Hover event is a custom mouse-event designed for Series that is the main link between Cursors and Series.

    Parameters

    • clbk: function

      Callback function that is called whenever mouse enters / moves or leaves the Series

        • Parameters

          Returns void

    Returns Token

    Token of the event listener

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 series.

    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.

setCursorEnabled

  • setCursorEnabled(state: boolean): this
  • Configure whether cursors should pick on this particular series or not.

     // Example, prevent chart auto cursor from snapping to a series.
     LineSeries.setCursorEnabled(false)
    

    Related API:

    • setCursorResultTableFormatter | configure formatting of result table contents, when this series is pointed.
    • setCursorSolveBasis | configure basis of finding nearest data point for the series ('nearest-x', 'nearest', etc.). This method is not available for all series types (more support will be added in near future).
    • setCursorInterpolationEnabled | configure whether cursor should interpolate the displayed data point between the two closest data points, or snap to the nearest real data point. This method is not available for all series types.
    • ChartXY.setAutoCursorMode | configure behavior when auto cursor is visible.

    Parameters

    • state: boolean

    Returns this

setCursorInterpolationEnabled

  • setCursorInterpolationEnabled(state: boolean): this
  • Set cursor interpolation enabled.

    If enabled, cursors will display bilinearly interpolated intensity values from the four closest heatmap cells to the mouse pointer. Otherwise, cursor will display the nearest actual data point supplied by user.

    Parameters

    • state: boolean

      Boolean flag

    Returns this

    Object itself for fluent interface

setCursorResultTableFormatter

  • Method for customizing contents of ResultTables when pointing at this Series.

     HeatmapScrollingGridSeries.setCursorResultTableFormatter((builder, series, dataPoint) =>
         builder
             .addRow('Pointing at')
             .addRow(`${dataPoint.x.toFixed(1)}, ${dataPoint.y.toFixed(1)}`)
             .addRow(`= ${dataPoint.intensity.toFixed(1)}`),
     )
    

    Default Axis formatting can be referenced by using Axis.formatValue method.

    Parameters

    Returns this

    Object itself

setDataCleaning

  • setDataCleaning(arg: undefined): this
  • setDataCleaning(arg: object): this
  • setDataCleaning(arg: object): this
  • Disable automatic data cleaning.

     // Example syntax, disable data cleaning.
     series.setDataCleaning(undefined)
    

    Parameters

    • arg: undefined

      Data cleaning configuration.

    Returns this

    Object itself for fluent interface.

  • Enable automatic data cleaning by minDataPointCount configuration.

    Specifying minDataPointCount enables lazy cleaning of data that is outside view as long as the remaining data amount doesn't go below the configured threshold.

     // Example syntax for specifying minDataPointCount
     series.setDataCleaning({ minDataPointCount: 10000 })
    

    Usage of minDataPointCount is recommended in most common applications that require automatic data cleaning. The actual value is often not very particular, just setting it above 0 to enable it is usually enough (lazy data cleaning of out of view data).

     // Example, enable lazy data cleaning of out of view data.
     series.setDataCleaning({ minDataPointCount: 1 })
    

    Parameters

    • arg: object

      Data cleaning configuration.

      • minDataPointCount: number | undefined

    Returns this

    Object itself for fluent interface.

  • Enable automatic data cleaning by maxDataPointCount configuration.

    Specifying maxDataPointCount results in data cleaning always happening exactly when total data amount exceeds the supplied threshold.

     // Example syntax for specifying maxDataPointCount
     series.setDataCleaning({ maxDataPointCount: 10000 })
    

    maxDataPointCount is usually used in memory limited applications to prevent running out of memory.

    maxDataPointCount is currently only supported by only select series:

    If the feature receives good support and usage from the user base, it might be expanded to all series types in a future release.

    Parameters

    • arg: object

      Data cleaning configuration.

      • maxDataPointCount: number | undefined

    Returns this

    Object itself for fluent interface.

setFillStyle

  • Set fill style of heatmap series.

    Supported fill styles:

    PalettedFill:

    Colors heatmap fill by looking color up from LUT based on heatmap intensity values.

     // Example, color look up by intensity values.
     heatmapSeries.setFillStyle(
         new PalettedFill({
             lut: new LUT({
                 steps: [
                     { value: 0, color: ColorCSS('red') },
                     { value: 20, color: ColorCSS('blue') },
                 ],
                 interpolate: true,
             }),
         }),
     )
    

    Intensity values are defined when data is pushed in with addIntensityValues method.

    • SolidFill:

    Solid color for all heatmap cells. Supported for debugging purposes mainly.

    emptyFill:

    Disables heatmap fill.

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

    Parameters

    Returns this

    Object itself for fluent interface.

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

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

setPixelInterpolationMode

  • Set heatmap fill pixel interpolation mode.

    'disabled' or undefined: Interpolation disabled; all pixels within a grid cell share the same color.

    'bilinear': Each pixel is colored individually by bilinear interpolation.

    Parameters

    Returns this

    Object itself for fluent interface.

setWireframeStyle

  • Set style of wireframe.

    Wireframe is a line grid that highlights the edges of each cell of the heatmap.

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

    Parameters

    Returns this

    Series itself for fluent interface.

solveNearestFromScreen

  • solveNearestFromScreen(location: Point, interpolate: boolean): undefined | CursorPoint
  • Parameters

    • location: Point
    • interpolate: boolean

    Returns undefined | CursorPoint

solveNearestFromSegment

  • solveNearestFromSegment(location: Point, segment: HeatmapGridStatic, interpolate: boolean): undefined | CursorPoint
  • Parameters

    • location: Point
    • segment: HeatmapGridStatic
    • interpolate: boolean

    Returns undefined | CursorPoint