MindSphere Web Components
MCEA View Chart
Info
This component requires access to MindConnect Edge Analytics and the related roles and scopes.
Only this application provides the necessary files for displaying complex data.
You can purchase the application in the MindSphere Store.
The MCEA View Chart displays complex data like FFTs, Orbits and Buffers generated and uploaded by MindConnect Edge Analytics.
A list of available files is provided to select the one for which the data is to be displayed. The listed entries are dependent on the selection of the Asset and the time interval.
Within the chart area, the data is displayed. With available toolbar buttons, the following functionalities are provided:
- Zoom
- Undo zoom
- Line chart
- Bar chart
A previous and next button below the chart area allows to navigate through the listed data entries.
Examples¶
Interface¶
Selector¶
<mdsp-mcea-view-chart></mdsp-mcea-view-chart>
Properties¶
| Name | Type | Corresponding attribute | Default | Description | Allowed Values |
|---|---|---|---|---|---|
| assetId | string | asset-id | Configures the asset whose data are displayed using its asset ID. | ||
| context | string | context | Configures the context of the component. See also here. | ||
| dataDateRange | TimeZoneDateRange | Specifies the date range using from, to, isAllDay and timeZone properties. | |||
| 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. | ||
| fromDate | Date | Specifies the earliest date of the data to be displayed. | |||
| 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. | |||
| timeZone | TimeZone | time-zone | Specifies the selected time zone. | ||
| toDate | Date | Specifies the latest date of the data to be displayed. |
Events¶
| Name | Type | Description |
|---|---|---|
| selectedFileChanged | EventEmitter<any> | Triggered when the selection of a data file changes. |
| dateRangeChanged | EventEmitter<IDateRange> | Triggered when the date range changes, e.g. when the user zooms or moves inside the chart. |
| 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¶
TimeZoneDateRange
```typescript interface TimeZoneDateRange { from: Date; to: Date; isAllDay: boolean; timeZone: TimeZone; }
TimeZone
enum TimeZone {
Local = 'Local',
UTC = 'UTC',
}
Roles¶
mdsp:core:iot.filxxx(IoT File API is used - the component supports only read-functionalities)mdsp:core:iot.timUser(IoT TimeSeries API is used)
Snippets¶
List up and display files of a specific Asset¶
Only HTML
<mdsp-mcea-view-chart asset-id="yourAssetId"></mdsp-mcea-view-chart>
HTML and Javascript
<mdsp-mcea-view-chart></mdsp-mcea-view-chart>
const mceaViewChartComp = document.querySelector('mdsp-mcea-view-chart');
mceaViewChartComp.assetId = 'yourAssetId';
Any questions left?
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.