Chart
Usage | Types | Design-relevant Attributes | Related Controls
|
The chart control displays a chart; it offers a variety of different chart types. |
| Figure 1: A stacked bar chart as an example of a chart control | |
Usage
A chart displays data that are relevant for the user in a graphical representation so that the characteristics of the data and their relations are easy to capture for the user.
In cases where it is important for users to know the exact values behind the data, an alternate view may present the data in a table as numbers or texts. A button should allow users to toggle between the diagram and the table view.
Note: For thorough information on charts and their uses see Recommendations for Charts and Graphics in the SAP Design Guild.
Positioning
A chart can be presented in an iView; in this case, it should comprise the main part of the iView. A chart can be combined with other screen elements to allow for interaction with the chart.
Legend
A legend explains the colors used in a chart. For the chart control the legend is generated automatically. It can be placed to the right (preferable) or below the graph; other positions are also possible, but should not be used. The position of the legend is set by the attribute legendPosition using the values EAST, NORTH, SOUTH, WEST, or NONE for no legend.
Order of Screen Elements
If there are further interaction elements, obey the following order:
- A filter of shuffler can be placed above the chart, if data can be selected from several sets or if the amount of data has to be reduced.
- Then follows the chart.
- Place legends or other text right to the image or below it, depending on the format of the chart (see above)
- Place pushbuttons for chart-related functionality and status information (e.g. zoom factor) below the chart and left align them.
- If there exists an alternative table view, a button below the table allows to toggle between diagram and table view.
Functionality
Typical functionality, which charts may offer, are:
- Switch between chart view and table view
- Zooming and panning (nor available for the chart control)
- Drill-down
Types
Charts are available in a number of types. These are selected using the attribute chartType. Below you find an overview of the available chart types and the respective values for attribute chartType.
|
Area chart (chartType = AREA) |
3D Area chart (chartType = AREA_3D) |
|
Stacked area chart (chartType = AREA_STACKED) |
Stacked 3D area chart (chartType = AREA_STACKED_3D) |
|
Bar chart (chartType = BARS) |
3D bar chart (chartType = BARS_3D) |
|
Stacked bar chart (chartType = BARS_STACKED) |
Stacked 3D bar chart (chartType = BARS_STACKED_3D) |
|
Column chart (chartType = COLUMNS) |
3D column chart (chartType = COLUMNS_3D) |
|
Stacked column chart (chartType = COLUMNS_STACKED) |
Stacked 3D column chart (chartType = COLUMNS_STACKED_3D) |
|
Line chart (chartType = LINES) |
3D line chart (chartType = LINES_3D) |
|
Pie chart (chartType = PIE) |
3D pie chart (chartType = PIE_3D) |
|
Extruded pie chart (chartType = PIE_EX) |
Extruded 3D pie chart (chartType = PIE_EX_3D) |
|
Split pie chart (chartType = PIE_SPLIT) |
Bitmap chart (chartType = BITMAP) - arbitrary bitmap |
|
Pyramid chart (chartType = PYRAMID) |
Trend chart (chartType = TREND) |
Figure 2: Overview of the available chart types
Using Chart Types - Overview
The following table overview presents usage hints for the available chart types.
|
Chart Type |
Typical Applications |
Variants, Remarks |
|
Area |
Cumulated totals (numbers or percentages) over time |
Percentage, Cumulative |
|
Column/Bar |
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 |
Proportional relationships over time |
May be scaled to 100% |
|
Line, Curve |
Trends, functional relations |
Data point connected by lines or higher order curves |
|
Pie |
Proportional relationships at a point in time |
Segments may be pulled out of the the pie for emphasis (exploded pie chart) |
Table 1: Chart types and their applications and variants
Note that there are chart types that may better fit the intended purpose than the available ones. For more information, consult Recommendations for Charts and Graphics in the SAP Design Guild.
Design-relevant Attributes
Look and behavior of the chart control can be controlled by a number of attributes:
- Position and Visibility of Legend: Attribute legendPosition allows to hide or show and position the legend (values NONE, EAST, NORTH, SOUTH, WEST).
- Color Order: Use attribute colorOrder to control the sequence of colors (values are DEFAULT, STRAIGHT, REVERSE, and SNAKE).
- Height and Width: Attributes height and width allow to set the size of the chart.
- Display of Values and Titles: A number of attributes is at your disposal to control the look and position of labels for values and categories. For more information see page Control API for Chart.
For detailed information on attributes see page Control API for Chart.
Related Controls