Updated: August 10, 2018

Chart Types

Intro

SAP Fiori for iOS supports four chart types: horizontal bar, column, stacked column, line, combination (column + line) charts and waterfall charts. Depending on the type of data in your app and how users will use the chart, it is important to select a chart type that will best meet users’ needs.

Usage

Dos

  • Use a chart when the user will need to detect overall patterns from one or more datasets, or the relationships between those datasets.
  • Select a chart type that works for the type of data being visualized. With a time series, for example, a line chart will work well, with time displayed on the x-axis, whereas the vertical arrangement of bars in a horizontal bar chart will not.

Don’ts

  • Don’t use a chart when the primary purpose is for the user to compare numerous specific values. Consider using a data table instead.
  • Don’t use a single chart to display data from more than 4 series at a time, because the chart will become difficult to decipher, particularly on smaller devices.

Types

Horizontal bar charts

These charts display horizontal bars aligned to the y-axis. The bars are used to represent discrete quantities or amounts.

Compared with column charts (see below), horizontal bar charts have more space available for their item labels, so they’re great for visualizing discrete values when data labels are long (for example, product names).

Dos

  • Use to represent measurements for discrete items.
  • Use for items that have long label names, because the y-axis labels can expand.

Don’ts

  • Don’t use to display time-based data, because time values are usually demarcated from left-to-right along the x-axis, but here the x-axis is used to show the value of each chart item.

Column charts

These charts use vertical bars to represent quantities and amounts. With their side-by-side arrangement of columns, they can be used to illustrate changes in values over time. The horizontal spacing between each column (or cluster) serves to reinforce the distinctness of each chart item or group. Please note that the y-axis baseline always starts at 0, with positive values appearing above and negative values below.

Dos

  • Use for comparing values from non-time series datasets.
  • Can be used instead of a line chart for time series data when it is either 1) more important to see the value of each item than the overall shape of the data or 2) the dataset is missing values which would create gaps in a line chart.

Don’ts

  • Don’t use with extremely large data sets, because the columns will be too narrow to accurately differentiate or easily select; use a line chart instead.
  • Don’t use when the x-axis labels become truncated; use a horizontal bar chart instead (only for non-time series datasets).

 

Stacked Column charts

The stacked column chart is an extension of the column chart, and is great for showing the total of a group as well as the different categories within the whole that make up the total. This chart works well when the focus of the chart is to compare the totals and one part, or category, of the total.

 

Single Selection

There are two selection variations for the stacked column chart. Single selection is where a single column can be selected as a whole to view the total sum along with the total of each category.

 

Series Selection

This variation allows for one category, or series, of the column to be selected and compared. App teams should select which option works best for their data set and use case.

Dos

  • Use when it is important to compare individual groups that are part of a whole.
  • Use to show how a larger category is divided into smaller categories and what the relationship of each part has on the total amount. 

Don’ts

  • Don’t use with large data sets, because the categories within the column will be too small to effectively see the patterns in the data.
  • Don’t use this chart when you can have negative values as there is no way to show negative spaces in a positive column.

Line charts

Line charts use straight lines connecting points plotted in 2-D space to represent data and trends. They are useful for showing the change in values (continuous or discrete) over time.

Dos

  • Use to display a trend in the data, because the connections between the datapoints provides an overall shape to the dataset.

Don’ts

  • Don’t use for data sets when the values along the x-axis are unrelated, because the line may imply a trend that does not exist.
  • Don’t use when the dataset is missing several values, because breaks will appear in the line; use a column chart instead.

 

Combination charts

Combination (or “combo”) charts are a combination of column and line charts. They can be used to display changes in discrete values over time compared to a measurement like a mean, target, or expected value.

Dos

  • Use when it is important to directly compare two different series that use the same measure (y-axis). A two-series column or horizontal bar chart can also be used, depending on the dataset.
  • Because combo charts rely on line charts, the dataset should either be a time series or involve the ranking of items.

Don’ts

  • Don’t use for data sets when the values along the x-axis are unrelated, because the line chart may imply a trend that does not exist.

 

Waterfall charts

A waterfall chart uses columns to visualize the cumulative effect of increases and decreases of a set of data. The height and color of the columns are determined by the values. The value will be displayed by selecting a single column. The legend of a waterfall chart will always display the corresponding colors to indicate an increase, decrease or total.

Dos

  • Use to display a sequential data set.
  • Use contrasting colors to highlight differences in values.

Don’ts

  • Do not use to compare data sets.