MindSphere Web Components
Time Series Chart
The TimeSeries Chart displays a line graph of aggregated or raw time series data for the variables of a selected aspect during a specific date/time range. Based on the component's configuration (e.g. zoomDisabled
, wheelZoom
), the user can change the selected range interactively by dragging or zooming in and out.
A developer can select as data provider Aggregates
or Raw
. Furthermore he can select Auto
, which switches automatically between the two modes depending on the timerange.
In Aggregates
mode, the chart displays the first value, last value, minimum, and maximum sorted by timestamp for each aggregate and connects them by one line per variable.
In Raw
mode, the chart displays the last 256 values. If there are more data points available in the selected time range, it is indicated by using a dotted line.
The TimeSeries Chart supports the following:
- Data types long, double, int, boolean
- Simultaneous display of variables from different assets and different aspects
Example¶
Interface¶
Selector¶
1 | <mdsp-time-series-chart></mdsp-time-series-chart> |
Properties¶
Name | Type | Corresponding attribute | Default | Description | Allowed Values |
---|---|---|---|---|---|
context | string |
context | Configures the context of the component. See also here. | ||
dataProvider | ChartDataProvider |
data-provider | Auto | Specifies the behavior which time-series-api should be accessed. In Auto mode the chart switches to TimeSeries mode if the date range is less then 2 minutes. |
- Auto - Aggregates - TimeSeries |
dateRange | IDateRange |
Specifies the current date range using from and to , refer to IDateRange model. |
|||
dragMode | ChartDragMode |
drag-mode | Move | Specifies the behavior when dragging. Via Select zooming into specified area is triggered.With Move the chart can be moved while dragging. |
- Move - Select |
errorNotification | boolean |
error-notification | Enables error control if an error is thrown. This can be used for debug purposes. For productive use, the error event should be caught and handled in the application. See also here. |
||
legendDisabled | boolean |
legend-disabled | false | Disables legend for the chart if true . |
|
locale | string |
locale | Specifies the locale in which the component is displayed. The locales en and de are provided by default.See also here. |
||
localeManager | LocaleManager |
Returns a LocaleManager object. This can be used to add locales or to get the locale settings. See also here. |
|||
model | IDataModel |
Returns an object for data model handling, refer to IDataModel model. | |||
sharedAssets | boolean |
shared-assets | false | Specifies whether shared assets from other tenants are supported. | |
variablePaths | TimeSeriesPath |
Specifies an array of objects which defines the variables to be displayed in the chart. Refer to the snippets below. | |||
variablesLimit | number |
variables-limit | undefined | Specifies the allowed variables count limit. If the limit is exceeded error -event will be triggered with theinformation, which variables could not be added. |
1-20 |
view | IViewModel |
Returns an object for view handling, refer to IViewModel model. | |||
wheelZoom | boolean |
wheel-zoom | false | Enables zoom control by mouse wheel if true . Otherwise, the control key must be pressed for zooming.Requires that zoom-disabled is false . |
|
zoomDisabled | boolean |
zoom-disabled | false | Disables zooming for the chart if true . |
Events¶
Name | Type | Description |
---|---|---|
dateRangeChanged | EventEmitter<IDateRange> |
Triggered when the date range changes, e.g. when the user zooms or moves inside the chart. |
aggregationLevelChanged | EventEmitter<AggregationLevelInfo> |
Triggered when the aggregation level changes - also triggered if chart switches to use raw time series data. |
connected | EventEmitter<any> |
Triggered after the component is created, initialized and appended to the DOM tree. |
error | EventEmitter<MdspUiError> |
Triggered when an error occurs in the component or while accessing APIs. See also here. |
Models¶
IDateRange
1 2 3 4 | interface IDateRange { from: Date; to: Date; } |
IDataModel
1 2 3 4 | interface IDataModel { // forces reload of data // forces reload of data, e.g. re-loading the chart refresh(): void; } |
IViewModel
1 2 3 | interface IViewModel { refresh(): void; } |
AggregationLevelInfo
1 2 3 4 5 | interface AggregationLevelInfo { level?: string; levelTranslated?: string; value?: number; } |
Remarks¶
- For performance reasons, it is recommended to limit the number of variables displayed in the TimeSeries Chart to 10.
Roles¶
mdsp:core:iot.tsaUser
(IoT Aggregates API V4 is used)mdsp:core:iot.timUser
(IoT TimeSeries API is used)
Snippets¶
Display all Variables of an Aspect¶
You can either pass an object to specify the aspect or provide the full path.
1 2 3 4 5 6 7 | timeSeriesChart.variablePaths = [ // Show all variables of a given aspect { assetId: '89bba0c1e19c4884bce75d8bcc3773e5', aspectName: 'AspectNameX' } ]; |
1 2 3 4 | timeSeriesChart.variablePaths = [ // Convenient Syntax: write the path to the assetId/aspect '89bba0c1e19c4884bce75d8bcc3773e5/AspectNameX' ]; |
Display Specific Variables¶
You can either pass an object to specify the variables to be displayed or provide the full path.
1 2 3 4 5 6 7 8 | timeSeriesChart.variablePaths = [ // Show specific variables of an aspect { assetId: 'f9f1ff3ccaa1401a98cf37d0c9144c7e', aspectName: 'AspectNameX', variables: ['VariableName1', ...,'VariableNameN'] } ]; |
1 2 3 4 | timeSeriesChart.variablePaths = [ // Convenient Syntax: write the path to the assetId/aspect/variableName1&variableName2.. etc. 'f9f1ff3ccaa1401a98cf37d0c9144c7e/AspectNameX/VariableName1&...&VariableNameN' ]; |
Update the Variables using an Aspect Variable Selector¶
Use the event triggered by an Aspect Variable Selector to update the variables to be displayed in the Time Series Chart. A more detailed code sample is given here.
1 2 3 | aspectVariableSelectorComp.addEventListener('selectedAspectsAndVariablesChanged', function (eventParams) { timeSeriesChart.variablePaths = eventParams.detail; }); |
Change the Timestamp Format in the Overlay¶
1 2 3 4 5 | const timeSeriesChart = document.querySelector('mdsp-time-series-chart'); const localeSettings = chartComp.localeManager.getLocaleSettings(); localeSettings.tooltipTimestampFormat = "DD MM YY HH:mm:ss.SSS"; timeSeriesChart.localeManager.addLocale("en-custom", localeSettings); timeSeriesChart.locale = "en-custom"; |
Change the variable name in the chart using an alias for a variable¶
1 2 3 4 5 6 7 8 9 | const timeSeriesChart = document.querySelector('mdsp-time-series-chart'); timeSeriesChart.variablePaths = [{ assetId: '730540babbb44fe58f24cc71c04fd1fc', aspectName: 'aspect_pump', variables: [{ name: 'MotorCurrent', alias: 'Motor current which needs a very special alias name' }] }] |
Change the drag mode of the Time Series Chart¶
1 | <mdsp-time-series-chart drag-mode="Select"></mdsp-time-series-chart> |
Drag mode Select
allows the user to drag and select an area in order to zoom into the chart. Drag mode Move
will move the chart while dragging.
Select the data provider of the Time Series Chart¶
The Time Series Chart supports 3 different modes for the data providers
- Auto: Switches automatically to
TimeSeries
mode if the date range is less then 2 minutes - Aggregates: Shows data of IoT Aggregates V4 API. The aggregation level is currently chosen depending on the selected time range.
- TimeSeries: Shows data of IoT TimeSeries V3 API. Due to performance reasons, only the last 256 values in the selected time range. If there is more data detected, the line will be displayed in a dotted style to indicate that a user can zoom in to get more data.
1 | <mdsp-time-series-chart data-provider="TimeSeries"></mdsp-time-series-chart> |

Any questions left?
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.