Show TOC

Background documentationUsage & Type Locate this document in the navigation structure

 

The chart control displays a chart; it offers a variety of different chart types.

This graphic is explained in the accompanying text.

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 (for example, 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

Using Chart Types - Overview

The chart types are shown in the Control API description. The following table overview presents usage hints for the available chart types.

Table 1: Chart types and their applications and variants

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 centred 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 pie for emphasis (exploded pie chart).

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 the Control API description.

Related Topics

Image

Table View