Skip to content

MindSphere Web Components
Aggregate Chart

The Aggregate Chart displays a line graph of the aggregated 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.
For each aggregate the chart displays the first value, last value, minimum, and maximum sorted by timestamp and connects them by one line per variable.

The Aggregate Chart supports:

  • Datatypes long, double, int
  • Simultaneous display of variables from different assets and different aspects

Example

Aggregate Chart

Interface

Selector

1
<mdsp-aggregate-chart></mdsp-aggregate-chart>

Properties

Name Type Corresponding attribute Default Description Allowed Values
context string context Configures the context of the component. See also here.
dateRange IDateRange Specifies the current date range using from and to, refer to IDateRange model.
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.
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.
variablePaths AggregatePath Specifies an array of objects which defines the variables to be displayed in the chart. Refer to the snippets below.
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.
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;
}

Remarks

  • For performance reasons it is recommended to limit the number of variables displayed in the Aggregate Chart to 10.

Roles

  • mdsp:core:iot.tsaUser (IoT Aggregates 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
aggregateChart.variablePaths = [
   // Show all variables of a given aspect
   {
      assetId: '89bba0c1e19c4884bce75d8bcc3773e5',
      aspectName: 'AspectNameX'
   }
];
1
2
3
4
aggregateChart.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
aggregateChart.variablePaths = [
   // Show specific variables of an aspect
   {
      assetId: 'f9f1ff3ccaa1401a98cf37d0c9144c7e',
      aspectName: 'AspectNameX',
      variables: ['VariableName1', ...,'VariableNameN']
   }
];
1
2
3
4
aggregateChart.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 Aggregate Chart. A more detailed code sample is given here.

1
2
3
aspectVariableSelectorComp.addEventListener('selectedAspectsAndVariablesChanged', function (eventParams) {
            timeseriesAggregateComp.variablePaths = eventParams.detail;
        });

Change the Timestamp Format in the Overlay

1
2
3
4
5
const chartComp = document.querySelector('mdsp-aggregate-chart');
const localeSettings = chartComp.localeManager.getLocaleSettings();
localeSettings.tooltipTimestampFormat = "DD MM YY HH:mm:ss.SSS";
chartComp.localeManager.addLocale("en-custom", localeSettings);
chartComp.locale = "en-custom";

Custom overlay

Any questions left?

Ask the community


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