mobile menu

PPF Indicator Widget

You are here
PPF Threshold Pie Widget

PPF Threshold Pie widget

The threshold pie widget is designed to give a quick inidication as to the spread of a specific metrics results. For example, if there were 1000 results for VoIP Jitter for the selected time period the pie chart would quickly show you how many were good, bad, and okay. Something that may be hidden in a standard average of all results.

threshold pie example

Below is an example of ALL the options available when defining a threshold pie 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_indicator: { //Name of widget, must be unique within the ppf_widget definitions
         data: 'voip', /* required */
         datadepend: [],
         ele: 'pie', /* required */
         type: 10, /* required */
         height: 400,
         width: 600,
         cvsmarg: 50,
         fontsize: 15,
         fonttype: "Arial",
         titlecol: "#000000",
         titlealign: "center",
         metrics: ['voip.jitter'],
         title: "Threshold Result breakdown for Outgoing Jitter (ms)",
         piecol: ['#58964e', '#eeb342', '#ee4242'],
         legendtxt: ['Good', 'Okay', 'Bad'],
         depend: [[]]

Defining a text 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='mos1'></div>

the ele definition would be

ele: ['mos1']

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

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

The data value for the text would be...

data: 'voip'
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. Threshold Pie is type 10 and must be defined. When defined it should look like this

type: 10

Width, in pixels, of the pie chart canvas as it will appear on the page.

width: 600

Height, in pixels, of the pie chart canvas as it will appear on the page.

height: 400

This is the margin width, in pixels, for the canvas area. So, a value of 50 would create a 50 pixel wide margin around the pie chart.

cvsmarg: 50

This is the font size, in pixels, to be used for the text on the canvas.

fontsize: 15

This is the font style to use for the text on the canvas.

fonttype: "Arial"
titlecol: "#000000"

This is the color of the title text.

titlealign: "center"

This is the alignment on the canvas of the title. Valid entries are left, right, and center.

metrics: ['voip.jitter']

Define the metric to be used for the pie chart.

title: "Threshold Result breakdown for Outgoing Jitter (ms)"

Define the text to use for the title.

piecol: ['#58964e', '#eeb342', '#ee4242']

Define the colors to use for the pie chart. Three colors for good, okay, and bad results. These colors are also used for the pie chart legend.


Define the text to use for the legend.

legendtxt: ['Good', 'Okay', 'Bad']
depend Click here for dependency information.