mobile menu

PPF Graph Widget

You are here
PPF Graph Widget

PPF Graph Widget

Below is an example of ALL the options available when defining a graph. 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_graph: { //Name of widget, these must be unique within the ppf_widget definitions
            ele: [ 'graph1', 'graph2'], //REQUIRED
            data:  'speeddata', //REQUIRED
            type: 1, //REQUIRED
				datadepend: ['voip','act'],
            gui: {
                width: '100%',
                height: 500,
                margin: {
                    top: 30,
                    bottom: 120,
                    left: 60,
                    right: 10
                },
                mBg: ['#ffffff'],
                mBgDir: 'vertical',
                gBg: '#f9f9f9',
                axlCol: '#000000',
                axLw: 1,
                xTitle: 'X Title',
                xFsz: 10,
                xFnt: 'Arial',
                yTitle: 'Y Title',
                yFsz: 10,
                yFnt: 'Arial',
                title: 'Default Title',
                titFsz: 10,
                titFnt: 'Arial',
                labelFnt: 'Arial',
                labelSize: 8,
                lblCol: '#000000',
                plotLineWidth: 1,
                plotDots: false,
                dotSize: 2,
                dotCol: '#000000',
                dotBorder: '#FF0000',
                dotBrdSize: 0,
                yrTitle: "Right Axis",
                yrScale: false,
                xLbls: true
            },
            metrics: ['speed.dspeed','speed.uspeed'],
            metricsn: ['Download','Upload'],
            metricsc: ['#FF0000','#000000'],
            doplot: [true, true],
            legend: true,
            metricpas: ['line','bar'],
            url: '',
            depend: [[]]
        }
}
    

Defining a Graph

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

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

the ele definition would be

ele: ['speedgraph']
data

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
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. A graph is type 1 and must be defined. When defined it should look like this

type: 1
gui:width

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

width: '100%'
width: 500
gui:height

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

height: '100%'
height: 500
gui:margin:top

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

top: 50
gui:margin:bottom

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
gui:margin:left

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
gui:margin:right

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
gui:mBg

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']
gui:mBgDir

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'
gui:gBg

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'
gui:axlCol

This defines the color of the axis lines.

axlCol: '#000000'
gui:axLw

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

axLw: 1
gui:xTitle

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

xTitle: 'Date/Time'
gui:xFsz

This defines the font size for the X Axis title.

xFsz: 12
gui:xFnt

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

xFnt: 'Arial'
gui:yTitle

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

yTitle: 'Bandwidth (Mbps)'
gui:yFsz

This defines the font size for the Y Axis title.

yFsz: 12
gui:yFnt

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

yFnt: 'Arial'
gui:yrScale

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

yrScale: false
gui:yrTitle

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

yrTitle: 'Right Scale'
gui:title

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

title: 'Download Speed for the last day'
gui:titFsz

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

titFsz: 14
gui:titFnt

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

titFnt: 'Arial'
gui:labelFnt

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

labelFnt: 'Arial'
gui:labelSize

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
gui:lblCol

This defines the font color of the axis labels.

lblCol: '#000000'
gui:plotLineWidth

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

plotLineWidth: 1
gui:plotDots

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
gui:dotSize

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

dotSize: 2
gui:dotCol

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

dotCol: '#000000'
gui:dotBorder

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

dotBorder: '#FF0000'
gui:dotBrdSize

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
gui:xLbls

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

xLbls: false
metrics

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.

metricsn

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']
metricsc

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']
doplot

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]
metricpas

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

metricpas: ['line','bar']
legend

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
url

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
depend Click here for dependency information.