Updated: May 14, 2018

Header Chart

Intro

The Header Chart displays simple chart data inside an object header. It gives at-a-glance information about the object it is connected to, and it is supported in both compact and regular widths. This chart type can be used only in the Object Header.

Usage

Dos

  • Use the header chart when simple data, such as a trend, is important to view at a glance.
  • Use the header chart to draw attention to one aspect of the object that it’s associated with.
  • Use the header chart in the Object Header.

Don’ts

  • Don’t use the header chart to show complex or multi-series data sets.
  • Don’t use the header chart if you are including only the title and subtitle.

Structure

Basic Structure

The header chart can include variations of the following elements. However, one of the analytical components (trend, KPI, or chart plot) must be used for this view.

  • Chart title (mandatory).
  • Subtitle or Time Stamp label.
  • Trend label and icon.
  • X-axis labels (optional). Only the first and last x-axis labels can be used in this view.
  • Y-axis lines. A maximum of 3 y-axis lines can be shown. There can be no labels on the y-axis in this view.
  • Chart data. At this time, the SAP Fiori for iOS chart header can be presented only as column or line charts.

Types

The header chart container can be used for either the chart KPI or regular KPI components. (For the chart KPI, only the small variation can be used.) Only one of these KPIs can be used in this view.

Interaction & Behavior

The header chart can be read-only or it can allow for navigation on tap to the full-screen, chart floorplan. When navigation is possible, the chart tile should appear in tint color. The entire chart container will be one touch target with a single tap interaction.

If navigation from the header chart is not enabled, it is recommended to provide a chart content table view cell version of the chart within the content area of the screen. This way, if text in the header chart is truncated, or if the chart displays values from a large data set, the user will still be able to view the chart information in greater detail.

Resources