This widget displays a metrics values into a scatter chart.

This widget displays XY points where X and Y are the values of the two input metrics and the value pairs are obtained by matching data series by timestamp.

Design View

In the visual editor, you can find the Scatter Chart icon under the Charts component palette group.

You can drag and drop the widget in the grid, and then according to your needs configure the following sub-elements:

Metric: the metric whose values must be loaded by the scatter chart.

Code View

Template Syntax

Below you can find some examples of how to use the component within a template.


<scatter-chart-widget [title]="'Temperature by Power'">
      <metric name="Temperature"></metric>
      <metric name="Power"></metric>
</scatter-chart-widget>

Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

<scatter-chart-widget>

PROPERTIES

Bullet Color

The color used to display the scatter chart points.
Type: STRING | Optional | Default: #08B05B
[config]="{bulletColor: 'fooBar'}"

Bullet Fill Opacity

The opacity used to fill bulled with the bulletColor.
Type: STRING | Optional | Default: 0.7
[config]="{bulletFillOpacity: 'fooBar'}"

CSS Class

The name(s) of the CSS class used to customize the widget layout.
Type: STRING | Optional
class="my-custom-class"

Default Loading Period

The default date and time filtering period applied when entering the page.
Type: ENUM | Optional | Values:

TODAY

YESTERDAY

LAST_7_DAYS

LAST_30_DAYS

THIS_MONTH

LAST_MONTH

[config]="{defaultPeriodValue: 'LAST_7_DAYS'}"

Export Enabled

The boolean flag indicating whether the data export is enabled.
Type: BOOLEAN | Optional | Values:

true

false

[config]="{exportEnabled: true}"

Export File Type

The export file type
Type: ENUM | Optional | Values:

json

csv

xlsx

[config]="{exportFileType: 'csv'}"

Height

The widget desired height (default 480px).
Type: STRING | Optional
[config]="{height: '250px'}"

Period Filter Enabled

The boolean flag indicating whether the embedded period filter is available.
Type: BOOLEAN | Optional | Values:

true

false

[config]="{filterEnabled: true}"

Title

The title displayed on the top part of the widget box.
Type: STRING | Optional
[title]="'Details'"

Visibility Condition

The expression that allows you to reduce the visibility of the element.
Type: STRING | Optional
*ngIf="getUser().organizationId != null"

SUB-ELEMENTS

Metric

The metric whose values must be loaded by the scatter chart.
multiple | mandatory

<metric name="Temperature"></metric>

PROPERTIES

Filter

The name of the filter used to transform and display values.
Type: FILTER | Optional
filter="fooBarFilter"

Label

The metric alternative label.
Type: STRING | Optional
label="Temperature"

Name

The metric whose value(s) must be loaded by the widget.
Type: METRIC | Mandatory
name="Temperature"

Unit

The unit of measurement to be displayed along the value.
Type: STRING | Optional
unit="°C"