TIME CHART

Time Chart displays series values at successive time intervals. It can show one or more series, each assigned to the left or right value axis and scaled independently. Time Chart loads data for a specified time interval and updates the chart with incremental values as new data is received.

[widget] Settings

Inherited settings from Generic Widget: type, title, tooltip, left-units, top-units, width-units, height-units, time-span, path, url, alert-style, alert-expression, style, class, dialog-maximize, display-panels, format, last, min-range, max-range, min-range-right, max-range-right, rotate-ticks, axis-title, axis-title-right.

NameExampleDescriptionChart Lab
context-heightcontext-height = 50Height of the context graph, used to adjust the displayed time-span
(0 by default for the widget in the main widow; 70 by default for the widget in the dialog window).
View
min-range-force, max-range-forcemax-range-force = 30Strict minimum and maximum value of the left (right) axis.
If the value of a certain series does not fall into the set by these value gaps, then it will not be displayed.
For the right axis – min-range-right-force, max-range-right-force.
View
ticksticks = 10Number of markers on the left axis
(5 by default).
View
ticks-rightticks-right = 10Number of markers on the right axis
(5 by default).
View
ticks-timeticks-time = 20Number of markers on the time axis.View
day-formatday-format = %m/%d
day-format = %y/%m/%d
day-format = %Y/%m/%d
day-format = %Y %m/%d
Timestamp format of the x-axis.
Set using a combination of: %Y, %y, %m, %d
Learn more about format settings.
View
time-offsettime-offset = -200 year
time-offset = 1 day
Offset the series timestamps into the past or into the future.
Used to compare the same series current vs a day ago, vs a week ago, vs some custom offset.
A positive time-offset can be used to display past data with current time.
A negative time-offset can be used to display future data with current time.
Can be used on both [widget] and [series] levels.
View
display-datedisplay-date = trueDisplay of data under the time graph according to the chosen time interval
(false by default).
View
markersmarkers = trueDisplay of series value markers
(true by default).
Markers can also be enabled from the mouseover menu on the left axis of the Time Chart Widget.
View
last-markerlast-marker = falseDisplay of the current series value marker.
Possible values: true, false
(true by default).
View
horizontal-gridhorizontal-grid = falseDisplay of horizontal grid
(true by default).
View
vertical-gridvertical-grid = falseDisplay of vertical grid
(false by default).
View
pointer-positionpointer-position = leftPosition of the last value pointer relative to the series.
Possible values: left, right, auto, none. Default = ‘right’.
View
legend-valuelegend-value = falseDisplay of the last value for each series in the legend (true by default).View
auto-scaleauto-scale = trueAutomatic scaling of the visible portion of the graph (false by default).View
step-linestep-line = trueConnect neighboring samples using a step line as opposed to linearly interpolated line.

Step-line mode can be toggled by changing Y-axis controls displayed on mouse-over.

View

View

View

auto-periodauto-period = falseAutomatically defines the aggregation period for series based on the chosen time interval (true by default).View
retain-time-spanretain-time-span = falseSaves the length of the chosen time interval during the widget update
(true by default).
View
modemode = column
mode = stack
mode = range
mode = column stack
Possible values: stack, column, range, column stack.
Stack – sums up series of the same type;
Column – displays series in the form of columns;
Range – displays the area between series;
Column stack – display series in the form of columns, summing series of the same type.
Column
Stack
Range
Column Stack
Column & Column Stack
disconnect-intervaldisconnect-interval = 1 minute
Maximum time gap between data, during which the points of the series line are connected.
If the gap between data is greater than the specified value, a break is displayed.
View
disconnect-countdisconnect-count = 50Average distance between time values in the series.
If the gap between data is greater than this value, then a break is displayed.
If disconnect-count = 1, then the disconnect interval will be equal to the mean interval.
Disconnect Count Behavior Detailed Example
View
disconnect-valuedisconnect-value = 0Works together with disconnect-interval or disconnect-count setting.
Fills the gaps in data with specified values.
Useful when ATSD does not collect null values or values below a set threshold.
Toggle display of disconnect-value with “connect values” on left axis mouse-over menu.
View
moving-averagemoving-average = trueWhen moving-average is enabled, the most recent aggregation period is based on sliding window ending with current time.
When moving-average is disabled, all aggregate periods are set to start and end at regular times as established by calendar.
Only supported together with server-aggregate = false setting.
Possible values: true, false.
View
alert-expression
alert-style
alert-expression = value > 75
alert-style = stroke: red; stroke-width: 3
Alert rule and style that is applied to each series separately.View
displaydisplay = value > 2
display = value >= 5
display = value >= top(3)
display = this.lastRequestTime - this.last.t < 60*60000
Shows only series that satisfy the specified rules.
Useful to filter our series based on metric values when there are many series in the widget.

Individual samples can be hidden with replace-value setting.

Example 1
Example 2
Example 3
Replace Value
negative-stylenegative-style = fill: redCSS styles applied to the negative values of the series in column and column-stack modes.View
current-period-stylecurrent-period-style = fill-opacity: 0; stroke-width: 2px; stroke-dasharray: 5, 2, 1, 2;CSS styles applied to the values of the current period (for example, last hour, day, week etc.) in column and column-stack modes.View
forecast-styleforecast-style = stroke: magenta;CSS styles applied to forecasts in column and column-stack modes.View
[threshold] Settings

