Create a PPF and HTML File
Create two HTML files and rename one to have an extension of .ppf (a download is available at the end of this tutorial with the required files).
Place these two files in the /MCS Root/www/reports/ directory.
Add System Variables to PPF
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 use. More than one data set can be defined.
Data set parameters include date/time ranges, data delta, filters, and more.
This example uses a simple data set. 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 images and text. In this basic example, a text widget is used for the report title and a graph widget plots 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 only values for parameters that need to be changed must be specified. The rest are inherited from the default settings. Click here for more graph widget options.
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
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>
<!-- Must be last item in body to load the report -->
<script name="report" src="~vwsystem~bootrep.js" type="text/javascript"></script>
</body>
</html>The ele value for the graph widget is voipgraph, so it will appear in the div with the ID of voipgraph. Likewise, the text widget has an ele value of voiptitle, so the title text will appear in the div with the ID of voiptitle.
Data
As this example uses VoIP data, there must be VoIP data in the MCS database for the report to show a valid graph. Quick VoIP data can be generated by running one of the default VoIP tests from the MCS main menu.
Schedule the Report
Now that the report has been defined, it can be set to publish. Click here for a user guide on scheduling a report to publish.