Chart iView

Example | Use | Look | Functionality | Legend

Example: Horizontal Bar Chart Table

Figure 1: A horizontal bar chart table; for exact comparisons, the values have been added to the chart.

Use

A chart iView 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.

If more data is needed, the iView should call a related Web application (IAC) that displays the data in a larger table or diagram.

Note: For an overview of the charts types that are available in HTMLB, see Chart Types - Overview in section Layout and Framework. For more information on charts and their uses see Graphics and Charts in section iView Interaction.

For background information on charts see Recommendations for Charts and Graphics in the SAP Design Guild which discusses the use and design of charts at length.

Look

The chart should comprise the main part of the iView.

Order of Screen Elements

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.
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.
Place pushbuttons related to the whole iView in the lower left corner. If space is at a premium these buttons may reside in the same row as chart-related buttons (see Buttons for details).
- If there exists a related Web application (IAC), a button in this group should allow the users to call the application.
If there is an emphasized button, it is the leftmost button of the respective button group (chart-related or iView-related). There must not be more than one emphasized button in an iView.

Functionality

Typical functionality, which charts may offer, are:

Switch between chart view and table view
Zooming and panning

Legend

Place a legend right to the chart or below the diagram to explain used colors or symbols.

For HTMLB charts, the legend is generated automatically and can be hidden or displayed in four possible locations. However, place the legend to the right (preferable) or below the chart.

top