Documentation Docs
Documentation Docs

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.
  • options: IVisualizationPanelOptions
    Visualization Panel configuration.

View Demo

Inherited from the following class(es):

allowDragDrop property

Returns the allowDragDrop property value of the IVisualizationPanelOptions object.

Type:
boolean readonly
Implemented in:
VisualizationPanel

Returns the allowDynamicLayout property value of the IVisualizationPanelOptions object.

Type:
boolean readonly
Implemented in:
VisualizationPanel

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
data property

Obsolete. Use surveyData instead.

Type:
any readonly
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

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
getData method

Obsolete. Use getCalculatedValues() instead.

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 descendant classes.

Type:
() => any
Implemented in:
VisualizerBase
See also:
setState
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

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 options object in the constructor.

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

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

Returns the identifier of a visualized question.

Type:
any readonly
Implemented in:
VisualizerBase

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 **

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

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

Parameters:

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

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

Parameters:

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

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

Parameters:

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

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

Obsolete. Use onElementShown, onElementHidden, or onElementMoved instead.

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

Redraws the VisualizationPanel and all its content.

Type:
() => void
Implemented in:
VisualizationPanel

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?: any) => any) => void
Parameters:
name, type: string ,

A custom name for the toolbar item.

creator, type: (toolbar?: any) => any ,

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: any) => void
Parameters:
targetElement, type: any ,

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.

This method is overriden in descendant classes.

Type:
(state: any) => void
Parameters:
state, type: any
Implemented in:
VisualizerBase
See also:
getState

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.

Type:
IState writable
Implemented in:
VisualizationPanel
supportSelection property

Indicates whether users can select series points to cross-filter charts. To allow or disallow selection, set the allowSelection property of the options object in the 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

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

Type:
(name: string) => (toolbar?: any) => any
Parameters:
name, type: string ,

A toolbar item name.

Return Value:
A function previously used to [register](#registerToolbarItem) 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

Copyright © 2023 Devsoft Baltic OÜ. All rights reserved.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ Terms of Use & Privacy Statement.

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.