Runtime Filtering
The interactive action known as Apply Parameters empowers report authors to configure runtime filters, enabling report readers to manipulate and examine data in a slice-and-dice fashion. In this demonstration, the Sales Dashboard exhibits how users can zoom in on specific years and locations. This approach enables users to focus on the desired information and tailor their analysis to meet their needs.
index.html
Copy to CodeMine
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ActiveReportsJS sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-designer.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/resource/common/report-sample-style.css"
/>
<script src="/activereportsjs/demos/resource/common/init-report-sample.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-designer.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js"></script>
<script src="$DEMOROOT$/lib/purejs/license.js"></script>
</head>
<script>
function onLoad() {
function formatCurrencyValue(value) {
let currencySymbol = "$";
if (value >= 1000000000) {
return currencySymbol + (value / 1000000000).toFixed(1) + "B";
} else if (value >= 1000000) {
return currencySymbol + (value / 1000000).toFixed(1) + "M";
} else if (value >= 1000) {
return currencySymbol + (value / 1000).toFixed(1) + "K";
} else {
return currencySymbol + value.toFixed(1);
}
}
MESCIUS.ActiveReportsJS.Core.CustomCode.registerFunctions([
{
name: "FormatCurrencyValue",
body: formatCurrencyValue,
info: {
description:
"Format a number to currency in relation to their magnitude",
example: "Code.numberToWords(Sum(SalesAmount))",
syntax: "Code.numberToWords(<number>)",
},
},
]);
var paramsOpened = false;
initReportSample(
"viewer-host",
"designer-host",
"SalesDashboard3.rdlx-json",
"Runtime Filtering",
function (viewer) {
// viewer.toggleToolbar(false);
// viewer.toggleSidebar(false);
// viewer.toggleFullScreen();
viewer.zoom = "FitPage";
}
);
}
</script>
<body onload="onLoad()">
<div id="root">
<div id="viewer-host"></div>
<div id="designer-host"></div>
</div>
</body>
</html>
Feedback
Submit and view feedback for