Graphics and Charts

Using Graphics - When and How | Using Charts - Overview | Advanced Charts | Chart vs. Table | Chart and Table Alternatively

Using Graphics - When and How

When

Use graphics instead of text when they easily and effectively convey information.
Example: A floor plan is more efficient for describing the structure of a building than a text description.
Use graphics when they need less space than equivalent textual information.
Example: The description of a procedure may be much longer than an equivalent diagram.
Use graphics for decoration or fun, but only if it is appropriate for an application. Do not decorate applications just because you think it looks nice.

How

Align graphics so that their main contents points towards the text, not away from it.
Crop graphics to the relevant section; make them as small as possible and avoid irrelevant and distracting elements.
Example: Do not show a US map if you want to illustrate data in Michigan - use a Michigan map instead.
Use high quality graphics.
Example: Do not draw graphics by yourself, involve graphic designers.
Care for the corrects format of the graphics.
Example: Use JPEG for photos, images with many colors and gradations; use GIF for diagrams, images with text and/or straight lines and images with (less than) 256 colors. Typically screen dumps work better in GIF format.

For more information on graphic iViews see Graphic iViews; for additional background information see the Recommendations for Charts and Graphics in the SAP Design Guild.

Using Charts - Overview

Chart Type	PIG	Typical Applications	Variants, Remarks
Area	Yes	Cumulated totals (numbers or percentages) over time	Percentage, Cumulative
Column/Bar	Yes	Observations over time or under different conditions; data sets must be small	Vertical (columns), horizontal (bars); multiple columns/bars, columns/bars centered at zero
Segmented Column/Bar	Yes	Proportional relationships over time	May be scaled to 100%
Frequency Polygon	No	Discrete frequency distribution
Histogram	No	Discrete frequency distribution	Columns/bars without gaps
Line, Curve	Yes	Trends, functional relations	Data point connected by lines or higher order curves
Pie	Yes	Proportional relationships at a point in time	Segments may be pulled out of the the pie for emphasis (exploded pie chart)
Scatterplot	No	Distribution of data points along one or two dimensions	One-dimensional, two-dimensional
Map	No	Typically used for geographical data; can also be used for parts of devices, human or animal bodies	Useful if an analog relation can be used for representing data

The column PIG indicates whether the respective charts types are available as Portable Interactive Graphics.
For more information on chart iViews see Chart iViews. For more information of the uses, advantages and disadvantages of different diagram types see Recommendations for Charts and Graphics in the SAP Design Guild.

Advanced Charts

Above we described basic chart types. Charts can be made even more informative if used in new ways or combinations. For example, you can combine a map with pie charts or bar charts to present the geographical distribution of certain variables.

Figure 1: A geo chart showing the distribution of two variables in Northern Germany

Note: Often these charts have to be "handcrafted" and can be used as static images only.

Chart vs. Table

Charts should be preferred to tables whenever it is important for the users to quickly and easily recognize characteristics of data. Scanning data in tables takes longer, and important data are easily overlooked in tables.

Therefore it is also important not to use chart types that are fancy, but that distort relations between data, like 3D charts. Such charts should be used with care only, and the data should be accompanied by numbers in order to avoid misinterpretations.

This is especially important if time pressure or high risk are involved.

Chart and Table Alternatively

In cases where charts help to easily grasp the essence of the data but where also exact values are needed, you may consider to provide both a chart view and a table view.

Start with the chart view and offer a button (below the chart or table) for toggling between the views:

Figure 2: The chart view

Figure 3: The alternative table view (with additional status column)

Note: Typically, status columns are arranged to the left of the table; this example deviates from this rule in order to keep the layout stable. In other cases there will be less similarity between the table view and the chart view (here a bar chart table).

top