Dashboard Timeseries Widget

What is it?

• A Timeseries widget is a part of a dashboard that can display a single or multiple like or unalike KPI as a line or bar chart
• Single KPI – Very simple
• Multiple KPI with different Units – Delay (ms) vs Loss (%) vs User Experience (s)
• KPI with Groupby(s) – Region or Applications
• Timeseries widgets can color code common KPI or groupby
• Timeseries widgets use a TopN on KPI
• Timeseries widgets support
• Time selection zoom (drag into events)
• Hover Max and Min
• Different formats (Cluster, split, Legend location and Area chart)

Example

Single Metric

Runtime Options

• Click on KPI to expand to TopN
• Hover over KPI for Max Min
• Click on Run-time for in dashboard change of
• Data display: Lines, Area, or Stacked
• Clustered vs split by Aggregation, category, direction or metric display
• Legend location for clean layout

• When you zoom in a time range, you can get a higher granularity and have the option to set the interval to current the zoom-interval

Authoring Options

Capture Data Source

You can filter and group by capture layer, found in Others tab, to better understand how the traffic or data are separated.

To keep in mind if groupBy Data layers is selected:

• When the widget type is changed in the configuration, the data-layer groupBy is cleared (removed) if the newly selected widget is incompatible.

Capabilities

• Lots of small Timeseries widgets are fine if you want to show many
• Connected metrics (Engineering view) Time trends
• Remember for each metric and groupby you get a line – 2 metrics and 5
• Regions creates 10 lines (with TopN of 5)
• Restrict the size of the TopN groupby or you have many Lines on a chart.
• Groupby Supports 5,10 & 25 TopN and reverse sort
• Also can include missing categories in results
• Timeseries boxes can link to other dashboards and support filters

Timeseries Display Settings

You can rearrange the way the Timeseries widget displays information.

To configure Timeseries display settings:

1. Hover on the timeseries widget, then click the gear icon. A modal displays.
2. Set these parameters:
   1. Data display: Select Lines, Area, or Stacked. For information, see Data Display Options.
   2. Split by: Toggle on to split data, and then select Aggregation, Category, Direction, or Metric
   3. Legend group by: Select Category or Metric
   4. Set Legend location: Select Top, Right, or Auto
   5. Legend Width: Select Medium or Large
   6. Range limiting: Click the + icon, select a metric, then set the range
3. Click outside the modal to return to the dashboard.

Data Display Options

Line

Useful for showing a trend in the data over a time period.

When multiple series appear in the same widget, a line chart gives an opportunity to compare different data.

Area

Lays out data the same way as the Line chart, with the main difference of having the area under the graph shaded.

When multiple series appear on the same widget, data appears as an overlapping area chart.

Recommended for viewing a separation or overlap of multiple metrics.

Stacked

Each y-value of a series is based on the previous series data. The topmost series shows the sum of all series.

Recommended for viewing what the accumulated data looks like for metrics such as traffic volume grouped by application.

Adding a Mark Line

In this section, we're going to take a look at adding a mark line to the visualization in the UI.

A Mark Line defines a Threshold Profile and they are assigned per metric static threshold.

Important to note is that mark lines can be enabled in the Dashboard Editor; you may notice that the Mark line editor is very similar to your typical bin editor. The great news is that if you have experience with one, you’ll already have experience with the other!

Using this editor, you may set the:

• Threshold
• Label
• Color
• Direction of the shading of the background area.

To add a mark line

1. Click Monitoring in the left pane.

2. Select the Dashboard you would like to edit.

3. Click Author in the top-right corner of your screen once in the Dashboard Editor.

4. Click Card.
   The side pane appears.

5. Where it reads Data, click the ellipsis (. . .) and select Add mark line.
   The Mark line window appears.
   

6. Click + Line to set a value, color, and label.
   

7. Click the checkmark icon and then Save in the top-right corner of your screen to save your progress.
   

Congratulations, you have now added a mark line to the visualization! Note that it will be saved with the Timeseries Widget so, if you were to refresh, it will be there for the future.

In-Depth Example: Good versus Bad

As seen in the above screenshot, you can customize the mark line profiles with more than one line and more than one label. The shading of the background areas can likewise be customized. A mark line with a comparator of > (greater than) will shade upwards to infinity (∞) and a comparator of < (less than) will shade downwards to 0. That is to say, the comparator is the direction of the shaded area.

As a reminder, since mark lines are per metric, they are unavailable in the Timeseries Options Modal.

It is recommend to only use mark lines for a single metric on a chart.