Updated: May 3, 2019

Chart Types

Intro

SAP Fiori for iOS supports nine chart types: horizontal bar, column, stacked column, line, combination (column + line) charts, waterfall charts, scatter and bubble and area 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.

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.

Area Charts

Area charts depict data and trends with straight lines connecting points plotted in 2D space, and emphasize volume with color filled in the space between the lines and the axis. They can be used for highlighting changes on volume of data over time.

Dos

  • Use to display and emphasize quantitative progression over time.

Don’ts

  • Don’t use when x-axis data and y-axis data are unrelated.
  • Don’t use when there are values missing in your data set. It will cause breaks in the area chart; please 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.

 

Scatter charts

Scatter charts have a specific purpose. They allow you to show the correlation and relationship between two variables. The data visualization uses dots to represent the values obtained for two different variables, x and y, and shows how much one variable is affected by another. It is used to show trends. Additional colors of the dots allow you to add a third dimension or series to the plot.

 

Series Selection

If there are multiple series, you are able to select one series by tapping on the corresponding item in the legend. The series you have selected will be displayed as the most prominent in the plot area.

Data Point Selection

If you want to see the x and y values for one single data point variable, you can tap on a point. A vertical and horizontal guide will appear allowing you to slide your finger from point to point. Their values will be reflected in the summary section.

Dos

  • Use this chart when you need to show a correlation between two variables.

Don’ts

  • Don’t use a scatter chart if the variables do not have a direct relationship with each other.
Interactive Legend - Not available in SDK
Interactive Legend - Not available in SDK

 

Bubble charts

Bubble charts are similar to scatter charts  in that they show correlation between data but they add a third dimension which is visualized by the size of the circle. Both the scatter and bubble charts are useful when showing trends, clusters, patterns, and relationships. Additional colors of the circles allow you to add a fourth dimension or series to the plot.

 

Series Selection

When there are multiple series, you can isolate and view a single series by tapping on the series in the legend. The series you have selected will be displayed as the most prominent in the plot area.

Data Point Selection

Like the scatter chart, you have the ability to select one single data point (circle) by tapping directly on it. A vertical and horizontal guide will appear allowing you to slide your finger from point to point. Their values will be reflected in the summary section.

Dos

  • Use this chart when you need to show a correlation between the variables in your data set.
  • Size bubbles appropriately by scaling the size of the bubble by area and not diameter.

Don’ts

  • Avoid using odd shapes.
  • Avoid too many sizes in a plot as it may look chaotic.
Interactive Legend - Not available in SDK
Interactive Legend - Not available in SDK