UI Elements - SAPUI5 Data Visualization Chart (VizFrame) Chart – Selection

Updated: June 24, 2020
SAPUI Version 1.124

Chart – Selection

Intro

The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.

Default Selection

The charts provide three types of selections:

No Selection

In this mode, data points cannot be selected individually and therefore no actions can be triggered from a data point.

  • When the user clicks a data point, nothing happens.
  • When a user with a mouse device hovers the pointer over a data point, nothing happens.

Single Selection

In single-selection mode, the user clicks a data point to select it. Clicking another data point selects this data point and deselects the previously selected one.

Clicking a blank area deselects a selected data point.

Example of single selection
Example of single selection

Multiselection

This is the default mode.

In multiselection mode, the user clicks a data point to add it to the selection.

Clicking a blank area deselects all selected data points.

Example of multiselection (default mode)
Example of multiselection (default mode)

Shortcut for Multiselection

The following actions are shortcuts for selecting multiple data points:

  • Click a category label: All associated data points are selected.
  • Click a legend item: All associated data points are selected.
  • Rubber-band-like lasso selection: All data points within the lasso are selected.
Example of multiselection (shortcut)
Example of multiselection (shortcut)

Selection by API

The way in which data points are selected when they are clicked can also be changed through the vizSelection (aPoints, oAction) API.

Example: Category Selection

You can implement category selection by using the vizSelection (aPoints, oAction) API. When the user clicks a data point, all data points in the same category are selected.

Example with stacked bars:

When the user clicks a bar, all bars in the same stack are selected.

Example of category selection - First click
Example of category selection - First click

When the user clicks another stack, this stack is added to the selection. The selection then contains all items of the two selected stacks.

Example of category selection - Second click
Example of category selection - Second click

Example: Series Selection

You can implement series selection by using the vizSelection (aPoints, oAction) API. When the user clicks a data point, all data points in the same series are selected.

Example with Line Chart:

When the user clicks a data point, all data points in the same line (series) are selected.

Example of series selection - First click
Example of series selection - First click

When the user clicks another line, this line is added to the selection. The selection then contains all items of the two selected lines.

Example of series selection - Second click
Example of series selection - Second click

Deselection

Clicking a selected item deselects it again.

Clicking a blank area of the chart deselects all data points that are currently selected.

Appearance

Selected and non-selected items differ in terms of their appearance as follows:

  • Selected items are highlighted by using a darker color.
  • Non-selected items have a lighter color.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

No links.