mobile menu

Summary Widget

You are here
PPF Summary Widget

PPF Summary widget

A summary widget is a great way to get an overview of how a certain data set is performing. Results are output to a table with colored 'traffic lights' depicting the success of each metric.

Below is an example of ALL the options available when defining a text widget. Some options are required, the options that are not required don't need to be defined unless something other than default is desired.

var ppf_widgets = {
    example_summary: { //Name of widget, these must be unique within the ppf_widget definitions
        ele: ['summarytable'], //REQUIRED
        data:  'speeddata', //REQUIRED
        type: 7, //REQUIRED
		  datadepend: ['voip','act'],
        lightColors: {
            good: '#42a328',
            warn: '#fbbb20',
            crit: '#b71919',
            na: '#333333'
        bordersize: 1, //set to 0 to disable
        bordercolor: '#333333',
        metricsn: ['Download Speed', 'Upload Speed'],
        metricssubtitle: ['This is the download speed result', 'This is the upload speed result'],
        metrics: ['speed.dspeed','speed.uspeed'], //REQUIRED
        metricpfix: ['Mbps','Mbps'],
        url: ['',''],
        thresholds: 'default',
        depend: [ //REQUIRED (to define as blank use [[]])
            ['endofmonth', 'tuesday'],
            ['endofweek', 'wednesday']

Defining a summary widget

Key Value

Required. The element(s) defined here refer to HTML elements that should be present in the HTML page that pairs with the PPF. So, if the HTML element the table should appear in is

<div id='speedsum'></div>

the ele definition would be

ele: ['speedsum']

Required. Data refers to the data set name that should be used for the text. For example, if the following data set had been defined

var ppf_datasets = {
    data: {
        speeddata: {
            plugins: ['speed'],
            last: '1',
            unit: 'hour',
            by: 10

The data value for the summary widget would be...

data: 'speeddata'
datadepend: ['voip','act']

If a widget is dependant on a certain data type then define a data dependency value. The format is an array. Common test types that can be defined are voip, act (which is Quality speed data), route, and capacity.


Required. Summary is type 7 and must be defined. When defined it should look like this

type: 7

The color of the traffic light when results are considered good/a pass.

good: '#42a328'

The color of the traffic light when results are considered okay/a partial fail.

warn: '#fbbb20'

The color of the traffic light when results are considered bad/a fail.

crit: '#b71919'

The color of the traffic light when results not available.

na: '#333333'

Summary table border size in pixels. Set to 0 for no border.

bordersize: 1

Set the color of the border.

bordercolor: '#333333'

The main metric names to appear in the summary table next to the traffic lights.

metricsn: ['Download Speed', 'Upload Speed']

The metric subtitles, if set, will appear underneath the main metric name (see metricsn above). If no subtitle is required simply set a pair of empty quotes.

metricssubtitle: ['This is the download speed result', '']

Required. This setting defines the metrics that will be displayed in the summary table. The format is testtype.testmetric.

Note that metrics defined here must be available for the chosen data set. For example, if the data set is getting speed data a VoIP metric won't be valid.

metrics: ['speed.dspeed','speed.uspeed']

For a list of available metrics by test type click here.


Most metrics have a postfix. For example a Speed test download speed result might be in Mbps. Use this setting to set the postfix for each metric.

metricpfix: ['Mbps','Mbps']

When a URL is defined it enables the summary row to be clicked, which will then open the URL in the same window. The position in the array determines the row that will be activated. For example the setting below would cause the first summary column to be clickable but the second not.

url: ['', ''] //type array

This setting defines the thresholds to use for the traffic lights. To clarify, the traffic lights will be colored according to whether a result is considered bad, okay, or good. MCS supports multiple threholds files, which must be specified when setting up data sets in order to use them.

thresholds: 'default'
depend Click here for dependency information.