Displays metric or statistic data through columns in a bar chart.

In respect to the time-series widget, this chart uses a category based X-axis, so you must use this widget to load aggregated data and compare values.

Configuration

Design View

In the visual editor, you can find the Bar Chart icon under the Charts component palette group.

You can drag the widget into the grid and then configure the following sub-elements according to your needs:

Statistic: the statistic whose values must be rendered as chart columns.

Metric: the metric whose values must be aggregated and rendered as chart columns.

Code View

Template Syntax

Below you can find some examples of how to use the component within a template.


<bar-chart-widget-v2 title="Alert Count">
   <statistic resource="alert" aggregation="COUNT" groupBy="MONTH"></statistic>
</bar-chart-widget-v2>

Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

Bar Chart <bar-chart-widget-v2>

PROPERTIES

CSS Class

The name(s) of the CSS class used to customize the widget layout.
Type: STRING | single | Optional
class="my-custom-class"

Default Loading Period

The default date and time filtering period applied when entering the page.
Type: ENUM | single | Optional | Values:

TODAY

YESTERDAY

LAST_1_HOUR

LAST_4_HOURS

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

[config]="{defaultPeriod: 'LAST_7_DAYS'}"

Empty Message

The blank message to be displayed in the widget in case no item was found. To manage translations, you can define a label and use the key as the value of the property.
Type: STRING | single | Optional
[config]="{emptyMessage: 'No customer found'}"

Enabled Periods

The list of periods which can be selected from the embedded period filter.
Type: ENUM_ARRAY | single | Optional | Values:

TODAY

YESTERDAY

LAST_1_HOUR

LAST_4_HOURS

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

[config]="{enabledPeriods: ['V1', 'V2', 'VN']}"

Export Enabled

The boolean flag indicating whether the data export is enabled.
Type: BOOLEAN | single | Optional | Values:

true

false

[config]="{exportEnabled: true}"

Height

The height of the widget (e.g. 250px).
Type: STRING | single | Optional
[config]="{height: '250px'}"

Mode

The mode used to display the chart.

WIDE: Controls, axis and grid are displayed.
MICRO: Just bars are displayed ina small box.
Type: ENUM | single | Optional | Values:

WIDE

MICRO

[config]="{mode: 'MICRO'}"

Period Filter Enabled

The boolean flag indicating whether the embedded period filter is available.
Type: BOOLEAN | single | Optional | Values:

true

false

[config]="{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 | single | Optional
[inputs]="{period: 'period'}"

Query Variable

The id of the page's <things-filter-field> used for searching.
Type: STRING | single | Optional
[inputs]="{query: 'query-1'}"

Show Bars Horizontally

The flag indicating whether to display the bars horizontally.
Type: BOOLEAN | single | Optional | Values:

true

false

[config]="{rotate: true}"

Show Category Labels

Show category under each single bar.
Type: BOOLEAN | single | Optional | Values:

true

false

[config]="{showBarCategories: true}"

Show Pareto Line

Compute the cumulative total and display it through a line overlaid on the columns.
Type: BOOLEAN | single | Optional | Values:

true

false

[config]="{showParetoLine: true}"

Title

The title displayed on the top part of the widget box.
Type: STRING | single | Optional
[title]="'Details'"

Visibility Condition

The expression that allows you to reduce the visibility of the element.
Type: STRING | single | Optional
*ngIf="getUser().organizationId != null"

Width

The width of the widget (e.g. 500px).
Type: STRING | single | Optional
[config]="{width: '500px'}"

X-Axis Label

The label to be displayed under the X-axis.
Type: STRING | single | Optional
[config]="{xAxisLabel: 'Alerts by type'}"

Y-Axis Label

The label to be displayed on the left of the Y-axis.
Type: STRING | single | Optional
[config]="{yAxisLabel: 'Count'}"

SUB-ELEMENTS

Statistic

The statistic whose values must be rendered as chart columns.
single | mandatory

<statistic resource="ALERT" name="alertCount"></statistic>

Metric

The metric whose values must be aggregated and rendered as chart columns.
multiple | mandatory

<metric name="Temperature"></metric>

Statistic <statistic>

PROPERTIES

Aggregation

