VisualizationPanel

An object that visualizes survey results and allows users to analyze them.

Constructor parameters:

questions: Array<Question>
Survey questions to visualize. Call SurveyModel's getAllQuestions() method to access all survey questions and pass its result as the questions parameter.
data: Array<any>
Survey results.
vizPanelOptions: IVisualizationPanelOptions
Visualization Panel configuration.

Inherited from the following class(es):

allowDragDrop allowDynamicLayout allowHideQuestions footerVisualizer hasFooter hasHeader hiddenElements layoutEngine locale name showToolbar state supportSelection surveyData type visibleElements

clear destroy getCalculatedValues getElement getElements getState getVisualizer hideAllElements refresh registerToolbarItem render setFilter setState showAllElements unregisterToolbarItem updateData

onAfterRender onAlternativeVisualizerChanged onElementHidden onElementMoved onElementShown onLocaleChanged onStateChanged

allowDragDrop property

Returns the allowDragDrop property value of the IVisualizationPanelOptions object.

Type:: boolean readonly

Implemented in:: VisualizationPanel

allowDynamicLayout property

Returns the allowDynamicLayout property value of the IVisualizationPanelOptions object.

Type:: boolean readonly

Implemented in:: VisualizationPanel

allowHideQuestions property

Returns the allowHideQuestions property value of the IVisualizationPanelOptions object.

Type:: boolean readonly

Implemented in:: VisualizationPanel

clear method

Empties the toolbar, header, footer, and content containers.

If you want to empty and delete the visualizer and all its elements from the DOM, call the destroy() method instead.

Type:: () => void

Implemented in:: VisualizerBase

destroy method

Deletes the visualizer and all its elements from the DOM.

Type:: () => void

Implemented in:: VisualizerBase

See also:: clear

footerVisualizer property

Allows you to access the footer visualizer. Returns undefined if the footer is absent.

Type:: VisualizerBase readonly

Implemented in:: VisualizerBase

See also:: hasFooter

getCalculatedValues method

Returns an array of calculated and visualized values. If a user applies a filter, the array is also filtered.

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

Type:: () => any

Implemented in:: VisualizerBase

getElement method

Returns a visualization item with a specified question name.

Type:: (questionName: string) => any

Parameters:: questionName, type: string

Implemented in:: VisualizationPanel

getElements method

Returns an array of IVisualizerPanelElement objects with information about visualization items.

Type:: (questionNames?: any) => {}

Parameters:: questionNames, type: any ,
Question names. Do not specify this parameter to get an array of all visualization items.

Implemented in:: VisualizationPanel

See also:: visibleElements * , hiddenElements

getState method

Returns an object with properties that describe a current visualizer state. The properties are different for each individual visualizer.

This method is overriden in classes descendant from VisualizerBase.

Type:: () => any

Implemented in:: VisualizerBase

See also:: setState * , onStateChanged

getVisualizer method

Returns a visualizer that visualizes a specified survey question.

Type:: (questionName: string) => any

Parameters:: questionName, type: string ,
A question name.

Implemented in:: VisualizationPanel

hasFooter property

Indicates whether the visualizer displays a footer. This property is true when a visualized question has a comment.

Type:: boolean readonly

Implemented in:: VisualizerBase

See also:: hasHeader

hasHeader property

Indicates whether the visualizer displays a header. This property is true when a visualized question has a correct answer.

Type:: boolean readonly

Implemented in:: VisualizerBase

See also:: hasFooter

hiddenElements property

Returns an array of IVisualizerPanelElement objects with information about currently hidden visualization items.

If you want to disallow users to hide visualization items, set the allowHideQuestions property to false.

Type:: any readonly

Implemented in:: VisualizationPanel

See also:: visibleElements * , getElements

hideAllElements method

Hides all panel elements. Users can select the elements they want to show from a drop-down menu.

Type:: () => void

Implemented in:: VisualizationPanel

