Skip to content

MindSphere Web Components
MCEA View Chart


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.







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.


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.



```typescript interface TimeZoneDateRange { from: Date; to: Date; isAllDay: boolean; timeZone: TimeZone; }

enum TimeZone {
    Local = 'Local',
    UTC = 'UTC',


  • mdsp:core:iot.filxxx (IoT File API is used - the component supports only read-functionalities)
  • mdsp:core:iot.timUser (IoT TimeSeries API is used)


List up and display files of a specific Asset


<mdsp-mcea-view-chart asset-id="yourAssetId"></mdsp-mcea-view-chart>

HTML and Javascript


const mceaViewChartComp = document.querySelector('mdsp-mcea-view-chart');
mceaViewChartComp.assetId = 'yourAssetId';

Any questions left?

Ask the community

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

Last update: September 20, 2022