Dashboard
Visualizes survey results and provides an interactive UI for data analysis.
Get Started with SurveyJS Dashboard
Inherited from the following class(es):
Properties
Methods
Adds an item to the Dashboard.
- Type:
- (item: Question | IDashboardItemOptions | DashboardItem) => DashboardItem
- Parameters:
-
item, type: Question | IDashboardItemOptions | DashboardItem ,
A
DashboardIteminstance, anIDashboardItemOptionsobject, or a survey question used to create a new item.
- Return Value:
-
The added
DashboardIteminstance.
- Implemented in:
- Dashboard
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
Applies a theme to the Dashboard.
- Type:
- (theme: ITheme, baseTheme?: ITheme) => void
- Parameters:
-
baseTheme, type: ITheme ,
An optional
IThemeobject used as the base theme. When specified, it is deep-merged withtheme, and the merged result is applied.
- Implemented in:
- VisualizerBase
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
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
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
DashboardIteminstance, orundefinedif no matching item is found.
- Implemented in:
- Dashboard
Gets an array of dashboard items.
Each item represents a single data visualization within the Dashboard.
- Type:
- DashboardItem[] readonly
- Implemented in:
- Dashboard
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.
- 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.undefinedif 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 currentVisualizerBaseinstance.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 currentVisualizerBaseinstance.state:any
The new state of the visualizer.
- Type:
- Event<(sender: VisualizerBase, options: any) => any, VisualizerBase, any>
- Implemented in:
- VisualizerBase
Removes an item from the Dashboard.
- Type:
- (item: string | DashboardItem) => void
- Parameters:
- Implemented in:
- Dashboard
Renders the visualizer inside a specified container.
- Type:
- (targetElement: any, isRoot?: boolean) => void
- Parameters:
-
targetElement, type: any ,
An
HTMLElementor theidof a DOM element.isRoot, type: boolean
- Implemented in:
- VisualizerBase
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:
-
selectedValue, type: any ,
A filter value.
- Implemented in:
- VisualizationPanel
Gets or sets whether the toolbar is visible.
Default value: true
- Type:
- boolean writable
- Implemented in:
- VisualizerBase
Gets or sets the Dashboard state.
The state includes configuration of dashboard items and the current locale.
- Type:
- IState writable
- Implemented in:
- VisualizationPanel
- See also:
- onStateChanged
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
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
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