Cloud
Облачный сервис для быстрого и эффективного анализа и визуализации данных для вашего бизнеса без необходимости создания своих приложений и программирования.
Примеры проектов для Stimulsoft Ultimate
Наши примеры проектов и шаблоны отчётов помогут Вам разобраться в основах работы с нашими продуктами.
Adding a Custom Function to the Designer / Dashboards.WEB / .NET 6.0
Add a custom function to the expression engine and call it from a dashboard template during rendering.
Adding a Custom Function to the Designer / Dashboards.WEB / .NET 8.0
Add a custom function to the expression engine and call it from a dashboard template during rendering.
Adding a Custom Function to the Designer / Dashboards.WIN / .NET Framework
Add a custom function to the expression engine and call it from a dashboard template during rendering.
Adding a Custom Function to the Designer / Dashboards.BLAZOR / Server
Add a custom function to the expression engine and call it from a dashboard template during rendering.
Adding a Custom Function to the Designer / Dashboards.BLAZOR / Web Assembly
Add a custom function to the expression engine and call it from a dashboard template during rendering.
Adding a Font to the Resource / Dashboards.JS / HTML
Register the required resource in JavaScript so the dashboard renders consistently in every environment.
Adding a Font to the Resource / Dashboards.JS / React
A font can be embedded into a dashboard as a resource so it renders identically everywhere; here a TrueType font is added to the dictionary.
Adding a Font to the Resource / Dashboards.JS / Angular
A font can be embedded into a dashboard as a resource so it renders identically everywhere; here a TrueType font is added to the dictionary.
Adding a Font to the Resource / Dashboards.JS / Vue 3
A font can be embedded into a dashboard as a resource so it renders identically everywhere; here a TrueType font is added to the dictionary.
Assigning a Dashboard to the Viewer / Dashboards.JS / HTML
Dashboards.JS displays interactive dashboards entirely in the browser using the same viewer as Reports.JS.
Changing an Export Settings on the Server-Side / Dashboards.PHP / PHP
Customize a dashboard export on the PHP server through onBeginExportReport.
Changing an Export Settings on the Server-Side / Dashboards.PYTHON / Python
Export settings can be adjusted on the server when the user exports from the viewer, through the onBeginExportReport event.
Changing Dashboard Properties on the Server-Side / Dashboards.PHP / PHP
Use onOpenedReport in PHP to change dashboard properties before the viewer renders it.
Changing the Designer Theme / Dashboards.JS / HTML
Embed the dashboard designer in JavaScript, load a template, and connect its editing and save actions.
Changing the Designer Theme / Dashboards.PYTHON / Python
The dashboard designer supports many themes, set on the Python options object.
Changing the Designer Theme / Dashboards.JS / React
The dashboard designer supports themes too, applied through its options object from the StiDesignerTheme enumeration.
Changing the Designer Theme / Dashboards.JS / Angular
The dashboard designer supports themes too, applied through its options object from the StiDesignerTheme enumeration.
Changing the Designer Theme / Dashboards.JS / Vue 3
The dashboard designer supports themes too, applied through its options object from the StiDesignerTheme enumeration.
Changing the Viewer Theme / Dashboards.JS / HTML
The dashboard viewer supports many themes, selected through options. This example applies a theme and switches it at run time.
Changing the Viewer Theme / Dashboards.PHP / PHP
The dashboard viewer supports many themes, set on the PHP options object.
Changing the Viewer Theme / Dashboards.JS / React
The dashboard viewer supports many themes, chosen through the options object from the StiViewerTheme enumeration.
Changing the Viewer Theme / Dashboards.JS / Angular
The dashboard viewer supports many themes, chosen through the options object from the StiViewerTheme enumeration.
Changing the Viewer Theme / Dashboards.JS / Vue 3
The dashboard viewer supports many themes, chosen through the options object from the StiViewerTheme enumeration.
Configuring and Installing Node.js / Dashboards.PYTHON / Python
The server-side engine relies on Node.js, which the SDK can install for you.
Configuring and Installing NodeJs / Dashboards.PHP / PHP
Install and configure the Node.js runtime required by the Dashboards.PHP server engine.
Creating a new Data Connection from code / Dashboards.JS / React
A data connection can be created entirely from code — here a StiJsonDatabase is added to the dashboard dictionary and synchronized.
Creating a new Data Connection from code / Dashboards.JS / Angular
A data connection can be created entirely from code — here a StiJsonDatabase is added to the dashboard dictionary and synchronized.
Creating a new Data Connection from code / Dashboards.JS / Vue 3
A data connection can be created entirely from code — here a StiJsonDatabase is added to the dashboard dictionary and synchronized.
Creating a Table then Adding Two Filters and Exporting to Excel / Dashboards.JS / HTML
Render the dashboard in JavaScript and export it directly from code, without opening the viewer.
Creating a Table then Adding Two Filters and Exporting to Excel / Dashboards.JS / Node.js
Render the dashboard in Node.js and export it directly from code, without opening the viewer.
Creating Dashboard at Runtime / Dashboards.JS / HTML
A dashboard can be built entirely from code — pages and elements are objects you create and add.
Creating Dashboard at Runtime / Dashboards.WEB / .NET 6.0
A dashboard can be built entirely in code — the dashboard page and its elements are objects you create and add.
Creating Dashboard at Runtime / Dashboards.WEB / .NET 8.0
A dashboard can be built entirely in code — the dashboard page and its elements are objects you create and add.
Creating Dashboard at Runtime / Dashboards.WIN / .NET Framework
A dashboard can be built entirely in code. This example creates a new dashboard, registers data, and adds elements to it.
Creating Dashboard at Runtime / Dashboards.BLAZOR / Server
A dashboard can be built entirely in code. This example creates a new dashboard, registers data and adds an element, then shows it in the viewer.
Creating Dashboard at Runtime / Dashboards.BLAZOR / Web Assembly
A dashboard can be built entirely in code. This example creates a new dashboard, registers data and adds an element, then shows it in the viewer.
Creating Dashboard at Runtime / Dashboards.JS / React
A dashboard can be built from code — elements from the Stimulsoft.Dashboard.Components namespace are added to the dashboard page.
Creating Dashboard at Runtime / Dashboards.JS / Angular
A dashboard can be built from code — elements from the Stimulsoft.Dashboard.Components namespace are added to the dashboard page.
Creating Dashboard at Runtime / Dashboards.JS / Vue 3
A dashboard can be built from code — elements from the Stimulsoft.Dashboard.Components namespace are added to the dashboard page.
Customizing the Designer / Dashboards.JS / HTML
The dashboard designer interface can be trimmed to expose only the features you want. This example hides several toolbar items.
Customizing the Designer / Dashboards.JS / React
The designer interface can be simplified by hiding toolbar items through its options.
Customizing the Designer / Dashboards.JS / Angular
The designer interface can be simplified by hiding toolbar items through its options.
Customizing the Designer / Dashboards.JS / Vue 3
The designer interface can be simplified by hiding toolbar items through its options.
Customizing the Viewer / Dashboards.JS / HTML
Set up the dashboard viewer in JavaScript, load a template, and connect the component to the application.
Customizing the Viewer / Dashboards.JS / React
Set up the dashboard viewer in React, load a template, and connect the component to the application.
Customizing the Viewer / Dashboards.JS / Angular
Set up the dashboard viewer in Angular, load a template, and connect the component to the application.
Customizing the Viewer / Dashboards.JS / Vue 3
Set up the dashboard viewer in Vue 3, load a template, and connect the component to the application.
Editing a Dashboard in the Designer / Dashboards.WEB / .NET 6.0
The Stimulsoft web dashboard designer can be embedded in an ASP.NET Core MVC application.
Editing a Dashboard in the Designer / Dashboards.WEB / .NET 8.0
The Stimulsoft web dashboard designer can be embedded in an ASP.NET Core MVC application.
Editing a Dashboard in the Designer / Dashboards.WIN / .NET Framework
Your WinForms application can host the full dashboard designer. This example opens a dashboard in the designer for editing.
Editing a Dashboard in the Designer / Dashboards.BLAZOR / Server
The Blazor dashboard designer lets users edit dashboards in the browser and raises an event when they save. This example handles the save event.
Editing a Dashboard in the Designer / Dashboards.BLAZOR / Web Assembly
The Blazor dashboard designer lets users edit dashboards in the browser and raises an event when they save. This example handles the save event.
Editing a Dashboard Template / Dashboards.JS / HTML
Dashboards.JS includes the full dashboard designer in the browser. This example opens the designer with a dashboard loaded for editing.
Editing a Dashboard Template and Showing it in the Dashboard Viewer / Dashboards.JS / HTML
This example hosts both the dashboard designer and the viewer on one page, so a user can edit a dashboard and preview the result.
Editing a Dashboard Template in the Designer / Dashboards.PHP / PHP
The Dashboards.PHP designer runs in the browser, served by the PHP SDK. This example opens the designer with a dashboard loaded for editing.
Editing a Dashboard Template in the Designer / Dashboards.PYTHON / Python
Dashboards.Python includes the full dashboard designer in the browser.
Editing a Dashboard Template in the Designer in an HTML template / Dashboards.PHP / PHP
The designer's scripts and body can be emitted separately to fit your own HTML layout.
Editing a Dashboard Template in the Designer in an HTML template / Dashboards.PYTHON / Python
The designer's scripts and body can be emitted separately to fit your HTML template.
Editing a Dashboard Template in the Designer using JavaScript / Dashboards.PHP / PHP
The designer can be created entirely in JavaScript, with PHP acting only as the request handler.
Exporting a Dashboard / Dashboards.WIN / .NET Framework
Render the dashboard in .NET Framework and export it directly from code, without opening the viewer.
Exporting a Dashboard Asynchronously / Dashboards.WIN / .NET Framework
Exporting a large dashboard can be done asynchronously to keep the interface responsive. This example uses the async export API.
Exporting a Dashboard from Code / Dashboards.JS / HTML
A dashboard can be exported from code to formats such as PDF, Excel or an image. This example renders a dashboard and exports it.
Exporting a Dashboard from Code / Dashboards.PHP / PHP
A dashboard can be exported from PHP code to formats such as PDF, Excel or an image. This example renders a dashboard and exports it.
Exporting a Dashboard from Code / Dashboards.PYTHON / Python
Render the dashboard in Python and export it directly from code, without opening the viewer.
Exporting a Dashboard from Code on the Server-Side / Dashboards.PHP / PHP
Dashboards.PHP can render and export dashboards fully on the server using an embedded Node.js engine. This example exports to a file.
Exporting a Dashboard from Code on the Server-Side / Dashboards.PYTHON / Python
Render the dashboard in Python and export it directly from code, without opening the viewer.
Exporting a Dashboard from Code with Changing Export Settings / Dashboards.PHP / PHP
Server-side dashboard exports can be fine-tuned with a settings object. This example exports to PDF with custom metadata.
Exporting a Dashboard from Code with Changing Export Settings / Dashboards.JS / React
Render the dashboard in React and export it directly from code, without opening the viewer.
Exporting a Dashboard from Code with Changing Export Settings / Dashboards.JS / Angular
Render the dashboard in Angular and export it directly from code, without opening the viewer.
Exporting a Dashboard from Code with Changing Export Settings / Dashboards.JS / Vue 3
Render the dashboard in Vue 3 and export it directly from code, without opening the viewer.
Exporting a Dashboard to Excel / Dashboards.JS / Node.js
Render the dashboard in Node.js and export it directly from code, without opening the viewer.
Exporting a Dashboard to HTML / Dashboards.JS / React
Render the dashboard in React and export it directly from code, without opening the viewer.
Exporting a Dashboard to HTML / Dashboards.JS / Angular
Render the dashboard in Angular and export it directly from code, without opening the viewer.
Exporting a Dashboard to HTML / Dashboards.JS / Vue 3
Render the dashboard in Vue 3 and export it directly from code, without opening the viewer.
Exporting a Dashboard to PDF / Dashboards.JS / Node.js
Render the dashboard in Node.js and export it directly from code, without opening the viewer.
Exporting a Dashboard to PDF / Dashboards.JS / React
Render the dashboard in React and export it directly from code, without opening the viewer.
Exporting a Dashboard to PDF / Dashboards.JS / Angular
Render the dashboard in Angular and export it directly from code, without opening the viewer.
Exporting a Dashboard to PDF / Dashboards.JS / Vue 3
Render the dashboard in Vue 3 and export it directly from code, without opening the viewer.
Exporting and Printing a Dashboard from Code / Dashboards.WEB / .NET 6.0
A dashboard can be printed or exported straight to the HTTP response without the viewer.
Exporting and Printing a Dashboard from Code / Dashboards.WEB / .NET 8.0
A dashboard can be printed or exported straight to the HTTP response without the viewer.
Exporting and Printing a Dashboard from Code / Dashboards.BLAZOR / Server
A dashboard can be printed or exported straight to the browser without the viewer. This example exports a dashboard to PDF using JavaScript interop.
Exporting and Printing a Dashboard from Code / Dashboards.BLAZOR / Web Assembly
A dashboard can be printed or exported straight to the browser without the viewer. This example exports a dashboard to PDF using JavaScript interop.
Get a modified Dashboard from the Designer / Dashboards.JS / React
Embed the dashboard designer in React, load a template, and connect its editing and save actions.
Get a modified Dashboard from the Designer / Dashboards.JS / Angular
Embed the dashboard designer in Angular, load a template, and connect its editing and save actions.
Get a modified Dashboard from the Designer / Dashboards.JS / Vue 3
Embed the dashboard designer in Vue 3, load a template, and connect its editing and save actions.
Globalizing Dashboard / Dashboards.JS / React
Globalization formats a dashboard's data (numbers, dates, currency) for a chosen culture, set through the globalization manager.
Globalizing Dashboard / Dashboards.JS / Angular
Globalization formats a dashboard's data (numbers, dates, currency) for a chosen culture, set through the globalization manager.
Globalizing Dashboard / Dashboards.JS / Vue 3
Globalization formats a dashboard's data (numbers, dates, currency) for a chosen culture, set through the globalization manager.
How to Activate the Product / Dashboards.PHP / PHP
Register the Stimulsoft license when the PHP application starts, before creating any dashboard components.
How to Activate the Product / Dashboards.PYTHON / Python
Register the Stimulsoft license when the Python application starts, before creating any dashboard components.
How to Activate the Product / Dashboards.JS / React
By default the product runs in trial mode; applying your license key with StiLicense removes the watermark.
How to Activate the Product / Dashboards.JS / Angular
By default the product runs in trial mode; applying your license key with StiLicense removes the watermark.
How to Activate the Product / Dashboards.JS / Vue 3
By default the product runs in trial mode; applying your license key with StiLicense removes the watermark.
Integrating the Dashboard Components in ASP.NET App / Dashboards.ANGULAR / .NET Framework
Integrate the Angular dashboard viewer into a classic ASP.NET MVC application and handle viewer requests in its controller.
Integrating the Dashboards Viewer into an Application / Dashboards.ANGULAR / .NET 6.0
Set up the dashboard viewer in .NET 6.0, load a template, and connect the component to the application.
Integrating the Dashboards Viewer into an Application / Dashboards.ANGULAR / .NET 8.0
Set up the dashboard viewer in .NET 8.0, load a template, and connect the component to the application.
Integrating the Dashboards Viewer into Standalone Angular Component / Dashboards.ANGULAR / .NET 6.0
Set up the dashboard viewer in .NET 6.0, load a template, and connect the component to the application.
Integrating the Dashboards Viewer into Standalone Angular Component / Dashboards.ANGULAR / .NET 8.0
Set up the dashboard viewer in .NET 8.0, load a template, and connect the component to the application.
Loading a Dashboard and Saving a Dashboard / Dashboards.JS / Node.js
Load a dashboard template on Node.js, render it, and save the prepared document for later use.
Loading a Dashboard from the Server-Side / Dashboards.JS / Node.js
On Node.js the Stimulsoft engine renders dashboards server-side through the stimulsoft-dashboards-js package.
Loading Scripts in Part to Minify Project / Dashboards.JS / HTML
Dashboards.JS is modular: instead of loading the whole library, you can include only the parts your page needs to keep the download small.
Loading Scripts in Part to Minify Project / Dashboards.PHP / PHP
Dashboards.PHP is modular: you can load only the script parts your page needs to keep the download small.
Loading Scripts in Part to Minify Project / Dashboards.PYTHON / Python
Dashboards.Python is modular: you can load only the script parts your page needs to keep the download small.
Localization the Designer / Dashboards.JS / HTML
The dashboard designer interface can be shown in different languages by adding localization files. This example adds several and selects one culture.
Localizing the Designer / Dashboards.PHP / PHP
The designer interface can be shown in different languages, with several localization files at once.
Localizing the Designer / Dashboards.PYTHON / Python
The designer interface can be shown in different languages by adding localization files.
Localizing the Designer / Dashboards.JS / React
The designer interface language is set the same way, by loading a localization file.
Localizing the Designer / Dashboards.JS / Angular
The designer interface language is set the same way, by loading a localization file.
Localizing the Designer / Dashboards.JS / Vue 3
The designer interface language is set the same way, by loading a localization file.
Localizing the Viewer / Dashboards.ANGULAR / .NET 6.0
Set up the dashboard viewer in .NET 6.0, load a template, and connect the component to the application.
Localizing the Viewer / Dashboards.ANGULAR / .NET 8.0
Set up the dashboard viewer in .NET 8.0, load a template, and connect the component to the application.
Localizing the Viewer / Dashboards.JS / React
Set up the dashboard viewer in React, load a template, and connect the component to the application.
Localizing the Viewer / Dashboards.JS / Angular
Set up the dashboard viewer in Angular, load a template, and connect the component to the application.
Localizing the Viewer / Dashboards.JS / Vue 3
Set up the dashboard viewer in Vue 3, load a template, and connect the component to the application.
Opening the Dashboard in the Viewer and Changing it on the Server-Side / Dashboards.PHP / PHP
Use onOpenedReport in Dashboards.PHP to replace or modify a dashboard before the viewer displays it.
Printing a Dashboard from Code / Dashboards.PHP / PHP
Print a dashboard from PHP by configuring the viewer and invoking its print workflow after the dashboard template has been loaded and processed.
Printing the Dashboard from Code / Dashboards.JS / React
A dashboard can be sent to the printer directly from code after rendering with print().
Printing the Dashboard from Code / Dashboards.JS / Angular
A dashboard can be sent to the printer directly from code after rendering with print().
Printing the Dashboard from Code / Dashboards.JS / Vue 3
A dashboard can be sent to the printer directly from code after rendering with print().
Registering a Data for Dashboard Template / Dashboards.JS / HTML
This example registers a dataset for a dashboard template before showing it, so the dashboard is built with data supplied from your application.
Registering a Data for Dashboard Template / Dashboards.WIN / .NET Framework
A dashboard's data can be supplied from code. This example builds a dataset and registers it with the dashboard before showing it.
Registering a Data for the Dashboard / Dashboards.WEB / .NET 6.0
A dashboard's data can be supplied from the controller instead of being stored in the template.
Registering a Data for the Dashboard / Dashboards.WEB / .NET 8.0
A dashboard's data can be supplied from the controller instead of being stored in the template.
Registering a Data for the Dashboard / Dashboards.BLAZOR / Server
Prepare the data in Server, register it in the dashboard dictionary, and render the template with those records.
Registering a Data for the Dashboard / Dashboards.BLAZOR / Web Assembly
Prepare the data in WebAssembly, register it in the dashboard dictionary, and render the template with those records.
Registering a Data from Code / Dashboards.PHP / PHP
Data can be registered for the dashboard just before it renders, through the onBeforeRender event.
Registering a Data from Code / Dashboards.PYTHON / Python
Data can be registered for the dashboard just before it renders, through the onBeforeRender event.
Registering a Data from Code when Exporting a Dashboard on the Server-Side / Dashboards.PHP / PHP
Render the dashboard in PHP and export it directly from code, without opening the viewer.
Registering a JSON Data for the Dashboard Template / Dashboards.JS / HTML
A dashboard's data can be supplied from code as JSON. This example loads a dashboard, clears its design-time data, and registers a JSON dataset.
Registering Data from Code / Dashboards.JS / React
A dashboard's data can be supplied from code: load the dashboard, clear its connections, and register your own dataset with regData.
Registering Data from Code / Dashboards.JS / Angular
A dashboard's data can be supplied from code: load the dashboard, clear its connections, and register your own dataset with regData.
Registering Data from Code / Dashboards.JS / Vue 3
A dashboard's data can be supplied from code: load the dashboard, clear its connections, and register your own dataset with regData.
Registering Data when Creating a New Dashboard / Dashboards.PHP / PHP
When a user creates a new dashboard in the designer, you can automatically register data for it through the onCreateReport event.
Registering Data when Creating a New Dashboard / Dashboards.PYTHON / Python
When a user creates a new dashboard in the designer, you can automatically register data through the onCreateReport event.
Saving a Dashboard Template on the Server-Side / Dashboards.PHP / PHP
When the user saves in the designer, the dashboard is sent to the server where you decide how to store it, through the onSaveReport event.
Saving a Dashboard Template on the Server-Side / Dashboards.PYTHON / Python
When the user saves in the designer, the dashboard is sent to the server where you decide how to store it, through the onSaveReport event.
Sending an Exported Dashboard to the Server-Side / Dashboards.PHP / PHP
When the user exports a dashboard, the result can be sent back to the server and saved, through the onEndExportReport event.
Sending an Exported Dashboard to the Server-Side / Dashboards.PYTHON / Python
When the user exports a dashboard, the result can be sent back to the server and saved, through the onEndExportReport event.
Setting Dashboard Variables on the Server-Side / Dashboards.PYTHON / Python
Dashboard variables can be filled on the server before rendering, through the onPrepareVariables event.
Showing a Dashboard in the Viewer / Dashboards.WEB / .NET 6.0
The Stimulsoft web viewer displays interactive dashboards in ASP.NET Core MVC just as it displays reports.
Showing a Dashboard in the Viewer / Dashboards.WEB / .NET 8.0
The Stimulsoft web viewer displays interactive dashboards in ASP.NET Core MVC just as it displays reports.
Showing a Dashboard in the Viewer / Dashboards.WIN / .NET Framework
Stimulsoft Dashboards.WIN shows interactive dashboards in a WinForms application.
Showing a Dashboard in the Viewer / Dashboards.BLAZOR / Server
Stimulsoft provides native Blazor components, so a dashboard is shown with the viewer tag.
Showing a Dashboard in the Viewer / Dashboards.BLAZOR / Web Assembly
Stimulsoft provides native Blazor components, so a dashboard is shown with the viewer tag.
Showing a Dashboard in the Viewer / Dashboards.PHP / PHP
The Dashboards.PHP viewer is created on the server with the PHP SDK, which outputs the JavaScript viewer into the page.
Showing a Dashboard in the Viewer / Dashboards.PYTHON / Python
Stimulsoft Dashboards.Python is a native Python library that renders dashboards and outputs the JavaScript viewer into your page.
Showing a Dashboard in the Viewer in an HTML template / Dashboards.PHP / PHP
Place the Dashboards.PHP viewer in an HTML template by rendering its scripts in the head and its markup in the body.
Showing a Dashboard in the Viewer in an HTML template / Dashboards.PYTHON / Python
Set up the dashboard viewer in Python, load a template, and connect the component to the application.
Showing a Dashboard in the Viewer in an HTML template using PHP variables / Dashboards.PHP / PHP
The viewer's HTML can be captured into PHP variables and echoed wherever you need — handy for templating engines.
Showing a Dashboard in the Viewer using JavaScript / Dashboards.PHP / PHP
Prepare a dashboard in PHP, then display it in a target element with the generated JavaScript viewer.
Showing a Dashboard in the WPF Viewer / Dashboards.WIN / .NET Framework
Dashboards.WIN also supports WPF applications. This example shows a dashboard in the WPF viewer — embedded or in a window.
Showing the Dashboard Designer Immediately after Running an App / Dashboards.JS / HTML
The dashboard designer can be shown as soon as the page loads. This example creates the designer and dashboard on start-up.
Showing the Dashboard Designer in a Required Position / Dashboards.JS / HTML
The dashboard designer can be placed into any element on your page rather than filling the window. This example renders it into a specific container.
Showing the Dashboard Designer in iframe / Dashboards.JS / HTML
Embed the dashboard designer in an iframe to keep its UI and scripts separate from the host page.
Showing the Dashboard Viewer Immediately after Running an App / Dashboards.JS / HTML
Set up the dashboard viewer in JavaScript, load a template, and connect the component to the application.
Showing the Dashboard Viewer in a Required Position / Dashboards.JS / HTML
The dashboard viewer can be rendered into any element on the page to fit your layout. This example draws it into a specific container.
Showing the Dashboard Viewer in iframe / Dashboards.JS / HTML
Embed the dashboard viewer in an iframe to isolate its scripts and layout from the host page.
Showing the Dashboard Viewer on the Web Page / Dashboards.JS / HTML
Set up the dashboard viewer in JavaScript, load a template, and connect the component to the application.
Starting SQL adapters from the HTTP server / Dashboards.JS / Node.js
Dashboards.JS can connect to SQL databases through a small Node.js data-adapter service.
Supply Custom Headers for Json Database / Dashboards.JS / HTML
When a dashboard loads data from a protected JSON endpoint, you can attach authentication headers through the onBeginProcessData event.
Supply Custom Headers for Json Database / Dashboards.JS / Node.js
Attach custom authentication headers while a Node.js dashboard reads data from a protected JSON endpoint.
Supply Custom Headers for JSON Database / Dashboards.JS / React
When a dashboard loads data from a protected JSON endpoint, authentication headers can be attached in the onBeginProcessData event.
Supply Custom Headers for JSON Database / Dashboards.JS / Angular
When a dashboard loads data from a protected JSON endpoint, authentication headers can be attached in the onBeginProcessData event.
Supply Custom Headers for JSON Database / Dashboards.JS / Vue 3
When a dashboard loads data from a protected JSON endpoint, authentication headers can be attached in the onBeginProcessData event.
Updating a JSON Data for the Dashboard Viewer / Dashboards.JS / HTML
A dashboard shown in the viewer can be refreshed with new data without reloading the page — useful for live dashboards.
Using a Custom Data Adapter / Dashboards.JS / React
For an unsupported data source you can register a custom database that answers the engine's data commands, then use it in the designer.
Using a Custom Data Adapter / Dashboards.JS / Angular
For an unsupported data source you can register a custom database that answers the engine's data commands, then use it in the designer.
Using a Custom Data Adapter / Dashboards.JS / Vue 3
For an unsupported data source you can register a custom database that answers the engine's data commands, then use it in the designer.
Using a Custom Font / Dashboards.JS / Node.js
A custom font can be added to the engine and embedded into the exported dashboard. This example loads one font and embeds it in the PDF.
Using a Custom Font / Dashboards.JS / React
A single custom font file can be registered with the engine and used across the dashboard.
Using a Custom Font / Dashboards.JS / Angular
A single custom font file can be registered with the engine and used across the dashboard.
Using a Custom Font / Dashboards.JS / Vue 3
A single custom font file can be registered with the engine and used across the dashboard.
Using API Methods / Dashboards.ANGULAR / .NET 6.0
For finer control you can call the viewer API directly from Angular using a component reference.
Using API Methods / Dashboards.ANGULAR / .NET 8.0
For finer control you can call the viewer API directly from Angular using a component reference.
Using CDNs for Script Loading / Dashboards.JS / HTML
The Dashboards.JS scripts can be loaded from a CDN instead of being hosted with your application.
Using Dashboard Variables in Code / Dashboards.JS / React
Dashboard variables can be set from code before rendering, for values that come from the application.
Using Dashboard Variables in Code / Dashboards.JS / Angular
Dashboard variables can be set from code before rendering, for values that come from the application.
Using Dashboard Variables in Code / Dashboards.JS / Vue 3
Dashboard variables can be set from code before rendering, for values that come from the application.
Using Designer Events / Dashboards.ANGULAR / .NET 6.0
Stimulsoft for Angular includes a dashboard designer alongside the viewer. This example hosts both and handles the designer's events.
Using Designer Events / Dashboards.ANGULAR / .NET 8.0
Stimulsoft for Angular includes a dashboard designer alongside the viewer. This example hosts both and handles the designer's events.
Using Designer Events / Dashboards.JS / React
The dashboard designer raises events for saving and other actions; handling onSaveReport lets you persist the edited dashboard.
Using Designer Events / Dashboards.JS / Angular
The dashboard designer raises events for saving and other actions; handling onSaveReport lets you persist the edited dashboard.
Using Designer Events / Dashboards.JS / Vue 3
The dashboard designer raises events for saving and other actions; handling onSaveReport lets you persist the edited dashboard.
Using Parameters in SQL Query / Dashboards.PYTHON / Python
SQL queries can use parameters whose values you set on the server, through the onBeginProcessData event.
Using Parameters in SQL Query / Dashboards.JS / React
SQL query parameters can be set in the onBeginProcessData event to filter the dashboard data securely.
Using Parameters in SQL Query / Dashboards.JS / Angular
SQL query parameters can be set in the onBeginProcessData event to filter the dashboard data securely.
Using Parameters in SQL Query / Dashboards.JS / Vue 3
SQL query parameters can be set in the onBeginProcessData event to filter the dashboard data securely.
Using SQL Data Sources / Dashboards.PHP / PHP
Dashboards can pull data from SQL databases, with the connection handled on the server through the onBeginProcessData event.
Using SQL Data Sources / Dashboards.JS / React
Dashboards can pull data from SQL databases through a data-adapter service; the connection is supplied in the onBeginProcessData event.
Using SQL Data Sources / Dashboards.JS / Angular
Dashboards can pull data from SQL databases through a data-adapter service; the connection is supplied in the onBeginProcessData event.
Using SQL Data Sources / Dashboards.JS / Vue 3
Dashboards can pull data from SQL databases through a data-adapter service; the connection is supplied in the onBeginProcessData event.
Using the Dashboard Theme on the Website / Dashboards.WEB / .NET 6.0
A dashboard carries its own colors and style, which you can read on the server to make the surrounding web page match.
Using the Dashboard Theme on the Website / Dashboards.WEB / .NET 8.0
A dashboard carries its own colors and style, which you can read on the server to make the surrounding web page match.
Using the Full-Screen Mode in the Designer / Dashboards.JS / HTML
Embed the dashboard designer in JavaScript, load a template, and connect its editing and save actions.
Using the Full-Screen Mode in the Viewer / Dashboards.JS / HTML
Full-screen mode makes the dashboard viewer fill the whole browser window, ideal for dashboard portals. This example enables it.
Using the Right-To-Left Mode in the Viewer / Dashboards.JS / React
Set up the dashboard viewer in React, load a template, and connect the component to the application.
Using the Right-To-Left Mode in the Viewer / Dashboards.JS / Angular
Set up the dashboard viewer in Angular, load a template, and connect the component to the application.
Using the Right-To-Left Mode in the Viewer / Dashboards.JS / Vue 3
Set up the dashboard viewer in Vue 3, load a template, and connect the component to the application.
Using the two Viewer in the One Project / Dashboards.JS / React
Run two independent dashboard viewers in one React application. Each component receives its own StiReport instance and loads a different dashboard.
Using the two Viewer in the One Project / Dashboards.JS / Angular
Run two independent dashboard viewers in one Angular application. Each component receives its own StiReport instance and loads a different dashboard.
Using the two Viewer in the One Project / Dashboards.JS / Vue 3
Run two independent dashboard viewers in one Vue 3 application. Each component receives its own StiReport instance and loads a different dashboard.
Using Viewer Events / Dashboards.ANGULAR / .NET 6.0
The dashboard viewer notifies your application about what the user does — loading, exporting and more. This example handles those events in Angular.
Using Viewer Events / Dashboards.ANGULAR / .NET 8.0
The dashboard viewer notifies your application about what the user does — loading, exporting and more. This example handles those events in Angular.
Using Viewer Events / Dashboards.JS / React
The dashboard viewer exposes events as component props; here the export event is handled to react when the user exports the dashboard.
Using Viewer Events / Dashboards.JS / Angular
The dashboard viewer exposes events as component props; here the export event is handled to react when the user exports the dashboard.
Using Viewer Events / Dashboards.JS / Vue 3
The dashboard viewer exposes events as component props; here the export event is handled to react when the user exports the dashboard.
Using Viewer Parameters / Dashboards.ANGULAR / .NET 6.0
The dashboard viewer can be driven from your application through a properties object, for instance to switch the dashboard at run time.
Using Viewer Parameters / Dashboards.ANGULAR / .NET 8.0
The dashboard viewer can be driven from your application through a properties object, for instance to switch the dashboard at run time.
Using with Express / Dashboards.JS / Node.js
Use Node.js code to use with express, with the required setup kept alongside the main API calls.
Working with onDesign and onExit events / Dashboards.PHP / PHP
The viewer and designer can be combined into one edit-and-preview workflow using their onDesignReport and onExit events.
Working with onDesign and onExit events / Dashboards.PYTHON / Python
The viewer and designer can be combined into one edit-and-preview workflow using their onDesignReport and onExit events.
Working with onDesign and onExit Events / Dashboards.JS / React
Combining the viewer and designer with the onDesignReport and onExit events lets users switch from previewing a dashboard to editing it and back.
Working with onDesign and onExit Events / Dashboards.JS / Angular
Combining the viewer and designer with the onDesignReport and onExit events lets users switch from previewing a dashboard to editing it and back.