FusionGPS: Design Patterns: Information Display Pattern Set: Graph Pattern Set: Percentage Graphs

Percentage Graphs

Version 2.0.0.0

Graph Pattern Set


Description

Percentage graphs make it easy to compare the percentages of values in a quantitative data dimension that are associated with one or more categorical or aggregate data dimensions. A percentage graph should not be used to show both positive and negative percentages. If multiple graphs are being considered, see the Guidelines for Using Multiple Graphs.


Pattern Set Decision Table

Try this interactive tool to help you choose the right Information Display pattern:

	Single-Quantity Graphs	Category Graphs	Percentage Graphs	Total Graphs	Multiquantity Graphs
Task: What data do you need to show or compare?	Single quantities with optional thresholds	Categories associated with simple quantities	Categories associated with percentages	Categories associated with totals	Relationships between quantitative dimensions


Pattern Samples

	Pie	Multiple Pie	Percent Stacked Bar	Percent Stacked Area
What is the user type?	casual	experienced	experienced	experienced
Do you need to emphasize the fact that percentages are represented?	yes	yes	no	no
Do you need to show a single categorical or aggregate data dimension?	yes	no	no	no
Do you need to show multiple categorical or aggregate data dimensions?	no	yes	yes	yes
Do you need to allow accurate comparisons between values in one categorical or aggregate dimension across a second categorical or aggregate dimension?	no	no	yes	yes
Do you need to show percentages that are associated with a sequential data dimension?	no	no	no	yes
Do you need to emphasize trends in percentage values?	no	no	no	yes

Note that key concepts such as "categorical data dimension" and "aggregate data dimension" are defined on the main Graph Type Pattern Set page.

Pie

A pie graph is the simplest and most common percentage graph.

A pie graph represents a total quantity for a quantitative data dimension. The slices represent the values in the quantitative data dimension, as well as categories in an associated categorical or aggregate dimension. Each colored slice represents a different category. The area of each slice represents the associated quantity as a percentage of the total.

Pie graphs are better than other percentage graphs for indicating that the displayed quantities are indeed percentages. Because the circular shape of a pie graph indicates a complete or total quantity, the slices are naturally interpreted as percentages of the total. For this reason, however, the values that appear in a pie graph must add to 100 percent.

Pie graphs are effective for making relative comparisons between percentage values, such as identifying the categories with the largest and smallest percentage.

Pie graphs are not effective for making accurate comparisons between percentage values, such as determining precisely how much bigger one percentage is than another.

Figure 1. Pie graph

Multiple Pie

Multiple-pie graphs represent totals of a quantitative dimension that is associated with two categorical or aggregate dimensions. Just like a regular pie graph, each colored slice represents a category, and the area of each slice represents the associated quantity as a percentage of the total.

In the above example, the pies represent the total value of different investment portfolios. The different types of portfolios can be considered to be different values in a categorical dimension. Colored slices within each pie represent the different categories of investments (a second categorical dimension). The areas of the colored slices represent the total percentage for each investment category. Color is used consistently to indicate the associated category. In this way, comparing the areas of slices with the same colors is equivalent to comparing percentages of quantities associated with the same category. It is easy to appreciate that conservative portfolios have more assets in cash than the other investment strategies, while aggressive portfolios have more assets in stock.

As with regular pie graphs, multiple-pie graphs are not recommended for making accurate comparisons between percentage values, such as determining precisely how much bigger one percentage is than another.

Multiple-pie graphs also take up a lot of space; a percent stacked bar graph is usually more space efficient.

Figure 2. Multiple-pie graph

Required Screen Elements
Component Type	Required Components	Customizable or Extendable Components
Graph	Graph type for this pattern is pie and subtype is multiple-pie graph.	NA

Percent Stacked Bar

Percent stacked bar graphs show the same type of data as multiple-pie graphs: each bar represents the totals of a quantitative dimension that is associated with two categorical or aggregate dimensions. Each colored segment represents a category, and the height of each segment represents the associated quantity as a percentage of the total.

Percent stacked bar graphs are a bit more effective than multiple-pie graphs for making accurate comparisons about the relative values of the category percentages, especially for the category positioned at the bottom of each bar. In the previous example, it is clear that the moderate portfolio has more than twice the percentage of stock than the conservative portfolio. It is harder, however, to make comparisons about the categories that are not positioned at the bottom of each bar. For example, does the conservative portfolio recommend twice the number of bonds as the aggressive portfolio?

Percent stacked bars usually take up much less screen space than multiple-pie graphs.

However, because of their visual similarity to regular stacked bar graphs, it may not be completely clear that the values being shown are indeed percentages of a total, especially for novice users. For novice users, a multiple-pie graph may be preferred.

Figure 3. Stacked bar graph

Required Screen Elements
Component Type	Required Components	Customizable or Extendable Components
Graph	Graph type for this pattern is bar and subtype is vertical percent.	NA

Percent Stacked Area

Percent stacked area graphs are used to show percentages that are associated with a sequential data dimension.

Percent stacked area graphs may be used to show the same sorts of data as multiple pie graphs and percent stacked bar graphs, but only if the data dimension shown on the horizontal axis is sequential. In the previous example, the categories, conservative, moderate, and aggressive, are really representative samples taken along a sequential range of investment strategies. While the multiple-pie graph and percent stacked bar graph emphasize only the three categories, the percent stacked area graph indicates that many more strategies are possible.

The percent stacked line graph is a variation of the percent stacked area graph, which may be useful for printing because it uses less ink, but is otherwise not recommended due to its visual similarity to and possible confusion with the regular lne graph.

Figure 4. Percent stacked line graph

Required Screen Elements
Component Type	Required Components	Customizable or Extendable Components
Graph	Graph type for this pattern is area and subtype is vertical percent area.	NA


Related Guidelines

Graph	This guideline describes the features of ADF Graph component.
Analytics and Reporting FAQ	The guideline talks about different types of analytics, analytic technologies available, and their usage in applications.
Analytic Display Guidelines	Designers and developers placing analytics on the page must make a number of decisions including graph size, titles, styles, and so on. This document provides tips and specific recommendations to help you make the right choices.

About Oracle | Legal Notices | Terms of Use | Your Privacy Rights