See also:: showAllElements * , allowHideQuestions

layoutEngine property

Returns a LayoutEngine instance used to arrange visualization items on VisualizationPanel.

Type:: LayoutEngine readonly

Implemented in:: VisualizationPanel

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 property of the IVisualizationPanelOptions object in the VisualizationPanel constructor.

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

View Demo

Type:: string writable

Implemented in:: VisualizerBase

See also:: onLocaleChanged

name property

Returns the identifier of a visualized question.

Type:: string readonly

Implemented in:: VisualizerBase

onAfterRender event

An event that is raised after the visualizer's content is rendered.

Parameters:

sender: VisualizerBase
A VisualizerBase instance that raised the event.
options.htmlElement: HTMLElement
A page element with the visualizer's content.

Type:: Event<(sender: VisualizerBase, options: any) => any, VisualizerBase, any>

Implemented in:: VisualizerBase

See also:: render * , refresh **

onAlternativeVisualizerChanged event

An event that is raised when a user selects a different visualizer type from the Type drop-down menu.

Parameters:

sender: AlternativeVisualizersWrapper
An object that controls altenative visualizers.
options.visualizer: VisualizerBase
An applied visualizer.

Type:: Event<(sender: AlternativeVisualizersWrapper, options: any) => any, AlternativeVisualizersWrapper, any>

Implemented in:: VisualizationPanel

onElementHidden event

An event that is raised when users hide a visualization item.

Parameters:

sender: VisualizationPanel
A VisualizationPanel that raised the event.
options.elements: Array<IVisualizerPanelElement>
Information about all visualization items rendered by this VisualizationPanel.
options.element: IVisualizerPanelElement
A visualization item that has been hidden.

Type:: Event<(sender: VisualizationPanel, options: any) => any, VisualizationPanel, any>

Implemented in:: VisualizationPanel

onElementMoved event

An event that is raised when users move a visualization item.

Parameters:

sender: VisualizationPanel
A VisualizationPanel that raised the event.
options.elements: Array<IVisualizerPanelElement>
Information about all visualization items rendered by this VisualizationPanel.
options.element: IVisualizerPanelElement
A visualization item that has been moved.

Type:: Event<(sender: VisualizationPanel, options: any) => any, VisualizationPanel, any>

Implemented in:: VisualizationPanel

onElementShown event

An event that is raised when users show a visualization item.

Parameters:

sender: VisualizationPanel
A VisualizationPanel that raised the event.
options.elements: Array<IVisualizerPanelElement>
Information about all visualization items rendered by this VisualizationPanel.
options.element: IVisualizerPanelElement
A visualization item that has been shown.

Type:: Event<(sender: VisualizationPanel, options: any) => any, VisualizationPanel, any>

Implemented in:: VisualizationPanel

onLocaleChanged event

An event that is raised after a new locale is set.

Parameters:

sender: VisualizerBase
A VisualizerBase instance that raised the event.
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

onStateChanged event

An event that is raised when the visualizer's state has changed.

The state includes selected chart types, chart layout, sorting, filtering, and other customizations that a user has made while using the dashboard. Handle the onStateChanged event to save these customizations, for example, in localStorage and restore them when the user reloads the page.

Parameters:

sender: VisualizerBase
A VisualizerBase instance that raised the event.
state: any
A new state of the visualizer. Includes information about the visualized elements and current locale.

View Demo

Type:: Event<(sender: VisualizerBase, options: any) => any, VisualizerBase, any>

Implemented in:: VisualizerBase

See also:: getState * , setState

refresh method

Redraws the VisualizationPanel and all its content.

Type:: () => void

Implemented in:: VisualizationPanel

registerToolbarItem method

Registers a function used to create a toolbar item for this visualizer.

The following code shows how to add a custom button and drop-down menu to the toolbar:

import { VisualizationPanel, DocumentHelper } from "survey-analytics";

const vizPanel = new VisualizationPanel( ... );

