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.
Name | Example | Description | Chart Lab |
---|---|---|---|
context-height | context-height = 50 | Height 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-force | max-range-force = 30 | Strict 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 |
ticks | ticks = 10 | Number of markers on the left axis (5 by default). | View |
ticks-right | ticks-right = 10 | Number of markers on the right axis (5 by default). | View |
ticks-time | ticks-time = 20 | Number of markers on the time axis. | View |
day-format | day-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-offset | time-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-date | display-date = true | Display of data under the time graph according to the chosen time interval (false by default). | View |
markers | markers = true | Display 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-marker | last-marker = false | Display of the current series value marker. Possible values: true, false (true by default). | View |
horizontal-grid | horizontal-grid = false | Display of horizontal grid (true by default). | View |
vertical-grid | vertical-grid = false | Display of vertical grid (false by default). | View |
pointer-position | pointer-position = left | Position of the last value pointer relative to the series. Possible values: left, right, auto, none. Default = ‘right’. | View |
legend-value | legend-value = false | Display of the last value for each series in the legend (true by default). | View |
auto-scale | auto-scale = true | Automatic scaling of the visible portion of the graph (false by default). | View |
step-line | step-line = true | Connect 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 |
auto-period | auto-period = false | Automatically defines the aggregation period for series based on the chosen time interval (true by default). | View |
retain-time-span | retain-time-span = false | Saves the length of the chosen time interval during the widget update (true by default). | View |
mode | mode = 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-interval | disconnect-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-count | disconnect-count = 50 | Average 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-value | disconnect-value = 0 | Works 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-average | moving-average = true | When 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 |
display | display = 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-style | negative-style = fill: red | CSS styles applied to the negative values of the series in column and column-stack modes. | View |
current-period-style | current-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-style | forecast-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
Name | Example | Description |
---|---|---|
label | label = threshold | Name of the threshold displayed in the legend. |
color | color = red | Color of the threshold (by default randomly determined). |
value | value = 60 | Value 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
Name | Example | Description | Chart Lab |
---|---|---|---|
mode | mode = column | Mode 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-expression | alert-expression = value < 95 alert-expression = value > 75 | Alert rule that is applied to each series separately. | Example 1 Example 2 |
alert-style | alert-style = fill: red; stroke: red | Alert style that is applied to each series separately. | View |
fill-value | fill-value = true | Interpolation 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-data | load-future-data = true | Load future series values. Usually used to view imported forecasts generated with 3rd party tools, like R Language. Possible values: true, false. | View |
series-type | series type = s3 | This 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

Click on title to expand the widget to full-screen.
Click on series icon to show/hide it from the time chart.
Change the time-span of the time chart.
Change the mode of the time chart.
Select the aggregation type of the series.
Display the forecast and confidence interval for the series.
Select the aggregation period.
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.
Drag the right axis to scale it manually.
Double click the right axis to reset the scale.
Drag the left axis to scale it manually.
Double click the left aixs to rest the scale.
Double click on the time chart to show all loaded data.
Drag the time axis to adjust the time-span manually.
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 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 |