PPF Graph Widget

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 graph should appear in is

<div id='speedgraph'></div>

the ele definition would be

ele: ['speedgraph']

Required. Data refers to the data set name that should be used for the graph. 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 graph 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. A graph is type 1 and must be defined. When defined it should look like this

type: 1

The width of the graph as a pixel or a percentage, for example:

width: '100%'

width: 500

The height of the graph as a pixel or a percentage, for example:

height: '100%'

height: 500

The top margin refers to the graph header height. This area contains the graph title. The value is in pixels.

top: 50

The top margin refers to the graph footer height. This area contains the X-Axis labels and the X-Axis title. The value is in pixels.

bottom: 100

The left margin refers to the gap between the Y-Axis and the left edge of the graph. The Y-Axis labels and title appear here. The value is in pixels.

left: 80

The right margin refers to the gap between the right edge of the plot area and the right edge of the graph. The value is in pixels.

right: 20

This defines the background color of the graph surround (not the plot area). If more than one background color is defined in the array a gradient will be created.

Solid background:

mBg: ['#FFFFFF']

Gradient background:

mBg: ['#FFFFFF','#333333']

This defines the background direction when a gradient (see gui:mBg above) is being used. The options are vertical or horizontal.

mBgDir: 'vertical'

mBgDir: 'horizontal'

This defines the background of the plot area itself. By plot area we mean the area on the graph where the actual lines are drawn. This setting only takes solid colors.

gBg: '#FFFFFF'

This defines the color of the axis lines.

axlCol: '#000000'

This defines the width or weight of the axis line in pixels.

axLw: 1

This defines the title that will be used for the X Axis.

xTitle: 'Date/Time'

This defines the font size for the X Axis title.

xFsz: 12

This defines the font-family for the X Axis title.

xFnt: 'Arial'

This defines the title that will be used for the Y Axis.

yTitle: 'Bandwidth (Mbps)'

This defines the font size for the Y Axis title.

yFsz: 12

This defines the font-family for the Y Axis title.

yFnt: 'Arial'

Enable or disable the right hand side scale. When enabled it applies to the second metric in the metrics list.

yrScale: false

This defines the text to use for the right hand side scale.

yrTitle: 'Right Scale'

This defines the title of the graph. This appears in the header of the graph.

title: 'Download Speed for the last day'

This defines the font size to use for the graph title.

titFsz: 14

This defines the font-family to use for the graph title.

titFnt: 'Arial'

This defines the font-family to use for the axis labels.

labelFnt: 'Arial'

This defines the font size to use for axis labels. Note the Y axis labels will auto shrink if the font size chosen won't fit in the given margin.

labelSize: 12

This defines the font color of the axis labels.

lblCol: '#000000'

This defines the width of the graph plot lines in pixels.

plotLineWidth: 1

This defines whether or not a circular dot will be plotted, as well as the line. By default this option is off (false). To turn on set to true.

plotDots: false

If plot dots have been enabled (see gui:plotDots above) this defines the size.

dotSize: 2

If plot dots have been enabled (see gui:plotDots above) this defines the color of the dots.

dotCol: '#000000'

If plot dots have been enabled (see gui:plotDots above) this defines the color of the dot border.

dotBorder: '#FF0000'

If plot dots have been enabled (see gui:plotDots above) this defines the size of the border in pixels. Set to 0 for no border.

dotBrdSize: 0

Acceptable values are true (default) or false. Setting this to false will disable labels for the X-Axis

xLbls: false

Required. This setting defines the metrics that should be plotted on the graph. 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.

Required. This setting defines the friendly names that will be used in the graph legend. There should be a name defined for each metric (see metrics above).

metricsn: ['Download','Upload']

Required. This setting defines the colors to be used for each plot line. There should be a color defined for each metric (see metrics above).

metricsc: ['#ff0000','#000000']

Required. This setting defines whether the metric should be plotted on the graph or not. Any metric set to false will appear in the mouse over popup, but not on the graph itself. This allows flexibility to show more metrics in the graph than necessarily need plotting.

doplot: [true, true]

Required. This setting defines type of plot. Currently there are two options, line and bar.

metricpas: ['line','bar']

Accepted values are true (default) or false. Setting to false will stop the legend for the graph appearing. Mouse over labels on the graph will still be functional.

legend: false

When a URL is defined it enables the graph to be clicked, which will then open the URL in the same window.

url: 'https://www.visualware.com' //type string