This example shows how to display a dashboard in the Stimulsoft Viewer using JavaScript with server-side data handling. First, include the Stimulsoft libraries:
<?php
require_once '../vendor/autoload.php';
use Stimulsoft\Events\StiDataEventArgs;
use Stimulsoft\StiHandler;
?>
Create and configure the event handler. By default, all requests are processed on the current page. You can also specify a custom handler file:
$handler = new StiHandler();
// $handler = new StiHandler('handler.php');
Define server-side events before processing. You can assign a PHP function, the name of a JavaScript function, or a JavaScript function as a string. Multiple event handlers can be added using the
append() method. In this example,
onBeginProcessData is defined for handling dashboard data requests:
$handler->onBeginProcessData = function (StiDataEventArgs $args) {
// Server-side processing logic can be added here
};
Process incoming requests using
process():
$handler->process();
In the HTML head, include the necessary JavaScript libraries for reports, viewer, and dashboards:
<script src="/../vendor/stimulsoft/reports-php/scripts/stimulsoft.reports.js"></script>
<script src="/../vendor/stimulsoft/reports-php/scripts/stimulsoft.viewer.js"></script>
<script src="/../vendor/stimulsoft/dashboards-php/scripts/stimulsoft.dashboards.js"></script>
<?php
$handler->renderHtml();
?>
Create and configure the viewer options object:
let options = new Stimulsoft.Viewer.StiViewerOptions();
options.appearance.fullScreenMode = true;
options.appearance.scrollbarsMode = true;
options.height = "600px";
Create the viewer object with the configured options:
let viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
Define viewer events. The
onBeginProcessData event will call the server-side handler to process data requests:
viewer.onBeginProcessData = function (args, callback) {
Stimulsoft.handler.process(args, callback);
};
Create a report object and load a dashboard template using
loadFile():
let report = new Stimulsoft.Report.StiReport();
report.loadFile("../reports/Christmas.mrt");
viewer.report = report;
Finally, render the viewer in the specified HTML element using
renderHtml():
function onLoad() {
viewer.renderHtml("viewerContent");
}
Include the HTML element for the viewer and call the onLoad function:
<body onload="onLoad();">
<h2>Showing a Dashboard in the Viewer in an HTML template using JavaScript</h2>
<hr>
<div id="viewerContent"></div>
</body>
Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen:
