XY Chart

Prev Next

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.

XY Chart

The widget by default uses the first defined metric as X values and the second one as Y values.

Additional metrics can be added, but in this case a custom Data Transformer must be defined, this will use the additional metrics to calculate the new X and Y values. Here is an example of a Data Transformer that uses a third metric to transform the new X values.

exports.xyDataTranformer = function() {
  function XYDataTranformer() {}
  XYDataTranformer.prototype.transform = function(data, args) {
    // console.log(data);
    // console.log(args);
    for(let i in data){
      data[i].rpm= data[i].rpm * data[i].ratio;
    }
    return data;
  };
  return XYDataTranformer;
}();

You can also display a stream chart by defining on the X or Y metrics the Paired Data Field which can be the name of another metric or the name of the data field generated by the custom data transformer (e.g. width2).

Configuration

Template Syntax

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


<!-- example with simple points -->
<xy-chart-widget [title]="'Temperature by Humidity'">
      <metric name="humidity"></metric>
      <metric name="temperature"></metric>      
</xy-chart-widget>

<!-- example with filled lines -->
<xy-chart-widget [config]="{showLines: true, baseAxis: 'Y', showTimestamps: true, height: '640px'}">
	<metric name="rpm" unit="rpm"></metric>
	<metric name="depth" unit="m"></metric>
</xy-chart-widget>

<!-- example with data transformer -->
<xy-chart-widget [title]="'Depth as a function of Width'" [config]="{dataTransformer: 'widthDataTranformer', showBullets: false, showLines: true, baseAxis: 'Y', showTimestamps: true}" [inputs]="{period: 'period'}">
	<metric name="width" unit="cm" [config]="{pairedField: 'width2'}"></metric>
	<metric name="depth" unit="m"></metric>
</xy-chart-widget>

Component Reference

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

XY Chart <xy-chart-widget>

Title

The title displayed on the top part of the widget box.

Name: title

Type: STRING | Optional

[title]="'Details'"

Controls

Export Enabled

The boolean flag indicating whether the data export is enabled.

Name: config.exportEnabled

Type: BOOLEAN | Optional

Default Value: false

[config]="{exportEnabled: true}"

Export File Type

The export file type

Name: config.exportFileType

Type: ENUM | Optional

Values: json, csv, xlsx

Default Value: csv

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

Period Filter Enabled

The boolean flag indicating whether the embedded period filter is available.

Name: config.filterEnabled

Type: BOOLEAN | Optional

Default Value: false

[config]="{filterEnabled: true}"

Scrollbar Enabled

The flag enabling the widget top scrollbar allowing the user to scroll and zoom data.

Name: config.scrollbarEnabled

Type: BOOLEAN | Optional

Default Value: false

[config]="{scrollbarEnabled: true}"

Data

Data Transformer

Name: config.dataTransformer

Type: FILTER | Optional

[config]="{dataTransformer: 'dateFormat'}"

Default Loading Period

The default date and time filtering period applied when entering the page.

Name: config.defaultPeriodValue

Type: ENUM | Optional

Values: TODAY, YESTERDAY, LAST_1_HOUR, LAST_6_HOURS, LAST_12_HOURS, LAST_24_HOURS, LAST_7_DAYS, LAST_30_DAYS, THIS_MONTH, LAST_MONTH, LAST_6_MONTHS, LAST_12_MONTHS, THIS_WEEK, LAST_WEEK, LAST_FULL_7_DAYS, LAST_FULL_30_DAYS, LAST_FULL_12_MONTHS

Default Value: LAST_7_DAYS

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

Period Variable

The id of the page's variable providing the date range filtering period, for instance the id of a <period-filter-field>.

Name: inputs.period

Type: STRING | Optional

[inputs]="{period: 'period'}"

Advanced

Base Axis

The base axis used to fill the chart area between the line and the axis itself. If not specified, only lines are displayed.

Name: config.baseAxis

