Options
All
  • Public
  • Public/Protected
  • All
Menu

Class PointSeries3D

Series type for visualizing a collection of { x, y, z } coordinates by different markers

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

  • A static data set in millions data points range is rendered in hundreds of milliseconds (~200ms). Afterwards chart can be rotated and zoomed with 60 FPS.
  • With streaming data, even millions of data points can be streamed in every second, while retaining an interactive document.

Creating PointSeries3D:

PointSeries3D are created with Chart3D.addPointSeries method.

Some properties of PointSeries3D can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example,
 const pointSeries3D = Chart3D.addPointSeries({
     // Enable individual data points size.
     individualPointSizeEnabled: true
 })

To learn about available properties, refer to PointSeriesOptions3D.

Frequently used methods:

  • Append data points to series | add
  • Remove all data points from series | clear
  • Configure style of points | setPointStyle
  • Remove series temporarily, or permanently | dispose
  • Restore series after dispose | restore

Color shading style.

By default, PointSeries3D uses Phong shading style.

This can be changed with PointSeries3D.setColorShadingStyle(new ColorShadingStyles.Simple())

Related information:

There is another series type for visualizing large sets of 3D coordinates with markers: PointCloudSeries3D

PointCloudSeries3D works otherwise same, except that it has simplified render process (all markers are 2D geometry), which is faster and can be really powerful in visualizing large low-detail data sets!

Index

Methods

add

  • Append a single XYZ coordinate or list of coordinates into the series.

     // Example, add single data point.
     pointSeries.add({ x: 0, y: 0, z: 0 })
    
     // Example, add list of data points.
     pointSeries.add([
         { x: 0, y: 100, z: 50 },
         { x: 10, y: 50, z: 150 },
         { x: 20, y: 75, z: 100 },
     ])
    

    Performance-wise, it is more efficient to call add just 1 time with an Array of points, instead of calling add several times with 1 point at a time.

    Data points can also be grouped with extra optional properties:

    • size | Point size.
    • color | Point color.
    • value | Point value for dynamic coloring.

    setPointStyle method documentation contains detailed information about each of these features and how to use them.

    Parameters

    Returns this

    Object itself for fluent interface.

attach

  • attach(entry: LegendBoxEntry, disposeOnClick?: undefined | false | true): this
  • Attach object to an legendBox entry

    Parameters

    • entry: LegendBoxEntry

      Object which has to be attached

    • disposeOnClick: undefined | false | true

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

    Returns this

    Object itself for fluent interface

clear

  • clear(): this
  • Clear all previously pushed data points from the series.

     // Example usage
     pointSeries.clear()
    

    Returns this

    Object itself for fluent interface.

dispose

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

    Returns this

    Object itself.

getColorShadingStyle

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
  • Returns boolean

    the state of highlighted flag

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.

getPointAmount

  • getPointAmount(): number

getPointStyle

getPointStyleHighlight

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

  • Subscribe to Mouse Wheel event

    Parameters

    Returns Token

    Token of subscription

onTouchEnd

  • Subscribe to Touch End event

    Parameters

    Returns Token

    Token of subscription

onTouchMove

  • Subscribe to Touch Move event

    Parameters

    Returns Token

    Token of subscription

onTouchStart

  • Subscribe to Touch Start event

    Parameters

    Returns Token

    Token of subscription

restore

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

    Returns this

    Object itself.

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.

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

