Updated: May 23, 2018

Chart Cards

Intro

The chart card displays a thumbnail view of a chart, with key information shown. Users can tap it to navigate to the full interactive chart view (that is, the chart floorplan).

Usage

Dos

  • Use the chart card in a content view to provide easy navigation to the chart floorplan.
  • Use the chart card in a collection view when there are multiple charts in the app.

Don’ts

  • Don’t use the chart card to display a chart without providing users a way to navigate to a full view of the chart.

Structure

Basic Structure

Chart cards can include variations of the following elements. However, what is displayed should match the overall content of the chart floorplan that it will navigate to.

  1. Chart title (mandatory)
  2. Subtitle or Trend label
  3. Time Stamp
  4. Legend. Up to 4 legend items can be shown on the card. If there are more than 4, the fourth legend item will indicate how many additional items there are.
  5. Chart data. The chart plot area will be the same as in the card’s associated chart floorplan. Either x- or y-axis labels can be included, but not both. For x-axis labels, only the first and last labels can be displayed. For y-axis labels, a maximum of 3 labels and gridlines can be shown.

Types

The chart card supports the existing KPI components available in the SAP Fiori for iOS SDK. Either the chart KPI or the regular KPI can be placed in the card; however, for the chart KPI, only the small variation can be used.

When using these components, the chart title label on the card becomes the only label for the KPI – no other labels for the KPI will be included. Only one of these KPI components can be used in this view at a time.

Interaction & Behavior

The chart card has only one possible interaction when tapped: it navigates to the chart floorplan. The chart card has two states: regular and tap state.

When there are multiple charts within an app, chart cards can be housed within a collection view, and each card will navigate to its corresponding chart floorplan when tapped.