# Latency Visualisation (LatencyMON)

LatencyMON is a client-side tool in which latency trends are visualised and compared using stacked charts.

# Highlights

  • Available for ping, traceroute, DNS, TLS (SSL), and HTTP measurements.
  • Designed to easily compare different trends. The values are preprocessed and the axes are auto-tuned to facilitate the comparison of multiple trends.
  • The charts are updated in real time as data is received from the probes, using the RIPE Atlas results streaming service.
  • It is possible to navigate through historical results.
  • You can include multiple measurements in the same view.
  • You can group together results coming from different probes (e.g. creating groups based on geographical location).
  • Both relative and absolute value representations are available.
  • Charts are stacked and can be dragged or expanded.

# Description

By default, each chart will show the Min value of the collected latencies using a green line, but all the three attempts (Min, Med, Max) can be shown on request, with different coloured lines. Each dot represents when exactly a sample was retrieved. A filled dot means the original value was an outlier and it was cut by the axis optimisation algorithm in order to improve the readability of the entire scene.

By hovering over a node, it is possible to see all the information available about that sample, including the raw values collected. In order to simplify the interaction, the dots have a magnetic effect, so it is enough to be close to the dot in order to show this information.

When a measurement is loaded at initialisation, an algorithm will automatically try to guess what the best grouping is for the measurement. For example, if multiple probes in multiple countries are available, a groping by country will be selected by default. If instead multiple targets are involved, a grouping by target is performed. On the right of each chart, information about the element in the group is shown.

In case of comparison charts, the various probes involved in the group will be represented by a specific coloured line.

When no data has been collected, an empty spot in one or more charts will appear. The dashed lines in the charts represent the positions of the samples affected by packet loss. A protracted packet loss of 100% will appear as a red dashed area.

# Axis

While the x-axis always displays the time in a linear representation, the y-axis can show the values in a relative or absolute representation (see more below). You can toggle between the two views by clicking on the small graph icon at the top right of the LatencyMON visualisation.

# Absolute representation

The absolute representation shows the real latency values (in milliseconds) on the y-axis on a linear scale. The baseline is the minimum latency collected in the time range for the specific graph. Note that outliers have been removed.

# Relative representation

The relative representation shows, in percentages, how the values behave compared to the baseline, which is the minimum latency collected in the time range for the specific graph. Note that outliers have been removed.

For example, if the latencies collected oscillate between 30 and 90 ms, the y-axis will have a range between 0 and 200%, as 30 ms will be considered the baseline and 90 ms represents an increase of 200% over 30 ms.

# How To

Following is a list of common operations possible with this tool:

# Add a measurement

If you open a measurement from the measurements list, you will find a tab called "LatencyMON" showing the measurement's latencies. It is, however, possible to add another measurement by clicking on the first icon in the controller bar.

# Add a chart

By clicking on the second icon, a panel with a list of probes involved in the selected measurements will appear. The user can use the input field in the top right to search the list. For each probe selected, a new chart will appear in the main view. It is possible to remove a chart by clicking on the related bin icon.

# Add a group

By clicking on the third icon, the same search panel used for adding a probe will appear. All the probes selected in this phase will be included as a single group. In the input field on the bottom left, it is possible to specify a group name. You can also specify various chart types.

The "+Group" button will display an aggregation of the latencies measured by the probes involved. The "+Compare" button (not yet available in the beta version) will represent in the same chart each probe involved with a specific line.

While a particular time frame for the measurement is represented, the time bar underneath the graph can be used to easily navigate throughout the measurement's lifetime. The selected time window can be expanded or reduced accordingly via the time bar or the controls on the top right of the window. It is possible to zoom in/out by selecting a portion of a chart.

When the selected time frame is recent enough, the streaming option will be activated and the current scene will be updated with real-time samples. An indicator on the bar on top marks the streaming status.

# Embed the tool in your page

It is possible to embed the tool by using the following code on an HTML page:

<script src="https://www-static.ripe.net/static/rnd-ui/atlas/static/measurements/widgets/latencymon/latencymon-widget-main.js"></script>
<div id="place-here"></div>
<script>
  initLatencymon(
    "#place-here",
    {}, // Tool options, see table below for more info
    { measurements: [1791207, 2083078] } // Query options, see table below for more info
  );
</script>

It is possible to specify two kinds of options: tool options and query options.

# The possible tool options are:

Name

Description

dataApiMeta

[string] Specify the URL of the metadata REST API.

dataApiResults

[string] Specify the URL for the results REST API.

autoStart

[true, false] Start the widget once loaded or wait for the .init() command.

streamingUrl

[string] Specify the URL of the socket.io streaming.

syncWithRealTimeData

[true, false] Allow or don't allow auto-updating of the charts with the streaming samples.

autoStartGrouping

[true, false] Automatically create groups of probes at initialisation.

showMinimumByDefault

[true, false] If true shows only the minimum of the 3 RTT values collected over time. Default true.

# The possible query options are:

Name

Description

measurements

[array] A list of comma-separated measurement IDs.

startTimestamp

[int] The Unix timestamp indicating the start time of the represented time range.

stopTimestamp

[int] The Unix timestamp indicating the stop time of the represented time range.

timeWindowSize

[string] Specify a time window with startTimestamp and stopTimestamp. Possible values are: 1h, 2d, 2w, 1m. For example, 2d will display the last 2 days.

mergedMeasurements

[array] A list containing lists of measurement IDs merged together. Merging measurements together allows the user to see them as a single measurement. For example, in the case of [[1, 2], [3, 4]], there will be 2 final measurements composed respectively by the measurements 1 & 2, and 3 & 4.

groups

[array] An array of JavaScript objects to force a default grouping. Each object describes a group (e.g. {measurementId: measurement_id, probes: [list_of_comma_separated_ids], id: group_name, type: group_type}. The group type defines the kind of chart that will be instantiated. The available group types are: "single-probe", "multi-probes", "comparison". For groups composed only of a single probe, "single-probe" should be used.

dataFilter

[string] The data filter name to be used (i.e. natural or relative).

In addition to the parameters in the embed code, it is possible to interact with the widget in two ways:

  • In a command line fashion by opening the console of the browser;
  • Using the exposed methods of the object returned by the initLatencymon() function.

In both cases, the widget will explain all the available options in the console.

Last Updated: Invalid Date