UI Elements Data Visualization Smart Chart

Updated: January 31, 2018
SAPUI5 Version 1.48

Smart Chart

sap.ui.comp.smartchart.SmartChart

Intro

The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates a visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.

Smart chart
Smart chart

Usage

Use the smart chart if:

  • Data is fed through OData services.
  • You need to reduce development effort.
  • You would like to profit from drilldown and detailed information support.

Do not use the smart chart if:

  • You create your own UI coding, and the data is not fed through OData services. In this case, use the VizFrame chart instead.

Responsiveness

The smart chart is fully responsive. It uses the overflow toolbar control, which is a container based on sap.m.Toolbar. This control also provides overflow when content does not fit in the visible area. The Details text button never moves into the overflow, since it has a central function.

Size S
Size S
Size M
Size M
Size L
Size L

Layout

The header area contains the title of the smart chart, variant management, and the toolbar itself. All of these elements are optional.
The chart area shows the corresponding chart.

Schematic visualization of the smart chart
Schematic visualization of the smart chart

Components

  1. Title and/or variant management: The title provides a short, meaningful summary of the chart content. Use the variant management control only if the user needs to save and load different filter settings and views of the chart.
  2. Breadcrumb: The interactive breadcrumb offers a history of the user’s drilldown path, enabling the user to return to the previous views of the chart.
  3. Details:  If one or more data points are selected, the user can see detailed information for the selection(s) using the Details button. In the popover, you can offer both global actions and actions at item level.
  4. Drilldown: The chart provides two drilldown options:
    • The Drill Up / Drill Down arrow icon buttons that come by default with the chart.
    • The Drill Down button (recommended). If no data points are selected, the Drill Down button affects all the data in the chart. If one or more data points are selected, drilling down is based on the selection.
  5. Legend: The Toggle Legend Visibility icon button toggles the legend on and off.
  6. Zoom in/out: The Zoom In and Zoom Out icon buttons allow users to decrease or increase the number of data points they see in one view.
  7. Download: The Download button downloads the current view of the chart.
  8. Chart personalization: If you need to let users set the visibility of chart dimensions, or sort and filter data points, you can add a personalization dialog. For more information, see P13n Dialog.
  9. Full screen: The Maximize/Minimize icon button toggles the full screen view.
  10. Chart type switch: The Selected Chart Type icon button offers a popover with the different available chart types.
  11. Tooltip: Shows information about the data point on hover.
Smart chart components
Smart chart components

Behavior and Interaction

Selection

Data points can be selected by clicking or dragging. Both single selection and multiple selection are possible. Data points, labels, and legend items can be selected. Clicking into the background deselects all data points. For more information, see Chart – Selection.

Details

The Details popover gives detailed information on each selection made in the chart. The number of selections is shown in brackets.

  1. The Details popover shows detailed information on the selection.
  2. Clicking on an item/selection in the popover shows the semantic navigation (smart links) related to the selection. In the example below, the information is divided into two groups.
  3. The third image shows the semantic navigation information for the selected group (Name).

Smart Chart - Interaction for the 'Details' Popover

  • Smart Chart - details popover1
  • Smart Chart - details popover2
  • Smart Chart - details popover3

Guidelines

Semantic Colors

To display chart measures, the smart chart uses semantic coloring based on the UI.DataPoint annotation.

Use semantic coloring when you want to show data points with negative, critical, positive or neutral meanings. Based on the defined threshold values, the color of each data point can be red, green, or orange. For more information on color use, see Colors.

Smart chart - Semantic colors
Smart chart - Semantic colors

Semantic Patterns

The smart chart supports semantic patterns, such as dashes, dots, or hatches, in order to distinguish between:

  • Actual values: What values are (solid pattern).
  • Projected values: What values might be (dashed line, hatched areas).

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