MCS Publishing | PPF Graph Widget

Below is an example of all available options when defining a graph. Only options marked as required must be defined — all others use sensible defaults.

var ppf_widgets = {
    example_graph: {
        ele: ['graph1', 'graph2'],
        data: 'speeddata',
        type: 1,
        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: [[]]
    }
}

Key	Description
`ele`	Required. HTML element IDs where the graph should render. For example, if the HTML contains `<div id='speedgraph'></div>`, use: `ele: ['speedgraph']`
`data`	Required. The data set name to use for the graph. For example: `data: 'speeddata'`
`type`	Required. Must be `1` for a graph widget.
`datadepend`	If the widget depends on a certain data type, define it as an array. Common types: `voip`, `act` (Quality), `route`, `capacity`.
`metrics`	Required. Metrics to plot, in `testtype.metric` format. Metrics must be available for the chosen data set. See available metrics. Example: `metrics: ['speed.dspeed', 'speed.uspeed']`
`metricsn`	Required. Friendly names for the legend, one per metric. Example: `metricsn: ['Download', 'Upload']`
`metricsc`	Required. Colors for each plot line, one per metric. Example: `metricsc: ['#ff0000', '#000000']`
`doplot`	Required. Whether each metric is plotted on the graph. Metrics set to `false` still appear in the mouseover popup. Example: `doplot: [true, true]`
`metricpas`	Required. Plot type for each metric: `line` or `bar`. Example: `metricpas: ['line', 'bar']`

All gui options are optional and use sensible defaults if not specified.

Dimensions & Margins

Key	Description	Example
`width`	Width as pixels or percentage.	`'100%'` or `500`
`height`	Height as pixels or percentage.	`500`
`margin.top`	Header area height (contains the title). Pixels.	`30`
`margin.bottom`	Footer area height (contains X-axis labels and title). Pixels.	`120`
`margin.left`	Left margin (contains Y-axis labels and title). Pixels.	`60`
`margin.right`	Right margin. Pixels.	`10`

Colors & Backgrounds

Key	Description	Example
`mBg`	Background color(s) of the graph surround (not the plot area). Multiple values create a gradient.	`['#FFFFFF']` or `['#FFFFFF','#333333']`
`mBgDir`	Gradient direction when multiple `mBg` colors are used.	`'vertical'` or `'horizontal'`
`gBg`	Background color of the plot area. Solid colors only.	`'#f9f9f9'`
`axlCol`	Axis line color.	`'#000000'`
`axLw`	Axis line width in pixels.	`1`
`lblCol`	Font color for axis labels.	`'#000000'`

Titles & Fonts

Key	Description	Example
`title`	Graph title (appears in header area).	`'Download Speed'`
`titFsz`	Font size for the graph title.	`14`
`titFnt`	Font family for the graph title.	`'Arial'`
`xTitle`	X-axis title.	`'Date/Time'`
`xFsz`	Font size for the X-axis title.	`10`
`xFnt`	Font family for the X-axis title.	`'Arial'`
`yTitle`	Y-axis title.	`'Bandwidth (Mbps)'`
`yFsz`	Font size for the Y-axis title.	`10`
`yFnt`	Font family for the Y-axis title.	`'Arial'`
`labelFnt`	Font family for axis labels.	`'Arial'`
`labelSize`	Font size for axis labels. Y-axis labels auto-shrink if they don't fit the margin.	`8`
`yrTitle`	Right-hand Y-axis title.	`'Right Scale'`
`yrScale`	Enable/disable the right-hand Y-axis. When enabled, applies to the second metric.	`false`
`xLbls`	Show or hide X-axis labels.	`true`

Plot Lines & Dots

Key	Description	Example
`plotLineWidth`	Width of plot lines in pixels.	`1`
`plotDots`	Show circular dots at data points.	`false`
`dotSize`	Size of dots (when enabled).	`2`
`dotCol`	Color of dots.	`'#000000'`
`dotBorder`	Color of dot borders.	`'#FF0000'`
`dotBrdSize`	Border size in pixels. Set to `0` for no border.	`0`

Key	Description
`legend`	Show or hide the legend. Default: `true`. Mouseover labels remain functional when hidden.
`url`	When defined, makes the graph clickable — opens the URL in the same window. Example: `url: 'https://www.visualware.com'`
`depend`	Widget dependencies. See dependency information.

PPF Graph Widget

Full Example

Required Keys

GUI Options

Dimensions & Margins

Colors & Backgrounds

Titles & Fonts

Plot Lines & Dots

Other Options