Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Dashboard

Dashboard is a component for flexible positioning of multiple Charts efficiently.

Upon its creation an amount of columns and rows is specified. Charts and other components can then be placed in cells with given column and row-locations and sizes (using methods of Dashboard. For example: Dashboard.createChartXY.

The Dashboard will distribute the available space for columns and rows, which users can resize with mouse and touch interactions.

Index

Properties

createChart3D

createChart3D : function

Add new Chart3D to dashboard at specified location and span.

Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.

param

Options object for creating a Chart3D.

returns

Chart3D.

createChartXY

createChartXY : function

Add new ChartXY to dashboard at specified location and span.

Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.

param

Options object for creating a chartXY.

returns

ChartXY.

    • Type parameters

      Parameters

      • options: ChartOptions<CursorPointMarkerType, CursorResultTableBackgroundType>

      Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

createFunnelChart

createFunnelChart : function

Add new FunnelChart to dashboard at specified location and span.

Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.

param

Options object for creating a FunnelChart.

returns

FunnelChart.

    • Type parameters

      Parameters

      Returns InstanceType<FunnelChartType>

createGaugeChart

createGaugeChart : function

Add new GaugeChart to dashboard at specified location and span.

Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.

param

Options object for creating a GaugeChart.

returns

GaugeChart.

    • Type parameters

      Parameters

      Returns InstanceType<GaugeChartType>

createLegendBoxPanel

createLegendBoxPanel : function

Create a new legend box panel, a convenience component for placing legend box items from multiple different charts into a single row layout, to dashboard at specified location and span.

Refer to UILegendBoxPanel for more information, like example usage.

Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.

param

Options object for creating a legend box panel.

returns

UILegendBoxPanel.

createMapChart

createMapChart : function

Factory for MapChart. This chart visualizes a Map of the selected part of the world. Defaults to the entire world. It has built-in cursor functionality and supports dynamic region coloring.

To learn more about its features, refer to MapChart.

Dashboard cell configuration:

When inside a Dashboard, the chart location relative to the Dashboard must be supplied when it is created.

 // Example, dashboard cell configuration.
 const chart = Dashboard.createMapChart({
     // X location, 0 = left.
     columnIndex: 0,
     // Y location, 0 = top.
     rowIndex: 0,
     // Amount of X cells allocated for this chart.
     columnSpan: 1,
     // Amount of Y cells allocated for this chart.
     rowSpan: 1,
 })

Readonly configuration:

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

 // Example, specify map type.
 const chart = LightningChart.Map({
     type: MapTypes.Europe
 })

For general chart properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.

For MapChart specific properties, refer to MapChartOptions.

param

Object with readonly configuration arguments for MapChart.

returns

Created chart.

    • Type parameters

      Parameters

      Returns MapChart<SelectedMapType, CursorPointMarkerType, CursorResultTableBackgroundType>

createPieChart

createPieChart : function

Add new PieChart to dashboard at specified location and span.

Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.

param

Options object for creating a PieChart.

returns

PieChart.

    • Type parameters

      Parameters

      Returns InstanceType<PieChartType>

createPolarChart

createPolarChart : function

Add new PolarChart to dashboard at specified location and span.

Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.

param

Options object for creating a PolarChart chart.

returns

PolarChart.

    • Type parameters

      Parameters

      • options: PolarOptions<CursorPointMarkerType, CursorResultTableBackgroundType>

      Returns PolarChart<CursorPointMarkerType, CursorResultTableBackgroundType>

createPyramidChart

createPyramidChart : function

Add new PyramidChart to dashboard at specified location and span.

Throws an error if either column/row index is less than 0 or index + span is more than Dashboard's numberOfColumns/Rows.

param

Options object for creating a PyramidChart.

returns

PyramidChart

    • Type parameters

      Parameters

      Returns InstanceType<PyramidChartType>

createSpiderChart

createSpiderChart : function

Add new SpiderChart to dashboard at specified location and span.

Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.

param

Options object for creating a Spider chart.

returns

SpiderChart.

    • Type parameters

      Parameters

      • options: SpiderOptions<CursorPointMarkerType, CursorResultTableBackgroundType>

      Returns SpiderChart<CursorPointMarkerType, CursorResultTableBackgroundType>

createUIPanel

createUIPanel : function

Create a container for UI objects on dashboard with specified location and span.

Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.

param

Options object for creating a UIPanel.

returns

Panel.

createZoomBandChart

createZoomBandChart : function

Add new ZoomBandChart to dashboard at specified location and span.

Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.

param

Options object for creating a ZoomBandChart.

returns

ZoomBandChart.

Readonly engine

engine : PublicEngine

Public, safe interface for Dashboards rendering engine.

Readonly uiScale

uiScale : LinearScaleXY

Scale that represents dashboard area in percents (0-100).

Methods

addLegendBox

  • Add a legendbox.

    Legendbox is a type of UI element, that floats inside the chart/component it is created inside. It can be freely moved around with user interactions, as well as positioned in application code.

    The purpose of legendbox is to describe the series and other visual components of the chart, by displaying their names and colors. Hovering over a series' legendbox entry will highlight that series, and clicking on the entry will toggle that series' visibility.

    Legendbox alignment:

    Alignment of legendbox can be selected by supplying one of the available LegendBoxBuilders to addLegendBox:

     // Default (vertical) LegendBox.
     const legendBox = ChartXY.addLegendBox()
    
     // Horizontal LegendBox.
     const horizontalLegendBox = ChartXY.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
    

    Custom Legendbox positioning:

    By default LegendBoxes are placed on the right side, or bottom of the chart (depending on alignment).

    A custom location can be configured with UIElement API:

    Position coordinate system is specified when creating legendbox.

    1. LegendBox with default positioning coordinate system.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox )
         // Position = [0, 100] as percentages.
         .setPosition({ x: 50, y: 50 })
    
    1. Position in pixel coordinate system.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox, chart.pixelScale )
         // Position = pixels.
         .setPosition({ x: 300, y: 100 })
    
    1. Position on Axes.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
         // Position = Axis values.
         .setPosition({ x: 5, y: 5 })
    

    Inside Dashboard, a UILegendBoxPanel can also be used for simplified creation of legendboxes for several charts.

    Parameters

    • builder: UILegendBoxBuilder

      LegendBoxBuilder. If omitted, VerticalLegendBox will be selected. Use LegendBoxBuilders for selection.

    • scale: UserScaleDefinition

      Optional parameter for altering the coordinate system used for positioning the LegendBox. Defaults to whole Chart in percentages [0, 100].

    Returns LegendBox & UIElement

    Object with two interfaces: LegendBox and UIElement.