Chart Lab: View

It is possible to set a threshold from a series. To do so, load the series you would like to use as the threshold, set display = false, and give the series an alias. Then use the set alias in the threshold value = value('alias') setting as shown in the Chart Lab example below.

Chart Lab: View

NameExampleDescription
labellabel = thresholdName of the threshold displayed in the legend.
colorcolor = redColor of the threshold (by default randomly determined).
valuevalue = 60Value of the threshold; set in the form of JavaScript when the alert-expression for series uses the same format.
[series] Settings

Inherited settings from [widget]: markers, last-marker, column, last-value-label, step-line, disconnect-interval, disconnect-count, time-offset

Inherited settings from Generic Widget [series]: entity, metric, type, interval, rate, rate-counter, statistics, alias, alert-expression, alert-style, style, color, label, tooltip, axis, format, display, hidden, refresh-interval, retry-refresh-interval, error-refresh-interval

NameExampleDescriptionChart Lab
modemode = columnMode can be applied to both widget and each series separately.
This includes scenarios where one series is a column, and the other a line.
Possible values: column.
Column displays of series in the form of columns.
Column
alert-expressionalert-expression = value < 95
alert-expression = value > 75
Alert rule that is applied to each series separately.Example 1
Example 2
alert-stylealert-style = fill: red; stroke: redAlert style that is applied to each series separately.View
fill-valuefill-value = trueInterpolation mode applied to a computed series if the values are irregularly spaced. If set to true, the missing samples are filled with interpolated values.
Detailed values are filled-in using LINEAR interpolation, aggregated periods are filled with PREVIOUS values.
If fill-value is false, the missing samples are filled with 0 or null.
Possible values: true, false.
Default value: true.
View
load-future-dataload-future-data = trueLoad future series values.
Usually used to view imported forecasts generated with 3rd party tools, like R Language.
Possible values: true, false.
View
series-typeseries type = s3This setting can be used in a stack mode as a grouping parameter.
Series with the same series-type values are stacked (their values are summed up).
If you set a unique value for each series, you can accomplish a fill effect without stacking the series.
Example 1
Example 2

If you add several series with the same entity, metric and optional settings (such as label, color, format, etc.), it is enough to set the parameters only in the configuration of the first series. The next series will inherit them.­

Series Visibility

Hide series without values:

display = !isNaN(value)

Hide series that have no data for the last 60 minutes:

display = this.lastRequestTime - this.last.t < 60*60000
Time Chart Controls

Chart Lab: View

1
2
3
4
5
6
7
8
9
10
11
12
13
1

Click on title to expand the widget to full-screen.

2

Click on series icon to show/hide it from the time chart.

3

Change the time-span of the time chart.

4

Change the mode of the time chart.

5

Select the aggregation type of the series.

6

Display the forecast and confidence interval for the series.

7

Select the aggregation period.

8

Auto scale the value axes of the time chart.

Display the series in the form of a step-line.

Display/hide value markers for the series.

9

Drag the right axis to scale it manually.

Double click the right axis to reset the scale.

10

Drag the left axis to scale it manually.

Double click the left aixs to rest the scale.

11

Double click on the time chart to show all loaded data.

12

Drag the time axis to adjust the time-span manually.

13

Select a manual time-span on the context chart.

  • Modify the selection interval and aggregation period on the fly
  • Add custom selection intervals and aggregation periods directly on the Time Chart
  • View different aggregations without reloading the portal
  • Change the chart mode at any moment: line, column, range, stack
  • View your data in the appropriate format: hertz, joules, watts, bytes, percent, currency etc.
  • Create custom metrics using custom formulas and aggregations
  • Alerting rules directly in the portal
  • Instantly generate forecasts directly in the Time Chart
Modifying Controls

Adding selection intervals and aggregation periods can be done directly in Time Chart controls by double clicking on the white-space between the intervals/periods where you would like to add a new one (as shown in the visualization below). An interval/period about half way between the two values will be added on each double click.

For example: to add a 45 minute aggregation period, double click between 30m and 1h on the aggregation period controls of the Time Chart.

To remove selection intervals and aggregation periods, simply drag and drop the undesired intervals/periods off the Time Chart controls.

See the example below of how this feature works in action:

It is possible to modify the time chart widget controls with the defaultChartConfig.script = setting under [configuration].

To manage the amount of displayed controls you can use:

defaultChartConfig.script = widget.chart.panels[1].expand(8)

Substitute the 8 with the desired amount of controls to be displayed.

Chart Lab: Example 1
Chart Lab: Example 2

To manage the individual controls use:

defaultChartConfig.script = widget.panels.type.data(['detail', 'avg', 'max', 'min', 'percentile 50', 'percentile 99', 'percentile 95', 'percentile 90', 'percentile 75', 'sum', 'count', '+'])

Add or remove each control component to show or hide it from the widgets:

detail
avg
max
min
percentile 50
percentile 99
percentile 95
percentile 90
percentile 75
sum
count
+

Chart Lab: View

Configuration Example

Chart Lab: View

  [widget]
    type = chart
    title = MemFree
    time-span = 1 hour
    legend-position = right
 
    [series]
      entity = nurswgvml007
      metric = memfree
 
    [series]
      entity = nurswgvml006
      metric = memfree
 
    [series]
      entity = nurswgvml010
      metric = memfree