setPointStyle

  • Set point style of Series.

    Example syntax:

     // Example syntax, Specify new style
     pointSeries3D.setPointStyle( new PointStyle3D.Triangulated({
         size: 10,
         shape: 'sphere',
         fillStyle: new SolidFill({ color: ColorHEX('#FFF') })
     }) )
    
     // Example syntax, Change point color
     pointSeries3D.setPointStyle( (pointStyle) => pointStyle
         .setFillStyle( new SolidFill({ color: ColorHEX('#FFF') }) )
     )
    
     // Example syntax, Change point size
     pointSeries3D.setPointStyle( (pointStyle) => pointStyle
         .setSize( 10 )
     )
    
     // Example syntax, Change point shape
     pointSeries3D.setPointStyle( (pointStyle) => pointStyle
         .setShape( 'cube' )
     )
    

    Point coloring:

    Color of points is configured by the fillStyle property of active point style.

    Here is a list of all supported fill styles with feature descriptions and example syntax:

    SolidFill:

    Solid color for all points in series.

     // Example syntax, solid points color.
     pointSeries3D.setPointStyle(new PointStyle3D.Triangulated({
         fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }),
         size: 10,
         shape: 'sphere'
     }))
    

    PalettedFill:

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

     // Example syntax, dynamic points color.
     pointSeries3D.setPointStyle(new PointStyle3D.Triangulated({
         fillStyle: new PalettedFill({
             // lookUpProperty defines basis of selecting look up value (number).
             lookUpProperty: 'value',
             // lut defines table for mapping look up value (number) to a color.
             lut: new LUT({
                 interpolate: true,
                 steps: [
                     { value: 0, color: ColorRGBA(0, 0, 0) },
                     { value: 1, color: ColorRGBA(255, 0, 0) }
                 ]
             })
         }),
         size: 10,
         shape: 'sphere'
     }))
    

    PointSeries3D supports several different look-up modes:

    lookUpProperty: 'value':

    IMPORTANT: In order to use value property on data points, the feature has to be explicitly activated when the series is created:

     // Example syntax, enable individual data point values.
     const pointSeries3D = chart3D.addPointSeries({
         individualLookupValuesEnabled: true
     })
    

    value property is then added for every data point along side x, y and z:

     // Example syntax, individual data point values.
     pointSeries3D.add([
         { x: 0, y: 0, z: 0, value: 0 },
         { x: 1, y: 0, z: 2, value: 1 },
     ])
    

    Look-up value is read from data point value property.

    lookUpProperty: 'x':

    Look-up value is set to data point x coordinate on Axis.

    lookUpProperty: 'y':

    Look-up value is set to data point y coordinate on Axis.

    lookUpProperty: 'z':

    Look-up value is set to data point z coordinate on Axis.

    IndividualPointFill:

    Supply individual color for each data point.

    IMPORTANT: In order to use IndividualPointFill, the feature has to be explicitly activated when the series is created:

     // Example syntax, enable individual data point colors.
     const pointSeries3D = chart3D.addPointSeries({
         individualPointColorEnabled: true
     })
    

    color property is then added for every data point along side x, y and z:

     // Example syntax, individual data point colors.
     pointSeries3D.add([
         { x: 0, y: 0, z: 0, color: ColorRGBA(255, 0, 0) },
         { x: 1, y: 0, z: 2, color: ColorRGBA(0, 255, 0) },
     ])
    

    Point size:

    Size of points is configured by the size property of active point style.

    If required, points can also be individually sized by adding a size property to data points.

    IMPORTANT: In order to use size property, the feature has to be explicitly activated when the series is created:

     // Example syntax, enable individual data point size.
     const pointSeries3D = chart3D.addPointSeries({
         individualPointSizeEnabled: true
     })
    

    size property is then added for every data point along side x, y and z:

     // Example syntax, individual data point sizes.
     pointSeries3D.add([
         { x: 0, y: 0, z: 0, size: 5 },
         { x: 1, y: 0, z: 2, size: 10 },
     ])
    

    Parameters

    Returns this

    Object itself for fluent interface

setPointStyleHighlight

  • Set point style of Series when it is highlighted.

    Example syntax:

    • New TriangulatedPoints3D object
      pointSeries3D.setPointStyleHighlight( new PointStyle3D.Triangulated({
         size: 10,
         fillStyle: new SolidFill({ color: ColorHEX('#FFF') })
      }) )
      
    • Change point size
      pointSeries3D.setPointStyleHighlight( (pointStyle) => pointStyle
         .setSize( 10 )
      )
      
    • Change point shape
      pointSeries3D.setPointStyle( (pointStyle) => pointStyle
         .setShape( 'cube' )
      )
      
    • Assign highlight style automatically based on normal style
      pointSeries3D.setPointStyleHighlight( undefined )
      

    Supports same capabilities as setPointStyle (has more detailed documentation).

    Parameters

    Returns this

    Object itself for fluent interface.