Dashboard

Visualizes survey results and provides an interactive UI for data analysis.

Get Started with SurveyJS Dashboard

View Demo

Inherited from the following class(es):

addItem method

Adds an item to the Dashboard.

Type:
(item: Question | IDashboardItemOptions | DashboardItem) => DashboardItem
Parameters:
item, type: Question | IDashboardItemOptions | DashboardItem ,

A DashboardItem instance, an IDashboardItemOptions object, or a survey question used to create a new item.

Return Value:

The added DashboardItem instance.

Implemented in:
Dashboard
allowDragDrop property

Returns the allowDragDrop property value passed to the constructor.

Type:
boolean readonly
Implemented in:
VisualizationPanel

Returns the allowDynamicLayout property value passed to the constructor.

Type:
boolean readonly
Implemented in:
VisualizationPanel

Returns the allowHideQuestions property value passed to the constructor.

Type:
boolean readonly
Implemented in:
VisualizationPanel
applyTheme method

Applies a theme to the Dashboard.

Type:
(theme: ITheme, baseTheme?: ITheme) => void
Parameters:
theme, type: ITheme ,

An ITheme object with theme settings.

baseTheme, type: ITheme ,

An optional ITheme object used as the base theme. When specified, it is deep-merged with theme, and the merged result is applied.

Implemented in:
VisualizerBase
clear method

Clears the toolbar, header, content, and footer containers and removes the license banner and visualizer wrapper from the root.

Does not remove the visualizer root element from the DOM. Use destroy() to fully dispose of the visualizer.

Type:
() => void
Implemented in:
VisualizerBase
destroy method

Deletes the visualizer and removes its DOM elements.

Type:
() => void
Implemented in:
VisualizerBase
See also:
clear

Returns calculated values used for visualization. If a user applies a filter, the array is also filtered.

To access an array of source survey results, use the surveyData property.

Type:
() => Promise<ICalculationResult<number>>
Implemented in:
VisualizerBase
getItem method

Returns a dashboard item with the specified name.

If the questions array is specified when initializing the Dashboard, item names are generated automatically based on the associated question names.

Type:
(name: string) => DashboardItem
Parameters:
name, type: string ,

The item identifier.

Return Value:

A DashboardItem instance, or undefined if no matching item is found.

Implemented in:
Dashboard
items property

Gets an array of dashboard items.

Each item represents a single data visualization within the Dashboard.

Type:
DashboardItem[] readonly
Implemented in:
Dashboard
locale property

Gets or sets the current locale.

If you want to inherit the locale from a visualized survey, assign a SurveyModel instance to the survey option passed to the Dashboard.

If the survey is translated into more than one language, the dashboard toolbar displays a language selection drop-down menu.

View Demo

Type:
string writable
Implemented in:
VisualizerBase
See also:
onLocaleChanged

Raised when the user changes the date range in the date panel. Handle this event to react to date filtering changes.

Parameters:

  • options.dateRange: number[]
    The selected [startDate, endDate] range.
  • options.datePeriod: "last7days" | "last14days" | "last28days" | "last30days" | "lastWeekMon" | "lastWeekSun" | "lastMonth" | "lastQuarter" | "lastYear" | "ytd" | "mtd" | "wtdSun" | "wtdMon" | "qtd"
    The selected predefined date period. undefined if the user selected a custom range.
Type:
Event<(sender: Dashboard, options: IDateRangeChangedOptions) => any, Dashboard, any>
Implemented in:
Dashboard

Raised after the locale changes.

Parameters:

  • sender: VisualizerBase
    The current VisualizerBase instance.
  • options.locale: string
    The indentifier of a new locale (for example, "en").
Type:
Event<(sender: VisualizerBase, options: { locale: string; }) => any, VisualizerBase, any>
Implemented in:
VisualizerBase
See also:
locale

Raised when the visualizer state changes.

The state contains user-defined settings such as selected chart type, layout, sorting, filtering, and other runtime customizations. Handle this event to persist these customizations (for example, in localStorage) and restore them later.

Parameters:

  • sender: VisualizerBase
    The current VisualizerBase instance.
  • state: any
    The new state of the visualizer.

View Demo

Type:
Event<(sender: VisualizerBase, options: any) => any, VisualizerBase, any>
Implemented in:
VisualizerBase
refresh method

Redraws the dashboard and all its content.

Type:
() => void
Implemented in:
VisualizationPanel
removeItem method

Removes an item from the Dashboard.

Type:
(item: string | DashboardItem) => void
Parameters:
item, type: string | DashboardItem ,

A DashboardItem instance or the name of the item to remove.

Implemented in:
Dashboard
render method

Renders the visualizer inside a specified container.

Type:
(targetElement: any, isRoot?: boolean) => void
Parameters:
targetElement, type: any ,

An HTMLElement or the id of a DOM element.

isRoot, type: boolean
Implemented in:
VisualizerBase
setFilter method

Filters visualized data based on a specified question name and value. This method is called when a user clicks a chart point.

Type:
(questionName: string, selectedValue: any) => void
Parameters:
questionName, type: string ,

A question name.

selectedValue, type: any ,

A filter value.

Implemented in:
VisualizationPanel
showToolbar property

Gets or sets whether the toolbar is visible.

Default value: true

Type:
boolean writable
Implemented in:
VisualizerBase
state property

Gets or sets the Dashboard state.

The state includes configuration of dashboard items and the current locale.

View Demo

Type:
IState writable
Implemented in:
VisualizationPanel
See also:
onStateChanged
supportSelection property

Indicates whether users can select chart elements to apply cross-filtering. Controlled by the allowSelection option passed to the Dashboard.

Type:
boolean readonly
Implemented in:
VisualizerBase
surveyData property

Returns an array of survey result objects used to calculate values for visualization. If a user applies a filter, the array is also filtered.

To obtain calculated values, call getCalculatedValues().

Type:
any[] readonly
Implemented in:
VisualizerBase
updateData method

Updates the visualized data.

Type:
(data: GetDataFn | { [index: string]: any; }[]) => void
Parameters:
data, type: GetDataFn | { [index: string]: any; }[] ,

An array of survey result objects or a data-loading function.

Implemented in:
VisualizerBase

Send feedback to the SurveyJS team

Need help? Visit our support page

Your cookie settings

We use cookies to make your browsing experience more convenient and personal. Some cookies are essential, while others help us analyse traffic. Your personal data and cookies may be used for ad personalization. By clicking “Accept All”, you consent to the use of all cookies as described in our Terms of Use and Privacy Statement. You can manage your preferences in “Cookie settings.”

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.