Adding a Font to the Resource

Register the required resource in JavaScript so the dashboard renders consistently in every environment.

Assigning a Dashboard to the Viewer

Dashboards.JS displays interactive dashboards entirely in the browser using the same viewer as Reports.JS.

Changing the Designer Theme

Embed the dashboard designer in JavaScript, load a template, and connect its editing and save actions.

Changing the Viewer Theme

The dashboard viewer supports many themes, selected through options. This example applies a theme and switches it at run time.

Creating a Table then Adding Two Filters and Exporting to Excel

Render the dashboard in JavaScript and export it directly from code, without opening the viewer.

Creating Dashboard at Runtime

A dashboard can be built entirely from code — pages and elements are objects you create and add.

Customizing the Designer

The dashboard designer interface can be trimmed to expose only the features you want. This example hides several toolbar items.

Customizing the Viewer

Set up the dashboard viewer in JavaScript, load a template, and connect the component to the application.

Editing a Dashboard Template

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

This example hosts both the dashboard designer and the viewer on one page, so a user can edit a dashboard and preview the result.

Exporting a Dashboard from Code

A dashboard can be exported from code to formats such as PDF, Excel or an image. This example renders a dashboard and exports it.

Loading Scripts in Part to Minify Project

Dashboards.JS is modular: instead of loading the whole library, you can include only the parts your page needs to keep the download small.

Localization the Designer

The dashboard designer interface can be shown in different languages by adding localization files. This example adds several and selects one culture.

Registering a Data for Dashboard Template

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 JSON Data for the Dashboard Template

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.

Showing the Dashboard Designer Immediately after Running an App

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

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

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

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

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

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

Set up the dashboard viewer in JavaScript, load a template, and connect the component to the application.

Supply Custom Headers for Json Database

When a dashboard loads data from a protected JSON endpoint, you can attach authentication headers through the onBeginProcessData event.

Updating a JSON Data for the Dashboard Viewer

A dashboard shown in the viewer can be refreshed with new data without reloading the page — useful for live dashboards.

Using CDNs for Script Loading

The Dashboards.JS scripts can be loaded from a CDN instead of being hosted with your application.

Using the Full-Screen Mode in the Designer

Embed the dashboard designer in JavaScript, load a template, and connect its editing and save actions.

Using the Full-Screen Mode in the Viewer

Full-screen mode makes the dashboard viewer fill the whole browser window, ideal for dashboard portals. This example enables it.

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.