Creating Dashboard at Runtime

Our sample projects and report templates can help you learn the basics of working with our products.
View on GitHub
Products ✖Dashboards.JS ✖Engine ✖Components ✖
A dashboard can be built entirely in code — data, a table element, dimension columns and filters — with no designed template.

In Angular.
import { Component } from "@angular/core";
import { Viewer, Stimulsoft } from "stimulsoft-dashboards-js-angular/viewer";

@Component({
    imports: [Viewer],
    template: `<sti-viewer [report]="report"></sti-viewer>`
})
export class Example {
    report: Stimulsoft.Report.StiReport;

    constructor() {
        this.report = Stimulsoft.Report.StiReport.createNewDashboard();
        var dashboard = this.report.pages.getByIndex(0) as Stimulsoft.Dashboard.Components.StiDashboard;

        var dataSet = new Stimulsoft.System.Data.DataSet();
        dataSet.readJsonFile("Data/Demo.json");
        this.report.regData("Demo", "Demo", dataSet);
        this.report.dictionary.synchronize();

        var table = new Stimulsoft.Dashboard.Components.Table.StiTableElement();
        table.width = 700; table.height = 500; table.name = "Example";

        var col = new Stimulsoft.Dashboard.Components.Table.StiDimensionColumn();
        col.expression = "Products.ProductName";
        table.columns.push(col);

        var filter = new Stimulsoft.Data.Engine.StiDataFilterRule();
        filter.condition = Stimulsoft.Data.Engine.StiDataFilterCondition.BeginningWith;
        filter.path = "Products.ProductID"; filter.value = "1";
        table.dataFilters.push(filter);

        dashboard.components.add(table);
    }
}

How it works. Building the element tree in code is equivalent to designing it visually, so the dashboard renders identically to a template-based one.
View on GitHub Download
By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.
I agree