Creating Dashboard at Runtime

Unsere Beispiele der Projekte und Berichtsvorlagen helfen Ihnen, die Grundlagen der Arbeit mit unserer Software zu erlernen.
Auf GitHub ansehen
Produkte ✖Dashboards.JS ✖Engine ✖Komponenten ✖
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.
Auf GitHub ansehen Herunterladen
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