VisualizationPanel

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

Applies a theme to the Dashboard.

Type:

(theme: IDashboardTheme) => void

Parameters:

theme, type: IDashboardTheme ,

An IDashboardTheme object that defines visual settings.

Implemented in:

VisualizerBase

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

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 the footer visualizer instance or undefined if the footer is not applicable.

Type:

VisualizerBase readonly

Implemented in:

VisualizerBase

See also:

hasFooter *

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 visualization item with a specified question name.

Type:

(questionName: string) => P

Parameters:

questionName, type: string

Implemented in:

VisualizationPanel

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

Type:

(questionNames?: string[]) => IVisualizerPanelElement[]

Parameters:

questionNames, type: string[] ,

Question names. Do not specify this parameter to get an array of all visualization items.

Implemented in:

VisualizationPanel

See also:

visibleElements * , hiddenElements

Returns an object with properties that describe the 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 * , resetState * , onStateChanged *

Returns a visualizer that visualizes a specified survey question.

Type:

(questionName: string) => VisualizerBase

Parameters:

questionName, type: string ,

A question name.

Implemented in:

VisualizationPanel

Indicates whether the visualizer renders a footer. Returns true if the question supports comments or an "Other" option.

Type:

boolean readonly

Implemented in:

VisualizerBase

See also:

hasHeader *

Indicates whether the visualizer renders a header. Returns true if the question defines a correctAnswer.

Type:

boolean readonly

Implemented in:

VisualizerBase

See also:

hasFooter *

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:

P[] readonly

Implemented in:

VisualizationPanel

See also:

visibleElements * , getElements

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

Type:

LayoutEngine readonly

Implemented in:

VisualizationPanel

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

Returns the identifier of a visualized question.

Type:

string readonly

Implemented in:

VisualizerBase

Raised after the visualizer content is rendered.

Parameters:

• sender: VisualizerBase
  The current VisualizerBase instance.
• options.htmlElement: HTMLElement
  An HTMLElement that contains the rendered content.

Type:

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

Implemented in:

VisualizerBase

See also:

render * , refresh *

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<PanelElement>, options: any) => any, VisualizationPanel<PanelElement>, any>

Implemented in:

VisualizationPanel

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<PanelElement>, options: any) => any, VisualizationPanel<PanelElement>, any>

Implemented in:

VisualizationPanel

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<PanelElement>, options: any) => any, VisualizationPanel<PanelElement>, any>

Implemented in:

VisualizationPanel

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

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?: HTMLDivElement) => HTMLElement, type: ToolbarItemType, index?: number, groupIndex?: number) => 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.

type, type: "button" | "dropdown" | "filter" | "license"

index, type: number

groupIndex, type: number

Implemented in:

VisualizerBase

See also:

unregisterToolbarItem

Renders the visualizer inside a specified container.

Type:

(targetElement: string | HTMLElement, isRoot?: boolean) => void

Parameters:

targetElement, type: string | HTMLElement ,

An HTMLElement or the id of a DOM element.

isRoot, type: boolean

Implemented in:

VisualizerBase

Resets the visualizer state.

This method is overriden in classes descendant from VisualizerBase.

Type:

() => void

Implemented in:

VisualizerBase

See also:

getState * , setState * , onStateChanged *

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

Sets the visualizer 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 * , resetState * , onStateChanged *

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

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.

View Demo

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

Returns the visualizer's title.

Type:

string readonly

Implemented in:

VisualizerBase

Returns the visualizer's type identifier.

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?: 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

Updates the data used by the visualizer.

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

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:

P[] readonly

Implemented in:

VisualizationPanel

See also:

hiddenElements * , getElements