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.
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
code_blocksDesign View
In the template editor, you can find the XY Chart icon under the Charts component palette group.
You can drag the widget into the grid and then configure the following sub-elements according to your needs:
Metric: the X-axis (first) or Y-axis (second) metric whose values must be loaded by the widget.
Below are references to the properties that can be configured for this widget.
For more details on how to manage metrics, you can refer to this article.
code_blocksCode View
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> | |
---|---|
PROPERTIES | |
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. Type: ENUM | Optional | Values: X
Y
[config]="{baseAxis: 'Y'}" |
Collapse / Expand | The flag indicating whether the widget is collaspible. Type: BOOLEAN | Optional | Values: true
false
[collapsible]="true" |
Color | The color used to display the bullets and lines. Type: STRING | Optional | Default: #08B05B [config]="{color: 'fooBar'}" |
CSS Class | The name(s) of the CSS class used to customize the widget layout. Type: STRING | Optional class="my-custom-class" |
Data Transformer |
Type: FILTER | Optional [config]="{dataTransformer: 'FILTER'}" |
Default Loading Period | The default date and time filtering period applied when entering the page. 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
[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'}" |
Min Width | The minimum width of the widget (e.g. 640px). Type: STRING | Optional [config]="{minWidth: '640px'}" |
Move Points Enabled | The flag enabling point dragging to change the X values (WRITE_METRIC_VALUES permission required). Type: BOOLEAN | Optional | Values: true
false
[config]="{movePointsEnabled: true}" |
Period Filter Enabled | The boolean flag indicating whether the embedded period filter is available. Type: BOOLEAN | Optional | Values: true
false
[config]="{filterEnabled: true}" |
Period Variable | The id of the page's variable providing the date range filtering period, for instance the id of a <period-filter-field>. Type: STRING | Optional [inputs]="{period: 'period'}" |
Scrollbar Enabled | The flag enabling the widget top scrolbar allowing the user to scroll and zoom data. Type: BOOLEAN | Optional | Values: true
false
[config]="{scrollbarEnabled: true}" |
Show Bullets | Indicates whether to display data point bullets. Type: BOOLEAN | Optional | Values: true
false
[config]="{showBullets: true}" |
Show Lines | Indicates whether to display lines between data point. Type: BOOLEAN | Optional | Values: true
false
[config]="{showLines: true}" |
Show Timestamps | Indicates whether to display data point matching pair timestamps. Type: BOOLEAN | Optional | Values: true
false
[config]="{showTimestamps: 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 X-axis (first) or Y-axis (second) metric whose values must be loaded by the widget. Multiple | Required <metric name="Temperature"></metric> |
Metric <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 | Required name="Temperature" |
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. Type: STRING | Optional [config]="{pairedField: 'maxTemperature'}" |
Unit | The unit of measurement to be displayed along the value. Type: STRING | Optional unit="°C" |
Visibility Condition | The expression that allows you to reduce the visibility of the element. Type: STRING | Optional *ngIf="getUser().organizationId != null" |
Comments
0 comments
Please sign in to leave a comment.