I.3. Graph display options

The graphs can have a number of options which define the colours, text and layout. These are defined as HTTP form GET attributes on the URL, e.g. http://host:port/cqm/circuit.png?H=a+heading.

Note that they can also be included in the path before the graph name, e.g. http://host:port/cqm/H=a+heading/circuit.png in which case they can be separated by / rather than &.

The attributes are processed in order.

Note

These attributes apply to both png and svg output, however it is also possible to override the svg style and use a css style sheet from a URL instead. In such cases none of the colour settings from the config or the graph URL will apply. See an actual svg output for classes that are used in the graphs.

I.3.1. Scaleable Vector Graphics

The graphs are available in PNG and SVG. We recommend using SVG graphs.

The SVG version is usually a lot quicker to load, and has a lot more detail. It works well on high resolution monitors and devices that allow scaling (such as mobile phones).

The SVG is designed to allow some post processing or manipulation with specific paths for each part of the graph, such as "tx", "rx", "min", "ave", "max", etc. These data paths are also presented using a fixed scale, and then scaled and cropped by a wrapping group. This allows tools to merge graphs from different sources and maintain scales, or allow scales to be changed later. If you actually want access to the raw data, then you should use the XML output.

There is an option for an external CSS to be referenced, rather than local style based on the config settings. This allows even more control and flexibility for display.

There is also an option to include an overlay providing tool tip (title) information for each 100 second sample. This makes for much larger files though.

I.3.2. Data points

The data point controls can be included as either fieldname or fieldname=colour. To make a valid URL either escape the # prefix or omit it. If any of these are included, then only those that are included are shown. If just fieldname is specified then the default colour is applied. The text on the right shows what fields are included and their colour key.

Table I.2. Colours

KeyColour
MDefines colour for minimum latency
ADefines colour for average latency
XDefines colour for max latency
UDefines colour for upload rate
DDefines colour for download rate
SDefines colour for sent echos
JDefines colour for rejected echos
FDefines colour for failed (no response) echos
ODefines colour for off-line

I.3.3. Additional text

Additional text is shown on the graph based on the values in the configuration if not specified. There are 4 lines on the top left in small text and two heading lines top right in large text.

Table I.3. Text

KeyText
zClean output, clears all additional text fields
ZClean and clear, as z but also sets inside background and off-line colours to transparent so graphs are easy to merge with those other LNSs
CLine 1 top left text, default if not set in config is system name
cLine 2 top left text
NLine 3 top left text
nLine 4 top left text
HMain heading text, default if not set in config is graph name
hSub heading text

Note that Z and z do not normally have any arguments, but if they do, then it sets the SVG CSS to use, e.g. z(mystyle.css) but an empty string, e.g. z(), will use the standard config based style. Setting Z forces no style and no css so parent document can set styles.

I.3.4. Other colours and spacing

Colours can be in the form of RGB, RRGGBB, RGBA, RRGGBBAA defining red/green/blue/alpha, or some simple colour names.

Table I.4. Text

KeyMeaning
LDefines a number of pixels to be provided on the left of the graph. Bandwidth and scale axis shown based on space provided left and right.
RDefines a number of pixels to be provided on the right of the graph. Bandwidth and scale axis is shown based on space provided left and right.
TDefines a number of pixels to be provided on the top of the graph. Time axes is show based on space at top and bottom.
BDefines a number of pixels to be provided on the bottom of the graph. Time axes is show based on space at top and bottom.
YDefines Y bandwidth scale starting point (0 is lowest, 1 is next, etc).
yDefines Y ms scale max level (in ms).
IDefines colour for graticule
iDefines colour for axis lines
gDefines colour for background within axis
GDefines colour for background outside axis
WDefines colour for writing (text)
EMouseover title text in svg (depending on browser, this may only work if you embed the svg in a page rather than as img tag)
eNo mouseover title text in svg