Type: ENUM | Optional

Values: X, Y

[config]="{baseAxis: 'X'}"

Color

The color used to display the bullets and lines.

Name: config.color

Type: STRING | Optional

Default Value: #08B05B

[config]="{color: 'abc'}"

Fill Opacity

The opacity (0 to 1) used to fill the chart area.

Name: config.fillOpacity

Type: STRING | Optional

Default Value: 0.3

[config]="{fillOpacity: 'abc'}"

Line Width

Define the XY line width in pixels

Name: config.lineWidth

Type: INTEGER | Optional

Default Value: 1

[config]="{lineWidth: 123}"

Move Points Enabled

The flag enabling point dragging to change the X values (WRITE_METRIC_VALUES permission required).

Name: config.movePointsEnabled

Type: BOOLEAN | Optional

Default Value: false

[config]="{movePointsEnabled: true}"

Show Bullets

Indicates whether to display data point bullets.

Name: config.showBullets

Type: BOOLEAN | Optional

Default Value: true

[config]="{showBullets: false}"

Show Lines

Indicates whether to display lines between data point.

Name: config.showLines

Type: BOOLEAN | Optional

Default Value: false

[config]="{showLines: true}"

Show Timestamps

Indicates whether to display data point matching pair timestamps.

Name: config.showTimestamps

Type: BOOLEAN | Optional

Default Value: false

[config]="{showTimestamps: true}"

Smoothed Line

The flag enabling smoothed line.

Name: config.smoothedLine

Type: BOOLEAN | Optional

Default Value: false

[config]="{smoothedLine: true}"

X-Axis Centered on Zero

Force the x-axis so that it is symmetrical with respect to zero

Name: config.xAxisCentered

Type: BOOLEAN | Optional

Default Value: false

[config]="{xAxisCentered: true}"

Y-Axis Centered on Zero

Force the y-axis so that it is symmetrical with respect to zero

Name: config.yAxisCentered

Type: BOOLEAN | Optional

Default Value: false

[config]="{yAxisCentered: true}"

Rendering

Collapse / Expand

The flag indicating whether the widget is collaspible.

Name: collapsible

Type: BOOLEAN | Optional

Default Value: false

[collapsible]="true"

CSS Class

The name(s) of the CSS class used to customize the widget layout.

Name: class

Type: STRING | Optional

class="my-custom-class"

Height

The widget desired height (default 480px).

Name: config.height

Type: STRING | Optional

[config]="{height: '250px'}"

Min Width

The minimum width of the widget (e.g. 640px).

Name: config.minWidth

Type: STRING | Optional

[config]="{minWidth: '640px'}"

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Name: *ngIf

Type: STRING | Optional

*ngIf="getUser().organizationId != null"

Sub Elements

Metric

The X-axis (first) or Y-axis (second) metric whose values must be loaded by the widget.

Metric <metric>

Filter

The name of the filter used to transform and display values.

Name: filter

Type: FILTER | Optional

filter="fooBarFilter"

Label

The metric alternative label.

Name: label

Type: STRING | Optional

label="Temperature"

Name

The metric whose value(s) must be loaded by the widget.

Name: name

Type: METRIC | Required

name="Temperature"

Unit

The unit of measurement to be displayed along the value.

Name: unit

Type: STRING | Optional

unit="&deg;C"

Advanced

Max

The maximum measure scale value.

Name: config.max

Type: INTEGER | Optional

[config]="{max: 123}"

Min

The minimum measure scale value.

Name: config.min

Type: INTEGER | Optional

[config]="{min: 123}"

Paired Field

Indicate the name of the metric to be paired when displaying a stream chart. If you are using a Data Transformer, you can indicate the name of the additional field you are generating.

Name: config.pairedField

Type: STRING | Optional

[config]="{pairedField: 'maxTemperature'}"

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Name: *ngIf

Type: STRING | Optional

*ngIf="getUser().organizationId != null"