Data Retrieval and Aggregation

You can specify the aggregation function to be used on all loaded metrics, you can select among RAW (means no aggregation), MIN, MAX, AVG, or DELTA. Optionally you can redefine on each metric a different aggregation. If unspecified on both levels, the default one is AVG.

MIN

Returns the minimum value computed in each time frame. If within the timeframe there are no values stored in the database, also the minimum is null. 

MAX

Returns the maximum value computed in each time frame. If within the timeframe there are no values stored in the database, also the maximum is null. 

AVG

Returns the average value computed in each time frame. If within the timeframe there are no values stored in the database, also the average is null. 

DELTA

Returns the value variation computed in each time frame, considering the last value of the time frame and the last value of the previous time frame. If within the timeframe there are no values stored in the database, the resulting DELTA is zero.

By using the DELTA aggregation you can display the variation of metric in each time frame, for instance, the following chart loads twice the same metric (es. Energy), one using the DELTA aggregation and one using the MAX aggregation. So the first sub-chart displays the daily consumption, instead the second one displays the total consumption.

Aggregation Timeframes

Other than the aggregation function, there is also the timeframe defining the time aggregation unit (e.g. 1 Hour, 12 Hours, 1 Day, 1 Month).

For each aggregation function, you can use one of the following timeframes:

• AUTO
• MINUTES_5
• MINUTES_10
• MINUTES_30
• HOURS_1
• HOURS_6
• HOURS_12
• DAYS_1
• MONTHS_1
• YEARS_1

The default applied timeframe is AUTO, which means the widget requests data from the backend with aggregation based on a dynamic time frame (e.g., 1H, 6H, 12H, 1D...) depending on the requested period. The backend divides the requested period into a fixed number of sub-periods (max 1000) and the aggregated value is calculated for each of them. In the case of a period less equal than 24 hours, all available data are retrieved without any aggregation.

Grouping and Zooming

Once the data has been loaded, to keep browser performance smooth, the widget displays a maximum of 500 graphic points per series at a time; in case there are more points within the loaded period, the widget downsamples them, and if more detail is desired, the graph can be zoomed in. If the loaded period contains too many data points, summing all the metrics (max 40.000 points), the period is automatically truncated and a warning is shown to the user. Generally, this happens if you ask for RAW data over a long period. For instance, suppose to have two metrics, you can load, for each of them, up to 20.000 data points, but the chart will display a maximum of 500 graphic points at the time, where each graphic point corresponds, more or less, to 20.000/500 = 40 grouped data points.     

On each metric, you can also specify the Value Grouping function (SUM, MAX, AVG) to be used to group data points when zooming out the chart. For instance, when zooming out you can display the SUM per month of the underlying daily values, instead of the average or maximum. For instance, for a temperature metric, in some cases, the maximum may be better than the average. 

If you reduce the scroll bar or select an area of the graph, more data points may appear, and this depends on the limit of 500 graphic points displayed at a time. In this case, two icons appear on the right, the first allows you to reset the zoom level, while the second button reloads the data from the backend, focusing on the selected time window with the finest possible time aggregation (in the case of AUTO timeframe).

For example, suppose you have a temperature metric with a sample every 10 minutes and you want to load 12 months of data (6 * 24 * 365 = 52560 data points). By default, the widget will load the average temperature with an aggregation time interval of 12 hours (730 data points), so you can zoom in on March, for example, and by clicking on the Expand Selection button (the second one), you can reload the data for March only, which will be aggregated with a time interval of 1 hour, and in this case, you will only have 730 points to display.

Optionally you can enable the Timeframe and Aggregation selectors to change the aggregation and reload the data preserving the selected period. 

The aggregation selected through the Aggregation selector affects only the metrics without an explicitly configured aggregation. For instance, a metric may always use AVG_DAYS_1.

Axis Management

For each metric, you can define the Y-axis title and whether to use the LEFT or RIGHT one.

For example, you can have a left and a right Y-axis with different scales.

Alternatively, you can select the Stacked Charts option; this will cause the widget to display one sub-chart for each metric. Metrics with the same Y-axis title are grouped together on the same sub-chart. 

Chart Types

Each metric can be displayed with a different chart type, by choosing among:

• Line: data points are directly interconnected through a line.
• Column: for each data point a column is displayed.
• Step: compared to the Line, which connects data points with direct lines creating an appearance of gradual change in data points, it sharply visualizes the changes between data points through steps.

Multiple Things Charting

The Time Series Chart can be placed also within the Location or Custom details, and display the metric of the location or of the underlying things, by displaying one series per thing.

On each metric, you can also specify whether the series must be stacked in order to see the totals among multiple metrics. For instance, suppose to have a metric providing the number of pieces produced every hour, you can stack the columns as follow.

The alternative to displaying the same metric for each thing, you can also choose the Collapsed rendering, which will show a single chart, whose values are given by the Value Grouping function (SUM, MAX, AVG) applied to the values between multiple things with the same timestamp.

Constant Lines

A constant line is a line marker that extends over the chart at a fixed Y value, giving the user information about which is, for instance, the minimum/maximum or median value.

Metric Min / Max

Yuo can display the minum and maximum value of a metric by enabling the Show Min Value Line or the Show Max Value Line options on a single metric element.

Chart Line

Alternatively, if you need to display a constant line on the graph independently of metrics, you can add a Chart Line element and configure whether the value should be read from a property accessible from the context of the thing or whether it is a static value.

You can also specify the label to be displayed on the line and the color.

Events

Along the data points of displayed metrics, you can show also the events occurred in the same time period.

In the Events section of the property panel, you can define a query on the events to be loaded (e.g. Event Severity = FAILURE).  

For each found event, a marker is displayed under the x-axis, and by clicking on the marker, a tooltip displays the event details and the chart area corresponding to the event duration is highlighted according to the event severity.    

<time-series-chart-widget class="flex-fill"
	                      [config]="{exportEnabled: true, filterEnabled: true, scrollbarEnabled: true, aggregationType: 'AVG', defaultPeriod: 'LAST_7_DAYS', legendPosition: 'center', stacked: true}">
	       
       <metric name="Temperature" filter="singleDecimalFormat" [chartOptions]="{yAxisTitle: 'Temperatures'}"></metric> 
       <metric name="TempSetpoint" [chartOptions]="{yAxisTitle: 'Temperatures'}"></metric> 
       <metric name="Power" filter="integerFormat" [chartOptions]="{yAxisTitle: 'Power', yAxisPosition: 'STACKED'}"></metric>
	       
</time-series-chart-widget>

<time-series-chart-widget class="flex-fill"
		                      [config]="{exportEnabled: true, filterEnabled: true, scrollbarEnabled: true, aggregationType: 'AVG', defaultPeriod: 'LAST_7_DAYS', legendPosition: 'center'}">
	
     <metric name="thing.Temperature" filter="singleDecimalFormat"></metric>
	         
</time-series-chart-widget>