Full Example
Only options marked as required must be defined — all others use sensible defaults.
var ppf_widgets = {
example_indicator: {
data: 'v24',
datadepend: [],
ele: ['mos1'],
type: 3,
width: "125px",
height: "80px",
thrgood: ["#3a8312", "#ffffff"],
thrbad: ["#b21d1d", "#ffffff"],
throkay: ["#dbb43f", "#000000"],
textsize: "12px",
textweight: "normal",
textalign: "left",
margin: "7px",
cellpadding: "0px 0px 0px 10px",
border: "",
metricsn: ['Outgoing MOS', 'Incoming MOS', 'Example', 'VoIP'],
metrics: [
'voip.mos',
'voip.dmos',
'exp.(||voip.mos|| * ||voip.dmos||).toFixed(1)',
'sum|voip.dmos,voip.mos,voip.loss,voip.dloss,voip.djitter,voip.jitter'
],
metricsubtitles: ['score', 'score', 'Calculation', 'Overall'],
url: ['', '', '', ''],
depend: [[]]
}
}
Required Keys
| Key | Description |
|---|
ele |
Required. HTML element IDs where the indicators should render. Example: ele: ['mos1'] |
data |
Required. The data set name to use. Example: data: 'v24' |
type |
Required. Must be 3 for an indicator widget. |
metrics |
Required. Metrics to display, in testtype.metric format. Also supports expressions and sum| aggregations. See available metrics. |
datadepend |
If the widget depends on a certain data type, define as an array. Common types: voip, act (Quality), route, capacity. |
Threshold Colors
Each threshold setting is an array of two colors: background color (position 1) and text color (position 2), as determined by result thresholds set within MCS.
| Key | Description | Example |
|---|
thrgood | Colors when the result is good. | ["#3a8312", "#ffffff"] |
thrbad | Colors when the result is bad. | ["#b21d1d", "#ffffff"] |
throkay | Colors when the result is average. | ["#dbb43f", "#000000"] |
Display Options
| Key | Description | Example |
|---|
width | Width of each indicator. | "125px" |
height | Height of each indicator. | "80px" |
textsize | Font size for headings, sub-headings, and results. | "12px" |
textweight | Font weight. Accepts thin, normal, bold, or numerical values 100–900. | "normal" |
textalign | Text alignment within the indicator: left, center, or right. | "left" |
margin | Distance between each indicator. Should be more than 1px when multiple metrics are defined. | "7px" |
cellpadding | Internal padding for all three elements (heading, result, sub-heading). Format: top right bottom left. | "0px 0px 0px 10px" |
border | Border around indicators. Set a numerical value or leave empty for no border. | "" |
metricsn | Display names for each metric indicator. | ['Outgoing MOS', 'Incoming MOS'] |
metricsubtitles | Subtitles appearing below each metric name. | ['score', 'score'] |
url | Makes individual indicators clickable. Array position determines which indicator is activated. | ['https://...', ''] |
depend | Widget dependencies. See dependency information. | [[]] |