// Add a custom button to the toolbar
vizPanel.visualizers[0].registerToolbarItem("my-toolbar-button", () => {
  return DocumentHelper.createButton(
    // A button click event handler
    () => {
      alert("Custom toolbar button is clicked");
    },
    // Button caption
    "Button"
  );
});

// Add a custom drop-down menu to the toolbar
vizPanel.visualizers[0].registerToolbarItem("my-toolbar-dropdown", () => {
  return DocumentHelper.createSelector(
    // Menu items
    [
      { value: 1, text: "One" },
      { value: 2, text: "Two" },
      { value: 3, text: "Three" }
    ],
    // A function that specifies initial selection
    (option) => false,
    // An event handler that is executed when selection is changed
    (e) => {
      alert(e.target.value);
    }
  );
});

Type:: (name: string, creator: (toolbar?: HTMLDivElement) => HTMLElement) => void

Parameters:: name, type: string ,
A custom name for the toolbar item.

creator, type: (toolbar?: HTMLDivElement) => HTMLElement ,
A function that accepts the toolbar and should return an HTMLElement with the toolbar item.

Implemented in:: VisualizerBase

See also:: unregisterToolbarItem

render method

Renders the visualizer in a specified container.

Type:: (targetElement: string | HTMLElement) => void

Parameters:: targetElement, type: string | HTMLElement ,
An HTMLElement or an id of a page element in which you want to render the visualizer.

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

Implemented in:: VisualizationPanel

See also:: IVisualizationPanelOptions.allowSelection

setState method

Sets the visualizer's state.

View Demo

This method is overriden in classes descendant from VisualizerBase.

Type:: (state: any) => void

Parameters:: state, type: any

Implemented in:: VisualizerBase

See also:: getState * , onStateChanged

showAllElements method

Shows all panel elements if they are hidden to a drop-down menu.

Type:: () => void

Implemented in:: VisualizationPanel

See also:: hideAllElements * , allowHideQuestions

showToolbar property

Gets or sets the visibility of the visualizer's toolbar.

Default value: true

Type:: boolean writable

Implemented in:: VisualizerBase

state property

The state of VisualizationPanel. Includes information about the visualized elements and current locale.

View Demo

Type:: IState writable

Implemented in:: VisualizationPanel

See also:: onStateChanged

supportSelection property

Indicates whether users can select series points to cross-filter charts. To allow or disallow selection, set the allowSelection property of the IVisualizationPanelOptions object in the VisualizationPanel constructor.

Type:: boolean readonly

Implemented in:: VisualizerBase

surveyData property

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

To get an array of calculated and visualized values, call the getCalculatedValues() method.

Type:: any readonly

Implemented in:: VisualizerBase

type property

Returns the visualizer's type.

Type:: string readonly

Implemented in:: VisualizerBase

unregisterToolbarItem method

Unregisters a function used to create a toolbar item. Allows you to remove a toolbar item.

Type:: (name: string) => (toolbar?: HTMLDivElement) => HTMLElement

Parameters:: name, type: string ,
A toolbar item name.

Return Value:: A function previously used to register the removed toolbar item.

Implemented in:: VisualizerBase

See also:: registerToolbarItem

updateData method

Updates visualized data.

Type:: (data: any) => void

Parameters:: data, type: any ,
A data array with survey results to be visualized.

Implemented in:: VisualizerBase

visibleElements property

Returns an array of IVisualizerPanelElement objects with information about currently visible visualization items.

If you want to disallow users to hide visualization items, set the allowHideQuestions property to false.

Type:: any readonly

Implemented in:: VisualizationPanel

See also:: hiddenElements * , getElements

VisualizationPanel

Properties

Methods

Events

Your cookie settings

Your renewal subscription expires soon.

Your renewal subscription has expired.

Your cookie settings

Privacy Overview

Your renewal subscription expires soon.

Your renewal subscription has expired.