All PPFs start with system required code. This code must be present for MCS to process the reports correctly. Click here and copy the code snippet as the first lines of the PPF file.

Add a data set

Data sets define the data the report will be using. More than one data set can be defined.

Data set parameters include date/time ranges, data delta, filters, etc.

We will be using a simple data set for this example. So, copy the code below into the PPF below the system variables.

var ppf_datasets = {
    data: {
        voipdata: {
            plugins: ['voip'],
            last: "1440",
            unit: "mins",
            by: 60
        }
    },
    cb: location.protocol + "//" + location.host, //update to codebase URL/IP of MCS if publishing remotely (for example, https://yourmcs.com)
    thresholds: ['default'],
    calendars: ['default']
}

Add a graph and text widget

Numerous widgets are available in MCS ranging from graphs and tables to image and text. In this basic example we are going to use a text widget for the report title and a graph widget to plot VoIP Jitter.

Copy and paste the code below into the next part of the PPF.

There are many more options available for the graph widget, however you only need to specify values for parameters you want to change. The rest get inherited from the default settings. Click here for more options for the graph widget.

var ppf_widgets = {
    voipgraph: {
        data: 'voipdata',
        ele: ['voipgraph'],
        type: 1,
        gui: {
            width: 700,
            xTitle: "Date/Time",
            yTitle: "Upstream Jitter (ms)",
            title: "VoIP Graph for last day by hour"
        },
        metrics: ['voip.jitter'],
        metricsn: ['Upstream Jitter']
    },
    voiptitle: {
        text: "<h1>VoIP Graph of the last day by hour</h1>",
        ele: "voiptitle",
        type: 4
    }
}

PPF Review

The PPF should now look like the code below.

var ppf_cf = '~vwsystem~';
var ppf_sc = '~setconditions~';
var ppf_deps = [ppf_cf + 'default.ppf'];
loadPpfDeps(ppf_deps);

var ppf_datasets = {
    data: {
        voipdata: {
            plugins: ['voip'],
            last: "1440",
            unit: "mins",
            by: 60
        }
    },
    cb: location.protocol + "//" + location.host,
    thresholds: ['default'],
    calendars: ['default']
}

var ppf_widgets = {
    voipgraph: {
        data: 'voipdata',
        ele: ['voipgraph'],
        type: 1,
        gui: {
            width: 700,
            xTitle: "Date/Time",
            yTitle: "Upstream Jitter (ms)",
            title: "VoIP Graph for last day by hour"
        },
        metrics: ['voip.jitter'],
        metricsn: ['Upstream Jitter']
    },
    voiptitle: {
        text: "<h1>VoIP Graph of the last day by hour</h1>",
        ele: "voiptitle",
        type: 4
    }
}

Setting up the HTML

You will notice that most widgets contain an ele parameter. This is a reference to an HTML element where the widget will appear on the page.

For this example the entire HTML page will look like this...

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>VoIP Report</title>
</head>
<body>
<div id="voiptitle"></div>
<div id="voipgraph"></div>

 
<script name="report" src="~vwsystem~bootrep.js" type="text/javascript"></script>
</body>
</html>

You will notice that the ele value for the graph widget is voipgraph, so, this will appear in the div that has the ID of voipgraph. Likewise the text widget has an ele value of voiptitle, so, the title text will appear in the div that has the ID of voiptitle.

Data

As this example uses VoIP data there will have to be VoIP data in the MCS database for the report to show a valid graph. You can easily get some quick VoIP data by running one of the default VoIP tests from the MCS main menu.

Schedule the Report

Now the report has been defined you can set it to be published! Click here for a user guide on scheduling a report to publish.

Download Example

Click here to download