Bar Chart

  • 4 minute(s) read

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

Bar Chart

This chart uses a category based X-axis, so you must use this widget to load aggregated data, for instance the count of machines grouped by model name.

Configuration

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>

Show Pareto Line

Compute the cumulative total and display it through a line overlaid on the columns.

Type: BOOLEAN | Optional

Default Value: false

[config]="{showParetoLine: true}"

Title

The title displayed on the top part of the widget box.

Type: STRING | Optional

[title]="'Details'"

Controls

Enabled Periods

The list of periods which can be selected from the embedded period filter.

Type: ENUM (multiple) | Optional

Values: TODAY, YESTERDAY, LAST_1_HOUR, 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, CUSTOM

[config]="{enabledPeriods: ['TODAY', 'YESTERDAY']}"

Export Enabled

The boolean flag indicating whether the data export is enabled.

Type: BOOLEAN | Optional

Default Value: true

[config]="{exportEnabled: false}"

Period Filter Enabled

The boolean flag indicating whether the embedded period filter is available.

Type: BOOLEAN | Optional

Default Value: true

[config]="{filterEnabled: false}"

Data

Default Loading Period

The default date and time filtering period applied when entering the page.

Type: ENUM | Optional

Values: TODAY, YESTERDAY, LAST_1_HOUR, 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

Default Value: LAST_30_DAYS

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

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 | Optional

[inputs]="{period: 'period'}"

Query Variable

The id of the page's <things-filter-field> used for searching.

Type: STRING | Optional

[inputs]="{query: 'query-1'}"

Labels

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 | Optional

[config]="{emptyMessage: 'No customer found'}"

Show Category Labels

Show category under each single bar.

Type: BOOLEAN | Optional

Default Value: true

[config]="{showBarCategories: false}"

X-Axis Label

The label to be displayed under the X-axis.

Type: STRING | Optional

[config]="{xAxisLabel: 'Alerts by type'}"

Y-Axis Label

The label to be displayed on the left of the Y-axis.

Type: STRING | Optional

[config]="{yAxisLabel: 'Count'}"

Advanced

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 | Optional

Values: WIDE, MICRO

Default Value: WIDE

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

Show Bars Horizontally

The flag indicating whether to display the bars horizontally.

Type: BOOLEAN | Optional

Default Value: false

[config]="{rotate: true}"

Rendering

CSS Class

The name(s) of the CSS class used to customize the widget layout.

Type: STRING | Optional

class="my-custom-class"

Height

The height of the widget (e.g. 250px).

Type: STRING | Optional

[config]="{height: '250px'}"

Width

The width of the widget (e.g. 500px).

Type: STRING | Optional

[config]="{width: '500px'}"

Sub Elements

Statistic

The statistic whose values must be rendered as chart columns.

Metric

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

Aggregated Value

The aggregated value to be displayed over the Bar Chart.

Statistic <statistic>

Aggregation

The function used to aggregate data.

Type: ENUM | Optional

Values: AVG, COUNT, MAX, MIN, SUM

aggregation="AVG"

Alert Status

Define whether to include alerts that are still active, or have been activated in a period.

Type: ENUM | Optional

Values: ACTIVE, ACTIVATED

activationType="ACTIVE"

Averaged By

The count used to average the statistic results (e.g. Average alert count by thing).

Type: ENUM | Optional

Values: thingCount

averagedBy="thingCount"

Category Order/

The order used to display categories by value in the chart.

Type: ENUM | Optional

Values: ASC, DESC

DEPRECATED

Use the Sorting property.

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

Color

The color used to render columns.

Type: STRING | Optional

[config]="{color: 'abc'}"

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 | Optional

groupBy="customer.name"

Label

The alternative label displayed by the widget.

Type: STRING | Optional

label="Temperature"

Property

The object property whose values must be aggregated.

Type: PROPERTY | Optional

property="propName"

Resource

The resource from which to retrieve the items to be used to calculate the statistic.

Type: ENUM | Required

Values: ACTION, ALERT, CUSTOMER, LOCATION, PARTNER, THING, USER, WORK_SESSION

Default Value:

resource="ACTION"

Sorting

The sort direction used to order categories by value (default none).

Type: ENUM | Optional

Values: ASC, DESC

sortDirection="ASC"

Unit

The unit of measurement to be displayed along the value.

Type: STRING | Optional

[config]="{unit: '&deg;C'}"

Value Filter

The name of the filter used to transform and display values.

Type: FILTER | Optional

filter="fooBarFilter"

Data

Max Result Count

The number of maximum returned results (default all results are returned).

Type: INTEGER | Optional

limit="123"

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: QUERY | Optional

Predicates: beginsWith, eq, neq, gt, gte, isEmpty, isNotEmpty, lt, lte, like, notLike

[query]="[{property:'prop1', predicate: 'eq', value: 'foo'}, {property:'prop2', predicate: 'in', value: ['bar', 'baz']}]"

Metric <metric>

Aggregation

The aggregation applied on the metric values.

Type: ENUM | Optional

Values: AVG, DELTA, MAX, MIN, SUM

Default Value: AVG

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

Category Order

The order used to display categories by value in the chart.

Type: ENUM | Optional

Values: ASC, DESC

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

Color

The color used to render columns.

Type: STRING | Optional

[config]="{color: 'abc'}"

Group By

The group by applied on the metric values.

Type: ENUM | Optional

Values: DAY_OF_MONTH, HOUR_OF_DAY

Default Value: DAY_OF_MONTH

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

Label

The alternative label displayed by the widget.

Type: STRING | Optional

label="Temperature"

Name

The metric whose value(s) must be loaded by the widget.

Type: METRIC | Required

name="Temperature"

Unit

The unit of measurement to be displayed along the value.

Type: STRING | Optional

unit="&deg;C"

Value Filter

The name of the filter used to transform and display values.

Type: FILTER | Optional

filter="fooBarFilter"

Aggregated Value <property>

Aggregation

The aggregation type.

Type: ENUM | Optional

Values: AVG, MAX, MIN, SUM

Default Value: SUM

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

Filter

The name of the filter used to transform and display values.

Type: FILTER | Optional

filter="fooBarFilter"

Label

The label displayed for the aggregated value.

Type: STRING | Optional

label="Temperature"

Unit

The unit of measurement to be displayed along the value.

Type: STRING | Optional

[config]="{unit: '&deg;C'}"