The function used to aggregate data.
Type: ENUM | single | Optional | Values:

AVG

COUNT

MAX

MIN

SUM

aggregation="MAX"

Alert Status

Define whether to include alerts that are still active, or have been activated in a period.
Type: ENUM | single | Optional | Values:

ACTIVE

ACTIVATED

activationType="ACTIVATED"

Averaged By

The count used to average the statistic results (e.g. Average alert count by thing).
Type: ENUM | single | Optional | Values:

thingCount

averagedBy="thingCount"

Category Order

The order used to display categories by value in the chart.
Type: ENUM | single | Optional | Values:

ASC

DESC

[config]="{categoryOrder: 'DESC'}"

[DEPRECATED]

Color

The color used to render columns.
Type: STRING | single | Optional
[config]="{color: 'fooBar'}"

Group By

The property used to group results. For instance: customer.country. In the case where the underlying objects are temporally distributed you can also aggregate by HOUR, DAY, MONTH and YEAR.
Type: GROUP_BY | single | Optional
groupBy="customer.name"

Label

The alternative label displayed by the widget.
Type: STRING | single | Optional
label="Temperature"

Max Result Count

The number of maximum returned results (default all results are returned).
Type: INTEGER | single | Optional
[limit]="123"

Name

The statistic whose results(s) must be loaded by the widget.
Type: STATISTIC | single | Mandatory | Values:

activeAlertCount

activatedAlertCount

alertCount

alertCountByAlertDefinition

thingCount

thingPropertyAggregation

locationCount

customerCount

userCount

workSessionCount

workSessionElapsedTime

workSessionSumMetricValues

name="alertCount"

[DEPRECATED] Use the resource and property with aggregation.

Property

The object property whose values must be aggregated.
Type: PROPERTY | single | Optional
property="PROPERTY"

Query

The array of conditions filtering out items. For instance: [query]='[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}]' Predicates: eq, beginsWith, like, notLike, isEmpty, isNotEmpty, gt, gte, lt, lte.
Type: JSON | single | Optional
[query]="[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}, {...}]"

Resource

The resource from which to retrieve the items to be used to calculate the statistic.
Type: ENUM | single | Mandatory | Values:

ACTION

ALERT

CUSTOMER

LOCATION

HISTORICAL_ALERT

HISTORICAL_WORK_SESSION

PARTNER

THING

USER

WORK_SESSION

resource="ALERT"

Sorting

The sort direction used to order categories by value (default none).
Type: ENUM | single | Optional | Values:

ASC

DESC

sortDirection="DESC"

Sum Metric

The monitored metric to sum (e.g. Energy.DELTA).
Type: STRING | single | Optional
sumMetric="fooBar"

[DEPRECATED]

Unit

The unit of measurement to be displayed along the value.
Type: STRING | single | Optional
[config]="{unit: '°C'}"

Value Filter

The name of the filter used to transform and display values.
Type: FILTER | single | Optional
filter="fooBarFilter"

Metric <metric>

PROPERTIES

Aggegation

The aggregation applied on the metric values.
Type: ENUM | single | Optional | Values:

AVG

DELTA

MAX

MIN

SUM

[config]="{aggregation: 'SUM'}"

Category Order

The order used to display categories by value in the chart.
Type: ENUM | single | Optional | Values:

ASC

DESC

[config]="{categoryOrder: 'DESC'}"

Color

The color used to render columns.
Type: STRING | single | Optional
[config]="{color: 'fooBar'}"

Group By

The group by applied on the metric values.
Type: ENUM | single | Optional | Values:

DAY_OF_MONTH

HOUR_OF_DAY

[config]="{groupBy: 'HOUR_OF_DAY'}"

Label

The alternative label displayed by the widget.
Type: STRING | single | Optional
label="Temperature"

Name

The metric whose value(s) must be loaded by the widget.
Type: METRIC | single | Mandatory
name="Temperature"

Unit

The unit of measurement to be displayed along the value.
Type: STRING | single | Optional
unit="°C"

Value Filter

The name of the filter used to transform and display values.
Type: FILTER | single | Optional
filter="fooBarFilter"

Configuration

Design View

Code View

Template Syntax

Component Reference

Related articles