Intro
The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.
Usage
Use the interactive chart if:
- You want to give the user the possibility to visually filter data in the analytical list page.
- You want the user to gain insights before filtering large datasets with the visual filter bar.
Do not use the interactive chart if:
- You want to visualize data without using it for filtering.
- You are not using the visual filter bar.
- You want to visualize data for more complex scenarios. In this case, use the VizFrame chart instead.
[internal_only]
changes
With the next release (SAPUI5 1.48), the interactive charts (the interactive bar chart, the interactive line chart, and the interactive donut chart) will replace the VizFrame charts which are currently used in the visual filter bar in analytical list page.
[/internal_only]
Responsiveness
The interactive chart is fully responsive and supports both cozy and compact content density.
Types
There are three types of interactive charts currently available:
Resources
Elements and Controls
- Interactive Bar Chart (guidelines)
- Interactive Line Chart (guidelines)
- Interactive Donut Chart (guidelines)
- Analytical List Page (guidelines)
Implementation
- Interactive Bar Chart (SAPUI5 samples)
- Interactive Bar Chart (SAPUI5 API reference)
- Interactive Line Chart (SAPUI5 samples)
- Interactive Line Chart (SAPUI5 API reference)
- Interactive Donut Chart (SAPUI5 samples)
- Interactive Donut Chart (SAPUI5 API reference)
Visual Design
- Colors (visual design specification)
- Dimensions (visual design specification)
Elements and Controls
- Interactive Bar Chart (guidelines)
- Interactive Line Chart (guidelines)
- Interactive Donut Chart (guidelines)
- Analytical List Page (guidelines)
Implementation
- Interactive Bar Chart (SAPUI5 samples)
- Interactive Bar Chart (SAPUI5 API reference)
- Interactive Line Chart (SAPUI5 samples)
- Interactive Line Chart (SAPUI5 API reference)
- Interactive Donut Chart (SAPUI5 samples)
- Interactive Donut Chart (SAPUI5 API reference)