Widget that displays a time series of values for each referenced metric through a line, bar or step graph.
Under the widget tag, you can add multiple timeseries-graph elements (at least one) to group metrics by type and avoid a poor display of the Y scale. In case you have metrics with different scales (e.g. Temperature in degrees and Pressure in mBar) it is suggested to use different timeseries-graphs to display them correctly.
[DEPRECATED] Use the new Time Series Chart.
code_blocksCode View
Template Syntax
Below you can find some examples of how to use the component within a template.
<timeseries-widget [title]="'Temperature'" loadPeriod="PT1H" zoomPeriod="PT30M">
<timeseries-graph [categoryAxis]="{minPeriod:'ss'}"
[graphs]="{lineThickness:2,lineAlpha: 1,fillAlphas: 0.5, lineColor:'#33B679'}"
[chartScrollbar]="{scrollbarHeight: 50}">
<metric name="Temperature"></metric>
</timeseries-graph>
</timeseries-widget>
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
| Time Series Chart (OLD) <timeseries-widget> | |
|---|---|
| PROPERTIES | |
| 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_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
defaultPeriodValue="LAST_7_DAYS" |
| Export Enabled | The boolean flag indicating whether the data export is enabled. Type: BOOLEAN | Optional | Values: true
false
[exportEnabled]="true" |
| Height | The height of the widget (e.g. 250px). Type: STRING | Optional height="250px" |
| Load Period | The period of data loaded when the page is accessed (e.g. P7D, PT36H). The value is expressed using the ISO 8601 standard. Type: STRING | Optional loadPeriod="fooBar" |
| Offline Filter | The JSON describing the line style when OFFLINE. Type: JSON | Optional [offlineFilter]="{foo: 'bar'}" |
| Period Filter Enabled | The boolean flag indicating whether the embedded period filter is available. Type: BOOLEAN | Optional | Values: true
false
[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 periodRef="period" |
| Refresh Interval | The interval in milliseconds at which the widget updates data points; when specified, the real-time update channel is disabled. If the frequency of values is very high, to prevent the UI from flickering, it is suggested to set this attribute. Type: INTEGER | Optional | Default: 30000 [refreshIntervalMillis]="123" |
| Show Connection Status | The flag indicating whether the chart must show valuea ccording to the thing connection status. Type: BOOLEAN | Optional | Values: true
false
[showConnectionStatus]="true" |
| Title | The title displayed on the top part of the widget box. Type: STRING | Optional [title]="'Details'" |
| Trim Data | The flag indicating whether loaded data must be trimmed. Type: BOOLEAN | Optional | Values: true
false
[trimData]="true" |
| Visibility Condition | The expression that allows you to reduce the visibility of the element. Type: STRING | Optional *ngIf="getUser().organizationId != null" |
| Width | The width of the widget (e.g. 500px). Type: STRING | Optional width="500px" |
| Zoom Period | The period of data initially displayed when entering the page (e.g. PT24H), must be less than the Load Period. The value is expressed using the ISO 8601 standard. Type: STRING | Optional zoomPeriod="fooBar" |
| End Date Variable | The <period-field>'s End Variable filtering data by end date. Type: STRING | Optional endDateFieldRef="toDate" [DEPRECATED] Use the Period Variable property.
|
| Start Date Variable | The <period-field>'s Start Variable filtering data by start date. Type: STRING | Optional startDateFieldRef="fromDate" [DEPRECATED] Use the Period Variable property instead.
|
| SUB-ELEMENTS | |
| Timeseries Graph | The subgraph defining a set of metrics to be displayed. Multiple | Required <timeseries-graph></timeseries-graph> |
| Timeseries Graph <timeseries-graph> | |
|---|---|
| PROPERTIES | |
| Category Axis | A JSON describing the X-axis behavior and rendering, for more details see the AmChart - Category Axis documentation. Type: JSON | Optional [categoryAxis]="{foo: 'bar'}" |
| Chart Scrollbar | A JSON describing the behavior and rendering of the zoom scrollbar, for more details see the AmChart - Scrollbar documentation. Type: JSON | Optional [chartScrollbar]="{foo: 'bar'}" |
| Graphs | A JSON array describing how each metric must be displayed, for more details see the AmChart - Charts documentation. Type: JSON | Optional [graphs]="{foo: 'bar'}" |
| Height | The height of the widget (e.g. 250px). Type: STRING | Optional height="250px" |
| Legend | A JSON describing how to render the graph legend, for more details see the AmChart - Legend documentation. Type: JSON | Optional [legend]="{foo: 'bar'}" |
| SUB-ELEMENTS | |
| Metric | The metric whose values must be displayed within the graph. Multiple | Required <metric name="Temperature"></metric> |
| Metric <metric> | |
|---|---|
| PROPERTIES | |
| Chart Options | The JSON configuring how to display values within the diagram. Type: JSON | Optional [chartOptions]="{foo: 'bar'}" |
| Check For Update Period | The period of data to check for updates (e.g. P7D, PT36H). The value is expressed using the ISO 8601 standard. Type: STRING | Optional checkForUpdatePeriod="fooBar" |
| Filled | The flag indicating whether to add virtual points in case of misalligned time series. Type: BOOLEAN | Optional | Values: true
false
[filled]="true" |
| Filter | The name of the filter used to transform and display values. Type: FILTER | Optional filter="fooBarFilter" |
| Icon | The Font Awesome icon name to be displayed within the widget. Type: STRING | Optional icon="fas fa-thermometer" |
| 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" |
| 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.