Intro

SAP Fiori for Android currently supports four chart types: line chart, column chart, stacked column chart, and horizontal bar chart. More chart types will be released in the future. Each chart type visualizes data differently and emphasizes on different aspect of the data. App team should choose a chart type based on the data type and purpose of the chart to best fulfill users’ needs.

Line Chart

The line chart represents data points using dots connected by lines to shows peaks and falls of the data set. This chart type is useful for showing changes in values (continuous or discrete) over time. We support up to four series of data on one chart.

Do’s

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

Don’ts

  • Don’t use when the dataset is missing several values, because breaks will appear in the line; use a column chart instead.

Behavior & Interactions

The line chart allows user to select a single point or a range of points by tapping and dragging.


Single-selection

When the user selects an item in the chart plot, the ruler appears to indicate the selections’ position on the x-axis. To reposition ruler, the user drags accordingly to move to another point.




Multi-selection

Users can select a data range by tapping and holding with one finger and subsequently tapping another point on the chart plot. Users can also perform this interaction by tapping on the chart plot with both fingers at the same time. While holding the position, users can adjust the data range by sliding their fingers across the chart plot. Doing so, the data will update on the summary section in response to the user’s input.


Column Chart

Column charts use vertical bars to display discrete data. The height of each bar represents the value of that data point based on the scale of y-axis. With their side-by-side arrangement of columns, column chart can be used to compare values across categories and show changes over time. We support up to four series of data on one chart.

Do’s

  • Use column chart for comparing non-time series data.
  • Can be used instead of line chart for time series data when it is either 1) more important to see individual data points than the overall trend or 2) the data set has missing values which would create gaps and make a line chart less effective.
  • Use abbreviations of x-axis labels when possible. Due to limited screen space, x-axis labels may be truncated. To make the chart meaningful for users, please choose short labels that could differentiate each data set.

Don’ts

  • Don’t use column chart to visualize extremely large data sets, users may get lost in scrolling. Filter down the data to a reasonable range that users can analyze in a column chart or use line chart instead if the purpose is to show the overall shape of data.

Behavior & Interactions


Single Selection

User can tap on a column (or a cluster of columns for multi-series) to view the exact value of selected data point(s) in the summary section. All other columns will fade out when one data set is selected. Tap on the selected data set again to deselect.




Horizontal Scroll

Due to the limited screen size of mobile devices, we limit the number of columns displayed on one screen, so the text labels and columns are legible.


On mobile devices, the limit for one-series data is 12 columns. For more than 12 data points, the first 12.5 columns will be shown, and user can scroll horizontally to see the rest of data points. A gradient at the end of chart plot area indicates users can scroll to see more columns.

For multi-series data set on mobile, the limit is 6 clusters of columns. The horizontal scroll starts at the middle of the seventh data point. The limit doubles on tablet devices (24 for one-series, 12 for multi-series).

Stacked Column Chart

A Stacked column chart is best used for part-to-whole comparisons over time or across categories. Similar to a column chart, stacked column chart uses the height of each bar to represent the value of each data point. But instead of the side-by-side arrangement, it stacks data series on top of each other to form one column.

Types

There are two types of stacked column chart:

Regular stacked column chart

A regular stacked column chart displays the numeric value of each data point. Thus, the height of the column represents the whole of this group or category. The columns usually vary in heights, representing the trend of the whole. A regular stacked column chart supports both positive and negative data.

100% stacked column chart

In the 100% stacked column chart, the height of individual bar represents the percentage of that data point in relation to the whole instead of the actual value. Thus, the total height of each column will always be 100%. It is best used to show how proportions change over time or across categories, such as population distribution across countries. A 100% stacked column chart can not be used to present negative data.

Behavior & Interactions

Both regular stacked column chart and 100% stacked column chart have the following two behavior and interactions.


Selection

Users can tap on a column to view the exact value of selected data points in the summary section. All other columns will fade out when one data set is selected. Tapping on the selected data set again will deselect it. For regular stacked column chart, we recommend showing the “Total” in the summary area in addition to individual values when applicable.




Horizontal Scroll

Stacked column chart follows the same column width definition as one-series column chart. On mobile devices, up to 12 columns can fit on one screen. For more than 12 data points, the first 12.5 columns will be shown, and the user can scroll horizontally to see the rest of data points. A gradient at the end of chart plot area indicates users can horizontally scroll to see more columns. On tablet, up to 24 columns can be displayed without scroll and the cut-off point is 24.5 columns for horizontal scroll.


Horizontal Bar Chart

Horizontal bar chart uses horizontal bars to express the value of a variable. Much like the column chart, horizontal bar chart’s bar length represents the value of the data point based on the scale of x-axis. Horizontal bar chart can be sorted from greatest to least greatest and vice versa. Up to four series of data are supported.

Do’s

  • Do use to compare the differences between nominal variables and to sort data in a way that is meaningful for the user.

  • Do use as an alternative for sequential data whose y-axis label width is too long for column chart.

  • Do make sure that the chart plat remains above the fold to prevent the suer from vertically scrolling to see the x-axis.

Don’t

  • Don’t use for negative values in horizontal bar chart. Column chart is better suited for that.

Behavior & Interactions


Single Selection

User can tap on a horizontal bar to view the exact value of the selected data point in the summary section. All other bars will fade when one data set is selected. Tap on the selected data set again to deselect.




Vertical Scroll

Due to the limited screen size of mobile devices, users can vertically scroll to reveal the horizontal bars found below the chart plot fold.




Label Expansion

Labels can take up a majority of the screen real estate however if the y-label is at its maximum, users can tap on the y-axis labels to further expand and reveal the entirety of the labels.