MCS Publishing | 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 threshold pie widget

Key	Value
ele	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']`
data	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	`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.
type	Required. Threshold Pie is type 10 and must be defined. When defined it should look like this `type: 10`
width	Width, in pixels, of the pie chart canvas as it will appear on the page. `width: 600`
height	Height, in pixels, of the pie chart canvas as it will appear on the page. `height: 400`
cvsmarg	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`
fontsize	This is the font size, in pixels, to be used for the text on the canvas. `fontsize: 15`
fonttype	This is the font style to use for the text on the canvas. `fonttype: "Arial"`
titlecol	`titlecol: "#000000"` This is the color of the title text.
titlealign	`titlealign: "center"` This is the alignment on the canvas of the title. Valid entries are left, right, and center.
metrics	`metrics: ['voip.jitter']` Define the metric to be used for the pie chart.
title	`title: "Threshold Result breakdown for Outgoing Jitter (ms)"` Define the text to use for the title.
piecol	`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.
legendtxt	Define the text to use for the legend. `legendtxt: ['Good', 'Okay', 'Bad']`
depend	Click here for dependency information.

PPF Indicator Widget

PPF Threshold Pie widget

Defining a threshold pie widget