addUIElement

  • Add a stand-alone UIElement using a builder.

    Example usage:

    1. TextBox with default positioning coordinate system.
     addUIElement( UIElementBuilders.TextBox )
         // Position = [0, 100] as percentages.
         .setPosition({ x: 50, y: 50 })
    
    1. Position in pixel coordinate system.
     addUIElement( UIElementBuilders.TextBox, chart.pixelScale )
         // Position = pixels.
         .setPosition({ x: 300, y: 100 })
    
    1. Position on Axes.
     addUIElement( UIElementBuilders.TextBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
         // Position = Axis values.
         .setPosition({ x: 5, y: 5 })
    
    typeparam

    Type of UIElement that is specified by 'builder'-parameter.

    Type parameters

    • UiElementType: UIPart = UITextBox

    Parameters

    • uiElementBuilder: UIElementBuilder<UiElementType>
    • scale: UserScaleDefinition

      Optional parameter for altering the coordinate system used for positioning the UIElement. Defaults to whole Dashboard in percentages [0, 100].

    Returns UiElementType & UIElement

    Object that fulfills interfaces: UIElementType (typeparam) and UIElement

disableAnimations

  • disableAnimations(): this
  • Disable all animations for all charts in the dashboard.

    After calling this function, animations (Zooming, scaling) for all Charts will be disabled. Animations must be recreated manually for each chart afterwards.

    deprecated

    Deprecated in v3.1.0. Will be removed in v4.0.0. Use setAnimationsEnabled instead.

    Returns this

    Dashboard itself for fluent interface.

dispose

  • dispose(): this
  • Permanently dispose the component.

    To fully allow Garbage-Collection to free the resources used by the component, make sure to remove any references to the component and its children in application code.

    let chart = ...ChartXY()
    let axisX = chart.getDefaultAxisX()
    // Dispose Chart, and remove all references so that they can be garbage-collected.
    chart.dispose()
    chart = undefined
    axisX = undefined
    

    Returns this

    Object itself for fluent interface

forEachChart

  • forEachChart(clbk: function): void
  • Use forEach function on charts inside dashboard. Dashboard filters any other types of cells out.

    Parameters

    • clbk: function

      forEach function for Chart

        • Parameters

          • chart: Chart

          Returns void

    Returns void

getAnimationsEnabled

  • getAnimationsEnabled(): boolean
  • Get animations disable/enable state.

    Returns boolean

    Animations default state.

getBackgroundFillStyle

  • Get fillStyle of dashboard

    Returns FillStyle

    FillStyle

getBackgroundStrokeStyle

  • Get stroke style of dashboard background.

    Returns LineStyle

    LineStyle

getHeight

  • getHeight(): [number | undefined, number | undefined] | undefined
  • Get the minimum and maximum vertical boundaries used for the Dashboard.

    Returns [number | undefined, number | undefined] | undefined

    Vertical boundaries as a tuple [minSize, maxSize]

getSplitterStyle

  • Get style of Dashboard splitters.

    Returns LineStyle

    LineStyle object

getSplitterStyleHighlight

  • Get style of Dashboard splitters when highlighted.

    Returns LineStyle

    LineStyle object

getTheme

  • Get theme used for the dashboard.

    Returns Theme

    Theme

getWidth

  • getWidth(): [number | undefined, number | undefined] | undefined
  • Get the minimum and maximum horizontal boundaries used for the Dashboard.

    Returns [number | undefined, number | undefined] | undefined

    Horizontal boundaries as a tuple [minSize, maxSize]

mapCharts

  • mapCharts(clbk: function): T[]
  • Use mapping function on all charts inside dashboard. Dashboard filters any other types of cells out.

    Type parameters

    • T

    Parameters

    • clbk: function

      Map function for Chart

        • Parameters

          • chart: Chart

          Returns T

    Returns T[]

saveToFile

  • saveToFile(fileName: string, type?: undefined | string, encoderOptions?: undefined | number): this
  • Capture rendered state in an image file. Prompts the browser to download the created file.

    NOTE: The download might be blocked by browser/plugins as harmful. To prevent this, only call the method in events tied to user-interactions. From mouse-event handlers, for example.

    Has two optional parameters which directly reference JavaScript API HTMLCanvasElement.toDataURL. For supported image formats, compression quality, Etc. refer to:

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

    Example usage:

    // Download 'screenshot.png'
    Dashboard.saveToFile('screenshot')
    // Attempt download 'maybeNotSupported.bmp'
    Dashboard.saveToFile('maybeNotSupported', 'image/bmp')
    // Attempt download jpeg.file with specified compression quality
    Dashboard.saveToFile('fileName', 'image/jpeg', 0.50)
    
    sideeffect

    If 'type' is not supported by browser, an Error will be thrown.

    Parameters

    • fileName: string

      Name of prompted download file as string. File extension shouldn't be included as it is automatically detected from 'type'-argument.

    • type: undefined | string

      A DOMString indicating the image format. The default format type is image/png.

    • encoderOptions: undefined | number

      A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92.

    Returns this

setAnimationsEnabled

  • setAnimationsEnabled(animationsEnabled: boolean | undefined): this
  • Disable/Enable all animations of the Chart.

    Parameters

    • animationsEnabled: boolean | undefined

      Boolean value to enable or disable animations.

    Returns this

    Chart itself for fluent interface.

setBackgroundFillStyle

  • Set fillStyle of dashboard background.

    Parameters

    Returns this

    Object itself

setBackgroundStrokeStyle

setColumnWidth

  • setColumnWidth(index: number, relativeWidth: number): this
  • Set width of a column. By default column widths are equal.

    Example usage:

    // Dashboard with 3 columns with widths (20%, 20%, 60%) of dashboard width
    dashboard.setColumnWidth( 0, 1 )
    dashboard.setColumnWidth( 1, 1 )
    dashboard.setColumnWidth( 2, 3 )
    

    Parameters

    • index: number

      Index of the column (starts from 0)

    • relativeWidth: number

      Relative width of the column

    Returns this

setHeight

  • setHeight(boundary: number | [number | undefined, number | undefined] | undefined): this
  • Set the minimum and maximum boundaries for dashBoard vertical size.

    Parameters

    • boundary: number | [number | undefined, number | undefined] | undefined

      Single value applied to both minimum and maximum size, or a tuple for [min, max] size in pixels.

    Returns this

setRowHeight

  • setRowHeight(index: number, relativeHeight: number): this
  • Set height of a row. By default row heights are equal.

    Example usage:

    // Dashboard with 3 rows with heights (20%, 20%, 60%) of dashboard height
    dashboard.setRowHeight( 0, 1 )
    dashboard.setRowHeight( 1, 1 )
    dashboard.setRowHeight( 2, 3 )
    

    Parameters

    • index: number

      Index of the row (starts from 0)

    • relativeHeight: number

      Relative height of the row

    Returns this

setSplitterStyle

  • Set style of Dashboard splitters.

    Example usage:

    // Specified LineStyle
    Dashboard.setSplitterStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
    // Changed thickness
    Dashboard.setSplitterStyle((solidLine) => solidLine.setThickness(5))
    // Hidden
    Dashboard.setSplitterStyle(emptyLine)
    

    Parameters

    Returns this

    Chart itself

setSplitterStyleHighlight

  • Set style of Dashboard splitters when highlighted.

    Example usage:

    // Specified LineStyle
    Dashboard.setSplitterStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
    // Changed thickness
    Dashboard.setSplitterStyle((solidLine) => solidLine.setThickness(5))
    // Hidden
    Dashboard.setSplitterStyle(emptyLine)
    

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle> | undefined

      Either a LineStyle object or a function, which will be used to modify current value or undefined for automatic value based on normal style.

    Returns this

    Chart itself

setWidth

  • setWidth(boundary: number | [number | undefined, number | undefined] | undefined): this
  • Set the minimum and maximum boundaries for dashBoard horizontal size.

    Parameters

    • boundary: number | [number | undefined, number | undefined] | undefined

      Single value for static engine size, or a tuple for size range [min, max] in pixels.

    Returns this