The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.

Usage

Use the process flow if:

• You need to display document flows.
• You need to display approval flows.
• You need to display other kinds of flows with linear and/or branching paths.

Do not use the process flow if:

• You want to display the process flow header in combination with something other than the flow map. In this case, use the icon tab bar (style: process) instead.

Responsiveness

The process flow reacts to the size of the container it is put into. It has four zoom levels, with level 1 being the largest and level 4 the smallest. In containers wider than 1024 px, level 2 is chosen automatically. For containers from 600 to 1023 px, level 3 is set, and below 600 px, it is level 4. For more information, see Behavior and Interaction.

Layout

At the top of the control is a bar, with the zoom buttons on the left and the full screen toggle on the right.

Below the bar is the process flow header, which can also be used on its own if the complex visualization of nodes is not required. The header consists of multiple steps, each of which is visualized by a circled icon. Optionally, each icon can be surrounded by a circular chart to indicate the distribution of statuses per column.

The flow map lies beneath the header. The elements belonging to a certain step are vertically aligned beneath one another. Arrows point to the next (follow-up) element or multiple elements. Dotted arrows pointing to semi-transparent elements indicate planned or pending elements.

In turn, each element comprises different sections:

1. Header (mandatory) –Wraps twice before truncation.
2. Status (optional) – With semantic color and icon; can wrap once.
3. Attribute 1 (optional) – Wraps once before truncation.
4. Attribute 2 (optional) – Wraps once before truncation.

Naturally, the header information is mandatory because it is the key identifier of an object. The header should contain a brief but meaningful description and, if necessary, an ID in brackets.

Although the status is optional, an icon appears on an item without a status at the smallest zoom level. When the user zooms out completely, only the status icon remains visible on an item. Without it, the element looks broken and does not provide any information.

You also have the option of putting a filter bar on top of the process flow to filter according to certain types or attributes.

Components

The process flow consists of a filter bar (optional), a toolbar with zooming controls and a full-screen switch, the process flow header, and the flow map.

Behavior and Interaction

Navigation and Zoom

User can move the whole flow with the left mouse button held down, just like they would move a street map in a browser.

To zoom in or out, the user can either click the respective buttons on the bar on top of the flow line or use the mouse wheel. The zoom is semantic: detailed information is added or removed depending on the zoom level.

If the process flow is wider than the available space, a chevron (< or >) appears on the side where the flow extends beyond the visible area. A number also indicates how many process steps lie outside, such as < 2 or 5 >.

Level 1

Larger elements provide the most space for
textual information. However, fewer elements
fit on the screen.

Level 2 (automatic preset for screens wider than 1024 px)

The standard size provides the best combination
of content information and overview.

Level 3 (automatic preset for screen widths from 600 px to 1023 px)

Elements are reduced to header and status
information to provide a better overview for
large flows.

Level 4 (automatic preset for screens below 600 px width)

The smallest zoom level provides a maximum
overview of the flow while the information about
each element is reduced to a status icon.

The user can also expand the flow to cover the entire screen, in a similar way to the full-screen mode for charts. This is done by clicking or tapping the expand button in the toolbar: 

Clicking a node in the flow spawns a popover with additional details about this element. It also gives the user a deeper insight into the status or, in the event of an issue, a way to solve the problem. From the quick overview, the user can navigate to the element’s fact sheet.

If no additional information needs to be displayed, an action sheet can be triggered instead of the popover to allow the user to perform actions on the item.

If no further information or actions need to be displayed, a node can also be read-only.

Labels on Connections

Some use cases focus on the connections between the nodes as much as on the nodes themselves. For these cases, we provide labels that can be displayed on each connection which, in turn, provide the user with the necessary information.

If multiple paths overlap, applications need to aggregate the respective labels and show the ‘worst’ status.

When the user clicks on an aggregated label, app developers need to provide a popover showing a list of connection paths for the user to select from. The first connection is selected in the popover and in the flow, while the rest of the flow is dimmed.

In the popover, the user can now browse through the paths, while the process flow is updated accordingly.

To give the user more information, a Details button needs to be shown in the footer.

The details must be shown in the same popover, and a back button must be offered that allows the user to return to the path overview.

The footer of the details overview can contain up to two actions.

Highlight Path

The feature highlight path allows users to focus on specific nodes and their path through the process flow, for example by highlighting a search or filter result.

Example: A user searches for a specific item inside an order. The nodes containing or exclusively representing this item are highlighted, while the rest of the flow are dimmed.

Make sure to update the donut charts on top to only show data relevant to the highlighted results.

Business Focus

The business focus is a rarely used feature. It allows applications to put a visual focus on a node that is separate from (and not to be confused with) the selection or keyboard focus.

If, for example, the process flow is used next to another control (such as the timeline), the business focus can be used to highlight a node that corresponds to a selection in the other control:

1. The timeline shows an automated post “There is an invoicing problem with Item 0815 from Order 4711.”
2. The user clicks on the post (not onto a specific link).
3. The respective node in the lane Invoice is highlighted.

If you use the business focus, make sure that only one node is selected at a time.

Styles

Two visualizations are available for the nodes inside the flow: a specific visualization for documents, and one for general objects (basically everything except documents). App teams can use the FoldedCorners property to choose the type of objects that the process flow represents.

FoldedCorners = true: This style gives the node a “dog ear”, which makes it very recognizable as a document.

FoldedCorners = false (default): This setting has no specific visual style and is therefore suitable for all object types.

The property affects the entire flow; in other words, it cannot be applied solely to individual nodes. Therefore, it should only be set to true if all the nodes represent documents (or document-like objects). If some or all of the elements are better visualized with the general style, FoldedCorners should be set to false.

Aggregation

Some flows can be arranged more clearly by using aggregation. Nodes that belong to the same lane (column) can be displayed as a stack by setting the property Type to Aggregated. This means that nodes that would usually be displayed one below the other are shown as a stack of nodes.

The interaction for these stacks is identical to the regular nodes: the control provides a click event that app developers can use to show a popover with more detailed information.

The description on these stacks should be helpful to users, for example, by telling them how many nodes are in the stack. Aggregated amounts can also be shown.

The statuses in the stacks can be heterogeneous. However, it is imperative to show the ‘worst’ status(es) at the top so that users know whether they have to take action.

In the upper example on the right-hand side, the nodes under Delivery and Invoice are shown as stacks instead of individual nodes.
The lower example on the right shows the same stacks when zoomed out (level 4).

Guidelines

The process flow header is not a substitution for the icon tab bar. For more details, see the Usage section at the top of this article.

Keep the amount of information inside each node to a minimum. Reveal more information via a popover.

Although technically possible, the node titles should not be turned into links. The IsTitleClickable property should be left in its default state (“false”). Titles that the user can click or tap may lead to usability issues. Handle every action or interaction via a popover and/or navigation to a subsequent page.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.

Usage

Use the process flow if:

• You need to display document flows.
• You need to display approval flows.
• You need to display other kinds of flows with linear and/or branching paths.

Do not use the process flow if:

• You want to display the process flow header in combination with something other than the flow map. In this case, use the icon tab bar (style: process) instead.

Responsiveness

The process flow reacts to the size of the container it is put into. It has four zoom levels with level 1 being the largest and level 4 being the smallest. In containers wider than 1024 px, level 2 is automatically chosen. For containers from 600 to 1023 px, level 3 is set, and below 600 px it is level 4. For more information, see the Behavior and Interaction section below.

Layout

At the top of the control is a bar, with the zoom buttons on the left and the full screen toggle on the right.

Below the bar is the process flow header, which can also be used on its own if the complex visualization of nodes is not required. The header consists of multiple steps, each of which is visualized by a circled icon. Optionally, each icon can be surrounded by a circular chart to indicate the distribution of statuses per column.

The flow map lies beneath the header. The elements belonging to a certain step are vertically aligned beneath one another. Arrows point to the next (follow-up) element or multiple elements. Dotted arrows pointing to semi-transparent elements indicate planned or pending elements.

In turn, each element comprises different sections:

1. Header (mandatory) –Wraps twice before truncation.
2. Status (optional) – With semantic color and icon; can wrap once.
3. Attribute 1 (optional) – Wraps once before truncation.
4. Attribute 2 (optional) – Wraps once before truncation.

Naturally, the header information is mandatory because it is the key identifier of an object. The header should contain a brief but meaningful description and, if necessary, an ID in brackets.

Although the status is optional, an icon appears on an item without a status at the smallest zoom level. When the user zooms out completely, only the status icon remains visible on an item. Without it, the element looks broken and does not provide any information.

You also have the option of putting a filter bar on top of the process flow to filter according to certain types or attributes.

Components

The process flow consists of a filter bar (optional), a toolbar with zooming controls and a full-screen switch, the process flow header, and the flow map.

Behavior and Interaction

Navigation and Zoom

User can move the whole flow with the left mouse button held down, just like they would move a street map in a browser.

To zoom in or out, the user can either click the respective buttons on the bar on top of the flow line or use the mouse wheel. The zoom is semantic: detailed information is added or removed depending on the zoom level.

Level 1

Larger elements provide the most space for
textual information. However, fewer elements
fit on the screen.

Level 2 (automatic preset for screens wider than 1024 px)

The standard size provides the best mixture
between content information and overview.

Level 3 (automatic preset for screen widths from 600 px to 1023 px)

Elements are reduced to header and status
information to provide a better overview for
large flows.

Level 4 (automatic preset for screens below 600 px width)

The smallest zoom level provides a maximum
overview of the flow while the information about
each element is reduced to a status icon.

The user can also expand the flow to cover the entire screen, in a similar way to the full-screen mode for charts. This is done by clicking or tapping the expand button in the toolbar: 

Clicking a node in the flow spawns a popover with additional details about this element. It also gives the user a deeper insight into the status or, in the event of an issue, a way to solve the problem. From the quick overview, the user can navigate to the element’s fact sheet.

If no additional information needs to be displayed, an action sheet can be triggered instead of the popover to allow the user to perform actions on the item.

If no further information or actions need to be displayed, a node can also be read-only.

Highlight Path

The feature highlight path allows users to focus on specific nodes and their path through the process flow, for example by highlighting a search or filter result.

Example: A user searches for a specific item inside an order. The nodes containing or exclusively representing this item are highlighted, while the rest of the flow are dimmed.

Make sure to update the donut charts on top to only show data relevant to the highlighted results.

Business Focus

The business focus is a rarely used feature. It allows applications to put a visual focus on a node that is separate from (and not to be confused with) the selection or keyboard focus.

If, for example, the process flow is used next to another control (such as the timeline), the business focus can be used to highlight a node that corresponds to a selection in the other control:

1. The timeline shows an automated post “There is an invoicing problem with Item 0815 from Order 4711.”
2. The user clicks on the post (not onto a specific link).
3. The respective node in the lane Invoice is highlighted.

If you use the business focus, make sure that only one node is selected at a time.

Styles

Two visualizations are available for the nodes inside the flow: a specific visualization for documents, and one for general objects (basically everything except documents). App teams can use the FoldedCorners property to choose the type of objects that the process flow represents.

FoldedCorners = true: This style gives the node a “dog ear”, which makes it very recognizable as a document.

FoldedCorners = false (default): This setting has no specific visual style and is therefore suitable for all object types.

The property affects the entire flow; in other words, it cannot be applied solely to individual nodes. Therefore, it should only be set to true if all the nodes represent documents (or document-like objects). If some or all of the elements are better visualized with the general style, FoldedCorners should be set to false.

Guidelines

The process flow header is not a substitution for the icon tab bar. For more details, see the Usage section at the top of this article.

Keep the amount of information inside each node to a minimum. Reveal more information via a popover.

Although technically possible, the node titles should not be turned into links. The IsTitleClickable property should be left in its default state (“false”). Titles that the user can click or tap may lead to usability issues. Handle every action or interaction via a popover and/or navigation to a subsequent page.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.

Usage

Use the process flow if:

• You need to display document flows.
• You need to display approval flows.
• You need to display other kinds of flows with linear and/or branching paths.

Do not use the process flow if:

• You want to display the process flow header in combination with something other than the flow map. In this case, use the icon tab bar (style: process) instead.

Responsiveness

The process flow reacts to the size of the container it is put into. It has four zoom levels, with level 1 being the largest and level 4 the smallest. In containers wider than 1024 px, level 2 is chosen automatically. For containers from 600 to 1023 px, level 3 is set, and below 600 px, it is level 4. For more information, see Behavior and Interaction.

Layout

At the top of the control is a bar, with the zoom buttons on the left and the full screen toggle on the right.

Below the bar is the process flow header, which can also be used on its own if the complex visualization of nodes is not required. The header consists of multiple steps, each of which is visualized by a circled icon. Optionally, each icon can be surrounded by a circular chart to indicate the distribution of statuses per column.

The flow map lies beneath the header. The elements belonging to a certain step are vertically aligned beneath one another. Arrows point to the next (follow-up) element or multiple elements. Dotted arrows pointing to semi-transparent elements indicate planned or pending elements.

In turn, each element comprises different sections:

1. Header (mandatory) –Wraps twice before truncation.
2. Status (optional) – With semantic color and icon; can wrap once.
3. Attribute 1 (optional) – Wraps once before truncation.
4. Attribute 2 (optional) – Wraps once before truncation.

Naturally, the header information is mandatory because it is the key identifier of an object. The header should contain a brief but meaningful description and, if necessary, an ID in brackets.

Although the status is optional, an icon appears on an item without a status at the smallest zoom level. When the user zooms out completely, only the status icon remains visible on an item. Without it, the element looks broken and does not provide any information.

You also have the option of putting a filter bar on top of the process flow to filter according to certain types or attributes.

Components

The process flow consists of a filter bar (optional), a toolbar with zooming controls and a full-screen switch, the process flow header, and the flow map.

Behavior and Interaction

Navigation and Zoom

User can move the whole flow with the left mouse button held down, just like they would move a street map in a browser.

To zoom in or out, the user can either click the respective buttons on the bar on top of the flow line or use the mouse wheel. The zoom is semantic: detailed information is added or removed depending on the zoom level.

If the process flow is wider than the available space, a chevron (< or >) appears on the side where the flow extends beyond the visible area. A number also indicates how many process steps lie outside, such as < 2 or 5 >.

Level 1

Larger elements provide the most space for
textual information. However, fewer elements
fit on the screen.

Level 2 (automatic preset for screens wider than 1024 px)

The standard size provides the best combination
of content information and overview.

Level 3 (automatic preset for screen widths from 600 px to 1023 px)

Elements are reduced to header and status
information to provide a better overview for
large flows.

Level 4 (automatic preset for screens below 600 px width)

The smallest zoom level provides a maximum
overview of the flow while the information about
each element is reduced to a status icon.

The user can also expand the flow to cover the entire screen, in a similar way to the full-screen mode for charts. This is done by clicking or tapping the expand button in the toolbar: 

Clicking a node in the flow spawns a popover with additional details about this element. It also gives the user a deeper insight into the status or, in the event of an issue, a way to solve the problem. From the quick overview, the user can navigate to the element’s fact sheet.

If no additional information needs to be displayed, an action sheet can be triggered instead of the popover to allow the user to perform actions on the item.

If no further information or actions need to be displayed, a node can also be read-only.

Highlight Path

The feature highlight path allows users to focus on specific nodes and their path through the process flow, for example by highlighting a search or filter result.

Example: A user searches for a specific item inside an order. The nodes containing or exclusively representing this item are highlighted, while the rest of the flow are dimmed.

Make sure to update the donut charts on top to only show data relevant to the highlighted results.

Business Focus

The business focus is a rarely used feature. It allows applications to put a visual focus on a node that is separate from (and not to be confused with) the selection or keyboard focus.

If, for example, the process flow is used next to another control (such as the timeline), the business focus can be used to highlight a node that corresponds to a selection in the other control:

1. The timeline shows an automated post “There is an invoicing problem with Item 0815 from Order 4711.”
2. The user clicks on the post (not onto a specific link).
3. The respective node in the lane Invoice is highlighted.

If you use the business focus, make sure that only one node is selected at a time.

Styles

Two visualizations are available for the nodes inside the flow: a specific visualization for documents, and one for general objects (basically everything except documents). App teams can use the FoldedCorners property to choose the type of objects that the process flow represents.

FoldedCorners = true: This style gives the node a “dog ear”, which makes it very recognizable as a document.

FoldedCorners = false (default): This setting has no specific visual style and is therefore suitable for all object types.

The property affects the entire flow; in other words, it cannot be applied solely to individual nodes. Therefore, it should only be set to true if all the nodes represent documents (or document-like objects). If some or all of the elements are better visualized with the general style, FoldedCorners should be set to false.

Guidelines

The process flow header is not a substitution for the icon tab bar. For more details, see the Usage section at the top of this article.

Keep the amount of information inside each node to a minimum. Reveal more information via a popover.

Although technically possible, the node titles should not be turned into links. The IsTitleClickable property should be left in its default state (“false”). Titles that the user can click or tap may lead to usability issues. Handle every action or interaction via a popover and/or navigation to a subsequent page.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.

The time axis incorporates three valuable features:

1. All the complexity involved with formatting the labels – including localization – is taken care of automatically
2. The time unit labels behave responsively according to the zoom factor. As you can see below, the time unit labels in the top row change as the zoom increases, while the time unit label in the row below is only displayed once to prevent unnecessary repetition.

3. For certain chart types, the physical spacing between your data points accurately respects the time scale being displayed, as opposed to just rendering all your data points equidistantly. We can see what a difference this makes by comparing the charts below. The chart to the left uses the categorical axis and the chart to the right uses the time axis. Even though both charts were generated from exactly the same dataset; they tell completely different stories with respect to how the values have increased over time due to the high concentration of early data points.

Compatible Chart Types

A number of SAP Fiori charts can accommodate the time axis, such as the bubble chart, scatter chart, line chart, column chart, and more.

You can find the full list of charts that can accommodate the time axis in the chart types article.

Customization

Choosing Which Time Units are Displayed

By default, the time axis displays day, month, year. However, you can display different time units to suit your dataset using one of 18 recommended combinations:

• Second, minute, hour
• Second, minute, hour, day, month
• Second, minute, hour, day, month, year
• Minute, hour
• Minute, hour, day, month
• Minute, hour, day, month, year
• Day, month
• Day, month, quarter
• Day, month, year
• Week, year
• Week
• Month, year
• Month, quarter, year
• Month, quarter
• Month
• Quarter, year
• Quarter
• Year

Any other custom combinations will likely lead to undesirable results.

Define the Layout of Your Time Unit Labels

By default, your time unit labels will be displayed in one or two rows depending on the zoom factor that is applied to the time axis at any given time. You will notice below that the time unit labels are not repeated in the bottom row so there is no unnecessary repetition of time unit labels.

It is technically possible to force the labels so that they are displayed in just one row as illustrated below, although this will only work in a satisfactory way for two time unit combinations: “year, month” and “quarter, year”.

If your chart is going to be displayed in a small space, you can choose to display the first date and the last date in your dataset as illustrated below.

Formatting the Time Units

By default, the date unit labels follow SAP UI5 medium date formats which localizes the order of the time unit labels e.g. “7 Aug, 2016” (British) or “Aug 7, 2016” (American). However, three combinations will always be displayed in the same order: “year, quarter”, “year, week” and “quarter, week”. This is because these combinations are not supported by CLDR (Common Local Data Repository) localization standards.

You can use any of the other formats available in SAPUI5 such as “August”, “A” and “08”. However, due to the responsive behavior of the time axis, the zoom factor will affect the way that your time units are displayed.  Therefore, you must create and register a format for all potential permutations. For example; if you want to display ‘year, month, day’ you need to create and register separate formats for “year, month, day”, “month, day” and “year”.

Defining the Initial View

By default, the time axis will render your chart from your first data point, with a scrollbar if necessary. However, you can decide which data points (or a specific time period) is initially displayed.

Managing Null or Missing Values in a Line Chart

If there are going to be null or missing values in your dataset, you can connect the available data points, or create a clear break between them.

Resources

The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap.

Layout and Responsiveness

Behavior

Customization

Number of Segments

You can change the number of segments from two to nine. The corresponding value ranges are automatically calculated and assigned to each shade. However, you need to assign the colors to the segments yourself.

Recommended Colors  for the Sequential Palette

When you use the sequential color palette, you can also change the recommended hue illustrated above (still based on the SAP Fiori chart color palette). If you do so, follow this example for the choice of shades.

Recommended Colors for the Semantic Palette

Range

Finally, you can manually set the range for each segment. Note that for a given segment number, “segment number + 1” values are needed (example: [0,8,9,10,11,20] for five segments).

If the overall range being defined is different from the real data range, the “>” and “<” signs are displayed on the legend.

Resources

Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.

The analytic map shows regions such as continents or countries. Another term for this kind of map is a choropleth map.

In the context of a business application, the analytic map is useful for displaying quantitative or qualitative data by coloring various regions.

The analytic map is the best choice if you want to visualize region-specific values, such as for visualizing the sales revenue for different countries.

The geomap displays geographic elements like roads, cities, forests, and other details and is mostly used for navigation. In the context of a business application, a geomap is useful for displaying points of interest, area objects, or other charts over the map.

The geomap is the best choice if you have location-based data, and you want to show a road map, satellite map, or another specialist map in the background. For example, a geomap is good for visualizing the revenue of stores.

In addition to the analytic map and geomap control, the SAP UI5 map container control provides you with a toolbar on top of the map. It also enables you to switch between maps and charts, includes personalization, provides a full screen mode, and enables you to include a list panel stack for displaying content on top of the map.

Components

A map can include any of the following elements:

• Toolbar (optional)
• Navigation tools:
  • Legend (optional)
  • Navigation control (optional) and scale (optional)
• Symbols for improved visualization of use cases:
  • Spots (optional)
  • Labels (optional)
  • Circles/geocircles (optional)
  • Areas (optional)
  • Routes (optional)
  • Container (optional) – here an arbitrary SAPUI5 control or chart can be shown on a map

Toolbar

If you need a toolbar, use the SAP UI5 map container control.

Navigation Tools

Legend

A panel containing a legend is displayed and expanded by default. You can collapse, expand, hide, or move the legend anywhere on the map if necessary.

The legend can be used interactively, in which case you have to enable the legend click event, which is provided by the control.

Symbols for Improved Visualization of Use Cases

Spots

You can use spots to visualize specific locations on the map. There are five different types of spots: the default blue spot without any semantic value and the four semantic spots with icons. Adding numbers or text to a spot will replace an existing icon on the spot.

If you want to use a number with more than one digit, or text with up to five characters, you can use the relevant predefined spots that are provided. Spots are available for numbers containing up to one, three, and five digits. For text, spots are available for up to five characters (in all five colors). Use the label for numbers or text that exceed these limits. Ensure that numbers and texts on spots are not translated; if this is necessary, use labels.

Labels

You can use a label to provide more information about a symbol. The label supports multiple lines and should be equally aligned for a group of symbols; for example, use the same alignment for all labels of spots.

For routes, the position of the label adapts to the map section. In other words, the label moves on the route so you can always see it at any zoom level. If a label is not sufficient, we recommend you use a container with the appropriate SAPUI5 control.

The label is available in five different colors: the default (neutral) white label and the semantic labels. The label adapts to the number of digits, and the content of the labels is translated if necessary.

In cases where a spot is insufficient, for example, if you want to include content that needs to be translated or that exceeds five characters, you can use a label instead of a spot. The label is available in four semantic colors, with or without anchors. It can be used as a standalone without any other symbols, like spots or routes.

Circles/Geocircles

You can use circles to visualize specific, quantitative parameters, while geocircles can be used to visualize specific sizes or measures. The difference between circles and geocircles is as follows:

• Circles: Radius is given in pixels – constant screen size.
• Geocircles: Radius is given in meters – constant size in reality.

A use case for circles on a map might be to show the size of the biggest towns in a region or the revenue of a company per production location.

Routes

Routes can be displayed on maps with varying levels of detail, such as a map of the world or a local/national map depicting transport networks. For both levels of detail, app developers can adjust the following properties:

• Dot width: The default dot width for a route is zero, which results in a solid line. You can adjust the dot width to enable dotted or dashed lines, or a combination of dots and dashes.
• Route width: App developers can choose an appropriate route width. We recommend a route width of 3 px.
• Color: We recommend that you use the SAP Fiori chart colors.
• Arrow head: The route does not have an arrow head by default. You can enable an arrow head for the start and end points by changing the start or end property to 1.
• Direction indicator (only if arrow heads are enabled): The direction indicator is not set by default. If the direction of a route should always be visible, you can use the direction indicator, which displays additional arrows/triangles on the route as soon as the start or end point arrows are outside the visible area. In addition to the direction indicator, we recommend that you also use a white borderline.
• Borderline: No borderline is set by default. For accessibility reasons, we recommend that you only use a borderline to make a route more visible on the map.
• Curved route: Routes are displayed as straight by default. You can change them from straight to curved to display flight routes or bidirectional routes.

For accessibility reasons, we recommend that you use not only color, but also dot width for differentiation purposes. For example, use a solid line for planned routes and a dashed line for unplanned routes.

Container

You can use containers to display an arbitrary SAPUI5 control on the map. The map control only provides the container. The default container is transparent without a border. The app team can personalize the container (in terms of fill, border, and size) and add an arbitrary SAPUI5 control.

Behavior and Interaction

Zoom

There are four ways of performing a zoom:

• Navigation tool: use the navigation controls to zoom in and out.
• Mouse wheel: use the mouse wheel to zoom in and out.
• Gesture: on a touchscreen, use the ‘pinch and spread’ gestures.
• Keyboard: use the ‘+’ and ‘-‘ keys to zoom in and out, or use the ‘Z’ key to use the rectangular zoom.

Thumbnail Mode (Minimized Map Control)

The map control can be minimized to a thumbnail, which can be used for tiles on the SAP Fiori launchpad or for the object page. Note that the thumbnail is a full-scale VBI control. If you use data binding, the thumbnail is updated automatically.

The app development team can specify the size of the thumbnail.

In the minimized state, only the thumbnail click event is available; all other mouse, keyboard, and touch events are disabled.

Clustering

To avoid cluttered screens with too many objects on the map, you can use one of three cluster algorithms:

• Grid clustering: Visual objects are clustered based on a grid. You can have multiple grid-based clusters. The visualization object is placed in the center of the grid cell with a specified offset.
• Tree clustering: Complex clustering based on Voronoi diagrams. The clustering itself is based on the areas in the Voronoi diagram, and cluster objects are aggregated to a hierarchy over several levels of detail.
• Distance clustering: Visual objects are clustered based on the visible distance between them. Objects are aggregated to a cluster object as long as they are within a specified range from the start object. The start object of a cluster is not specifically defined; only the nearest object that does not belong to a cluster is taken. The visualization objects are placed in the center of gravity of the covered objects. Thus the actual distance between them may vary. This type of clustering is fast, but the results may not be very convincing.

The control for visualizing clusters provides cluster icons in the four semantic colors (four types). If no type or text has been set, the default neutral, gray cluster is used. App developers can personalize the icons provided as follows:

• Change color
• Change icon
• Add text
• Replace the cluster icons provided with their own

Select

You can choose different selection modes: single selection to select a single item, and rectangular or lasso selection to select multiple items. You can also use the Shift key to add items to an existing selection, and the Ctrl key to select/deselect items.

Single Selection

This is the default selection mode. You can click your mouse button to select an object, while at the same time deselecting a previously selected object.

Rectangular Selection

You can switch to rectangular-selection mode by pressing the ‘R’ key. The cursor changes and you can use your left mouse button to draw a rectangle. Each object that lies within the rectangle is considered selected. Press the ‘R’ key again to leave this selection mode and return to single-selection mode.

Lasso Selection

You can switch to lasso-selection mode by pressing the ‘A’ key. The cursor changes and you can use your left mouse button to make a lasso selection. Each object that lies within the lasso is considered selected. Press the ‘A’ key again to leave this selection mode and return to single-selection mode.

View Tooltip

For desktops, a tooltip is enabled to provide additional information about the symbol.

Keyboard Shortcuts (desktop only)

Action	Shortcut
Lasso selection	A
Rectangular selection	R
Zoom in	+
Zoom out	–
Rectangular zoom	Z
Move	← ↑ → ↓
Go to initial start position	H

Styles

Analytical Map

Colors

For general rules about using colors in charts, see Chart – Color Palettes. You can define colors programmatically for each region.

Default Colors

Water and regions have default colors. The color of water cannot be changed. The color of each region can be changed individually. Keep the default color if the region has no data.

Regions Only

Colors from Qualitative Palette

Colors from Sequential Palette

Colors from Semantic Palette

Colors for Symbols

Symbols and Regions

Map with Circles/Geocircles

If you need to display circles over a map and use sequential colors for the regions, use the sequential palette with the following colors:

Region	Circle	After
Multiple brightness of the first hue	sapUiChartPaletteSequentialHue2; Opacity: 60%	@sapUiLightestBorder

See the section on How to Use the Sequential Palette in the Chart – Color Palettes article.

Guidelines

General Guidelines

• If you want to include a toolbar and/or show additional content on a map, use the SAP UI5 map container control.
• Use the sequential color palette if there are no more than six different states. If you have more than three states, we recommend that you use the tooltip or legend in addition to the colors to provide detailed information. The reason for this is that the contrast of the colors for maps is too low to differentiate all colors at first glance. The sequential palette aims to highlight the most interesting states by using the darkest and the lightest color.
• Use the qualitative color palette if you want to visualize various states that are independent of each other, such as election areas.
• Use the semantic palette if you want to express good versus bad states, such as with revenue figures.
• If you want to display two regions with specific parameters, a combination of coloring the regions and using circles would be the best choice. Avoid overlaps by providing different aggregation levels at different zoom levels. Note that there could be problems with relating a parameter to the radius of a circle because a user will compare the area and not the radius. The area has a quadratic relation to the radius. Consequently, a smaller number looks very small and cannot be visually compared with other values.

Resources

Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.

The analytic map shows regions such as continents or countries. Another term for this kind of map is a choropleth map.

In the context of a business application, the analytic map is useful for displaying quantitative or qualitative data by coloring various regions.

The analytic map is the best choice if you want to visualize region-specific values, such as for visualizing the sales revenue for different countries.

The geomap displays geographic elements like roads, cities, forests, and other details and is mostly used for navigation. In the context of a business application, a geomap is useful for displaying points of interest, area objects, or other charts over the map.

The geomap is the best choice if you have location-based data, and you want to show a road map, satellite map, or another specialist map in the background. For example, a geomap is good for visualizing the revenue of stores.

Components

A map can include any of the following elements:

• Toolbar (optional)
• Navigation tools:
  • Legend (optional)
  • Navigation control (optional) and scale (optional)
• Symbols for improved visualization of use cases:
  • Spots (optional)
  • Labels (optional)
  • Circles/geocircles (optional)
  • Areas (optional)
  • Routes (optional)
  • Container (optional) – here an arbitrary SAPUI5 control or chart can be shown on a map

Toolbar

If you need a toolbar, use the one provided by the ChartContainer SAPUI5 control.

Navigation Tools

Legend

A panel containing a legend is displayed and expanded by default. You can also collapse, expand, hide, or move the legend anywhere on the map if necessary.

Navigation Control and Scale

Symbols for Improved Visualization of Use Cases

Spots

You can use spots to visualize specific locations on the map. There are five different types of spots: the default blue spot without any semantic value and the four semantic spots with icons. Adding numbers or text to a spot will replace an existing icon on the spot.

If you want to use a number with more than one digit, or text with up to five characters, you can use the relevant predefined spots that are provided. Spots are available for numbers containing up to one, three, and five digits. For text, spots are available for up to five characters (in all five colors). Use the label for numbers or text that exceed these limits. Ensure that numbers and texts on spots are not translated; if this is necessary, use labels.

Labels

You can use a label to provide more information about a symbol. The label supports multiple lines and should be equally aligned for a group of symbols; for example, use the same alignment for all labels of spots.

For routes, the position of the label adapts to the map section. In other words, the label moves on the route so you can always see it at any zoom level. If a label is not sufficient, we recommend you use a container with the appropriate SAPUI5 control.

The label is available in five different colors: the default (neutral) white label, and the semantic labels. The label adapts to the number of digits, and the content of the labels is translated if necessary.

Circles/Geocircles

You can use circles to visualize specific, quantitative parameters, while geocircles can be used to visualize specific sizes or measures. The difference between circles and geocircles is as follows:

• Circles: Radius is given in pixels – constant screen size.
• Geocircles: Radius is given in meters – constant size in reality.

A use case for circles on a map might be to show the size of the biggest towns in a region or the revenue of a company per production location.

Areas

Routes

You can visualize routes.

Container

You can use containers to display an arbitrary SAPUI5 control on the map. The map control only provides the container. The app team can personalize the container (in terms of fill, border, and size) and add an arbitrary SAPUI5 control.

Behavior and Interaction

Zoom

There are four ways of performing a zoom:

• Navigation tool: use the navigation controls to zoom in and out.
• Mouse wheel: use the mouse wheel to zoom in and out.
• Gesture: on a touchscreen, use the ‘pinch and spread’ gestures.
• Keyboard: use the ‘+’ and ‘-‘ keys to zoom in and out, or use the ‘Z’ key to use the rectangular zoom.

Select

You can choose different selection modes: single selection to select a single item, and rectangular selection to select multiple items. You can also use the Shift key to add items to an existing selection, and the Ctrl key to select/deselect items.

Single Selection

This is the default selection mode. You can click your mouse button to select an object, while at the same time deselecting a previously selected object.

Rectangular Selection

You can switch to rectangular-selection mode by pressing the ‘R’ key. The cursor changes and you can use your left mouse button to draw a rectangle. Each object that lies within the rectangle is considered selected. Press the ‘R’ key again to leave this selection mode and return to single-selection mode.

View Tooltip

For desktops, a tooltip is enabled to provide additional information about the symbol.

Keyboard Shortcuts (desktop only)

Action	Shortcut
Rectangular selection	R
Zoom in	+
Zoom out	–
Rectangular zoom	Z
Move	← ↑ → ↓
Go to initial start position	H

Styles

Analytical Map

Colors

For general rules about using colors in charts, see Chart – Color Palettes. You can define colors programmatically for each region.

Default Colors

Water and regions have default colors. The color of water cannot be changed. The color of each region can be changed individually. Keep the default color if the region has no data.

Regions Only

Colors from Qualitative Palette

Use colors from the qualitative palette to highlight particular regions. Use the first color of the qualitative palette. Also use colors from the qualitative palette to separate regions into distinct groups. Note that colors from the qualitative palette have no semantic value. For example, do not choose a color because it is blue or green as the hue associated to these colors may change in the future or may be customized by the customers. Start by using the first color and then the second color and so on, unless there is a good reason for not doing so. If there is no data for a region, keep the default color.

Colors from Sequential Palette

Use colors from the sequential palette to encode quantitative differences, that is, to visually represent the idea of level, progression, or graduation. If there is no data for an item, keep the default color. See the section on How to Use the Sequential Palette in the Chart – Color Palettes article.

Colors from Semantic Palette

Use colors from the semantic palette to show that data points are bad, neutral, or good. If there is no data for an item, keep the default color.

Colors for Symbols

Symbols and Regions

Map with Circles/Geocircles

If you need to display circles over a map and use sequential colors for the regions, use the sequential palette with the following colors:

Region	Circle	After
Multiple brightness of the first hue	sapUiChartPaletteSequentialHue2; Opacity: 60%	@sapUiLightestBorder

See the section on How to Use the Sequential Palette in the Chart – Color Palettes article.

Guidelines

General Guidelines

• Use the sequential color palette if there are no more than six different states. If you have more than three states, we recommend that you use the tooltip or legend in addition to the colors to provide detailed information. The reason for this is that the contrast of the colors for maps is too low to differentiate all colors at first glance. The sequential palette aims to highlight the most interesting states by using the darkest and the lightest color.
• Use the qualitative color palette if you want to visualize various states that are independent of each other, such as election areas.
• Use the semantic palette if you want to express good versus bad states, such as with revenue figures.
• If you want to display two regions with specific parameters, a combination of coloring the regions and using circles would be the best choice. Avoid overlaps by providing different aggregation levels at different zoom levels. Note that there could be problems with relating a parameter to the radius of a circle because a user will compare the area and not the radius. The area has a quadratic relation to the radius. Consequently, a smaller number looks very small and cannot be visually compared with other values.

Embedding

To place the map on a page together with other charts, use the same guidelines as for the VizFrame charts, as explained on the Chart Toolbar and Chart – Embedding articles.

Resources

Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.

The analytic map shows regions such as continents or countries. Another term for this kind of map is a choropleth map.

In the context of a business application, the analytic map is useful for displaying quantitative or qualitative data by coloring various regions.

The analytic map is the best choice if you want to visualize region-specific values, such as for visualizing the sales revenue for different countries.

The geomap displays geographic elements like roads, cities, forests, and other details and is mostly used for navigation. In the context of a business application, a geomap is useful for displaying points of interest, area objects, or other charts over the map.

The geomap is the best choice if you have location-based data, and you want to show a road map, satellite map, or another specialist map in the background. For example, a geomap is good for visualizing the revenue of stores.

Components

A map can include any of the following elements:

• Toolbar (optional)
• Navigation tools:
  • Legend (optional)
  • Navigation control (optional) and scale (optional)
• Symbols for improved visualization of use cases:
  • Spots (optional)
  • Labels (optional)
  • Circles/geocircles (optional)
  • Areas (optional)
  • Routes (optional)
  • Container (optional) – here an arbitrary SAPUI5 control or chart can be shown on a map

Toolbar

If you need a toolbar, use the one provided by the ChartContainer SAPUI5 control.

Navigation Tools

Legend

A panel containing a legend is displayed and expanded by default. You can also collapse, expand, hide, or move the legend anywhere on the map if necessary.

The legend can be used interactively, in which case you have to enable the legend click event, which is provided by the control.

Navigation Control and Scale

Symbols for Improved Visualization of Use Cases

Spots

You can use spots to visualize specific locations on the map. There are five different types of spots: the default blue spot without any semantic value and the four semantic spots with icons. Adding numbers or text to a spot will replace an existing icon on the spot.

If you want to use a number with more than one digit, or text with up to five characters, you can use the relevant predefined spots that are provided. Spots are available for numbers containing up to one, three, and five digits. For text, spots are available for up to five characters (in all five colors). Use the label for numbers or text that exceed these limits. Ensure that numbers and texts on spots are not translated; if this is necessary, use labels.

Labels

You can use a label to provide more information about a symbol. The label supports multiple lines and should be equally aligned for a group of symbols; for example, use the same alignment for all labels of spots.

For routes, the position of the label adapts to the map section. In other words, the label moves on the route so you can always see it at any zoom level. If a label is not sufficient, we recommend you use a container with the appropriate SAPUI5 control.

The label is available in five different colors: the default (neutral) white label, and the semantic labels. The label adapts to the number of digits, and the content of the labels is translated if necessary.

Circles/Geocircles

You can use circles to visualize specific, quantitative parameters, while geocircles can be used to visualize specific sizes or measures. The difference between circles and geocircles is as follows:

• Circles: Radius is given in pixels – constant screen size.
• Geocircles: Radius is given in meters – constant size in reality.

A use case for circles on a map might be to show the size of the biggest towns in a region or the revenue of a company per production location.

Areas

Routes

Routes can be displayed on maps with varying levels of detail, such as a map of the world or a local/national map depicting transport networks. For both levels of detail, app developers can adjust the following properties:

• Dot width: The default dot width for a route is zero, which results in a solid line. You can adjust the dot width to enable dotted or dashed lines, or a combination of dots and dashes.
• Route width: App developers can choose an appropriate route width. We recommend a route width of 3 px.
• Color: We recommend that you use the SAP Fiori chart colors.
• Arrow head: The route does not have an arrow head by default. You can enable an arrow head for the start and end points by changing the start or end property to 1.
• Borderline: No borderline is set by default. For accessibility reasons, we recommend that you only use a borderline when it really makes sense, such as to highlight a traffic jam on a route.
• Curved route: Routes are displayed as straight by default. You can change them from straight to curved to display flight routes or bidirectional routes.

For accessibility reasons, we recommend that you use not only color, but also dot width for differentiation purposes. For example, use a solid line for planned routes and a dashed line for unplanned routes.

Container

You can use containers to display an arbitrary SAPUI5 control on the map. The map control only provides the container. The app team can personalize the container (in terms of fill, border, and size) and add an arbitrary SAPUI5 control.

Behavior and Interaction

Zoom

There are four ways of performing a zoom:

• Navigation tool: use the navigation controls to zoom in and out.
• Mouse wheel: use the mouse wheel to zoom in and out.
• Gesture: on a touchscreen, use the ‘pinch and spread’ gestures.
• Keyboard: use the ‘+’ and ‘-‘ keys to zoom in and out, or use the ‘Z’ key to use the rectangular zoom.

Thumbnail Mode (Minimized Map Control)

The map control can be minimized to a thumbnail, which can be used for tiles on the SAP Fiori launchpad or for the object page. Note that the thumbnail is a full-scale VBI control. If you use data binding, the thumbnail is updated automatically.

The app development team can specify the size of the thumbnail.

In the minimized state, only the thumbnail click event is available; all other mouse, keyboard, and touch events are disabled.

Select

You can choose different selection modes: single selection to select a single item, and rectangular selection to select multiple items. You can also use the Shift key to add items to an existing selection, and the Ctrl key to select/deselect items.

Single Selection

This is the default selection mode. You can click your mouse button to select an object, while at the same time deselecting a previously selected object.

Rectangular Selection

You can switch to rectangular-selection mode by pressing the ‘R’ key. The cursor changes and you can use your left mouse button to draw a rectangle. Each object that lies within the rectangle is considered selected. Press the ‘R’ key again to leave this selection mode and return to single-selection mode.

View Tooltip

For desktops, a tooltip is enabled to provide additional information about the symbol.

Keyboard Shortcuts (desktop only)

Action	Shortcut
Rectangular selection	R
Zoom in	+
Zoom out	–
Rectangular zoom	Z
Move	← ↑ → ↓
Go to initial start position	H

Styles

Analytical Map

Colors

For general rules about using colors in charts, see Chart – Color Palettes. You can define colors programmatically for each region.

Default Colors

Water and regions have default colors. The color of water cannot be changed. The color of each region can be changed individually. Keep the default color if the region has no data.

Regions Only

Colors from Qualitative Palette

Use colors from the qualitative palette to highlight particular regions. Use the first color of the qualitative palette. Also use colors from the qualitative palette to separate regions into distinct groups. Note that colors from the qualitative palette have no semantic value. For example, do not choose a color because it is blue or green as the hue associated to these colors may change in the future or may be customized by the customers. Start by using the first color and then the second color and so on, unless there is a good reason for not doing so. If there is no data for a region, keep the default color.

Colors from Sequential Palette

Use colors from the sequential palette to encode quantitative differences, that is, to visually represent the idea of level, progression, or graduation. If there is no data for an item, keep the default color. See the section on How to Use the Sequential Palette in the Chart – Color Palettes article.

Colors from Semantic Palette

Use colors from the semantic palette to show that data points are bad, neutral, or good. If there is no data for an item, keep the default color.

Colors for Symbols

Symbols and Regions

Map with Circles/Geocircles

If you need to display circles over a map and use sequential colors for the regions, use the sequential palette with the following colors:

Region	Circle	After
Multiple brightness of the first hue	sapUiChartPaletteSequentialHue2; Opacity: 60%	@sapUiLightestBorder

See the section on How to Use the Sequential Palette in the Chart – Color Palettes article.

Guidelines

General Guidelines

• Use the sequential color palette if there are no more than six different states. If you have more than three states, we recommend that you use the tooltip or legend in addition to the colors to provide detailed information. The reason for this is that the contrast of the colors for maps is too low to differentiate all colors at first glance. The sequential palette aims to highlight the most interesting states by using the darkest and the lightest color.
• Use the qualitative color palette if you want to visualize various states that are independent of each other, such as election areas.
• Use the semantic palette if you want to express good versus bad states, such as with revenue figures.
• If you want to display two regions with specific parameters, a combination of coloring the regions and using circles would be the best choice. Avoid overlaps by providing different aggregation levels at different zoom levels. Note that there could be problems with relating a parameter to the radius of a circle because a user will compare the area and not the radius. The area has a quadratic relation to the radius. Consequently, a smaller number looks very small and cannot be visually compared with other values.

Embedding

To place the map on a page together with other charts, use the same guidelines as for the VizFrame charts, as explained on the Chart Toolbar and Chart – Embedding articles.

Resources

Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.

The analytic map shows regions such as continents or countries. Another term for this kind of map is a choropleth map.

In the context of a business application, the analytic map is useful for displaying quantitative or qualitative data by coloring various regions.

The analytic map is the best choice if you want to visualize region-specific values, such as for visualizing the sales revenue for different countries.

The geomap displays geographic elements like roads, cities, forests, and other details and is mostly used for navigation. In the context of a business application, a geomap is useful for displaying points of interest, area objects, or other charts over the map.

The geomap is the best choice if you have location-based data, and you want to show a road map, satellite map, or another specialist map in the background. For example, a geomap is good for visualizing the revenue of stores.

Components

A map can include any of the following elements:

• Toolbar (optional)
• Navigation tools:
  • Legend (optional)
  • Navigation control (optional) and scale (optional)
• Symbols for improved visualization of use cases:
  • Spots (optional)
  • Labels (optional)
  • Circles/geocircles (optional)
  • Areas (optional)
  • Routes (optional)
  • Container (optional) – here an arbitrary SAPUI5 control or chart can be shown on a map

Toolbar

If you need a toolbar, use the one provided by the ChartContainer SAPUI5 control.

Navigation Tools

Legend

A panel containing a legend is displayed and expanded by default. You can collapse, expand, hide, or move the legend anywhere on the map if necessary.

The legend can be used interactively, in which case you have to enable the legend click event, which is provided by the control.

Navigation Control and Scale

Symbols for Improved Visualization of Use Cases

Spots

You can use spots to visualize specific locations on the map. There are five different types of spots: the default blue spot without any semantic value and the four semantic spots with icons. Adding numbers or text to a spot will replace an existing icon on the spot.

If you want to use a number with more than one digit, or text with up to five characters, you can use the relevant predefined spots that are provided. Spots are available for numbers containing up to one, three, and five digits. For text, spots are available for up to five characters (in all five colors). Use the label for numbers or text that exceed these limits. Ensure that numbers and texts on spots are not translated; if this is necessary, use labels.

Labels

You can use a label to provide more information about a symbol. The label supports multiple lines and should be equally aligned for a group of symbols; for example, use the same alignment for all labels of spots.

For routes, the position of the label adapts to the map section. In other words, the label moves on the route so you can always see it at any zoom level. If a label is not sufficient, we recommend you use a container with the appropriate SAPUI5 control.

The label is available in five different colors: the default (neutral) white label and the semantic labels. The label adapts to the number of digits, and the content of the labels is translated if necessary.

In cases where a spot is insufficient, for example, if you want to include content that needs to be translated or that exceeds five characters, you can use a label instead of a spot. The label is available in four semantic colors, with or without anchors. It can be used as a standalone without any other symbols, like spots or routes.

Circles/Geocircles

You can use circles to visualize specific, quantitative parameters, while geocircles can be used to visualize specific sizes or measures. The difference between circles and geocircles is as follows:

• Circles: Radius is given in pixels – constant screen size.
• Geocircles: Radius is given in meters – constant size in reality.

A use case for circles on a map might be to show the size of the biggest towns in a region or the revenue of a company per production location.

Areas

Routes

Routes can be displayed on maps with varying levels of detail, such as a map of the world or a local/national map depicting transport networks. For both levels of detail, app developers can adjust the following properties:

• Dot width: The default dot width for a route is zero, which results in a solid line. You can adjust the dot width to enable dotted or dashed lines, or a combination of dots and dashes.
• Route width: App developers can choose an appropriate route width. We recommend a route width of 3 px.
• Color: We recommend that you use the SAP Fiori chart colors.
• Arrow head: The route does not have an arrow head by default. You can enable an arrow head for the start and end points by changing the start or end property to 1.
• Direction indicator (only if arrow heads are enabled): The direction indicator is not set by default. If the direction of a route should always be visible, you can use the direction indicator, which displays additional arrows/triangles on the route as soon as the start or end point arrows are outside the visible area. In addition to the direction indicator, we recommend that you also use a white borderline.
• Borderline: No borderline is set by default. For accessibility reasons, we recommend that you only use a borderline to make a route more visible on the map.
• Curved route: Routes are displayed as straight by default. You can change them from straight to curved to display flight routes or bidirectional routes.

For accessibility reasons, we recommend that you use not only color, but also dot width for differentiation purposes. For example, use a solid line for planned routes and a dashed line for unplanned routes.

Container

You can use containers to display an arbitrary SAPUI5 control on the map. The map control only provides the container. The default container is transparent without a border. The app team can personalize the container (in terms of fill, border, and size) and add an arbitrary SAPUI5 control.

Behavior and Interaction

Zoom

There are four ways of performing a zoom:

• Navigation tool: use the navigation controls to zoom in and out.
• Mouse wheel: use the mouse wheel to zoom in and out.
• Gesture: on a touchscreen, use the ‘pinch and spread’ gestures.
• Keyboard: use the ‘+’ and ‘-‘ keys to zoom in and out, or use the ‘Z’ key to use the rectangular zoom.

Thumbnail Mode (Minimized Map Control)

The map control can be minimized to a thumbnail, which can be used for tiles on the SAP Fiori launchpad or for the object page. Note that the thumbnail is a full-scale VBI control. If you use data binding, the thumbnail is updated automatically.

The app development team can specify the size of the thumbnail.

In the minimized state, only the thumbnail click event is available; all other mouse, keyboard, and touch events are disabled.

Clustering

To avoid cluttered screens with too many objects on the map, you can use one of three cluster algorithms:

• Grid clustering: Visual objects are clustered based on a grid. You can have multiple grid-based clusters. The visualization object is placed in the center of the grid cell with a specified offset.
• Tree clustering: Complex clustering based on Voronoi diagrams. The clustering itself is based on the areas in the Voronoi diagram, and cluster objects are aggregated to a hierarchy over several levels of detail.
• Distance clustering: Visual objects are clustered based on the visible distance between them. Objects are aggregated to a cluster object as long as they are within a specified range from the start object. The start object of a cluster is not specifically defined; only the nearest object that does not belong to a cluster is taken. The visualization objects are placed in the center of gravity of the covered objects. Thus the actual distance between them may vary. This type of clustering is fast, but the results may not be very convincing.

The control for visualizing clusters provides cluster icons in the four semantic colors (four types). If no type or text has been set, the default neutral, gray cluster is used. App developers can personalize the icons provided as follows:

• Change color
• Change icon
• Add text
• Replace the cluster icons provided with their own

Select

You can choose different selection modes: single selection to select a single item, and rectangular or lasso selection to select multiple items. You can also use the Shift key to add items to an existing selection, and the Ctrl key to select/deselect items.

Single Selection

This is the default selection mode. You can click your mouse button to select an object, while at the same time deselecting a previously selected object.

Rectangular Selection

You can switch to rectangular-selection mode by pressing the ‘R’ key. The cursor changes and you can use your left mouse button to draw a rectangle. Each object that lies within the rectangle is considered selected. Press the ‘R’ key again to leave this selection mode and return to single-selection mode.

Lasso Selection

You can switch to lasso-selection mode by pressing the ‘A’ key. The cursor changes and you can use your left mouse button to make a lasso selection. Each object that lies within the lasso is considered selected. Press the ‘A’ key again to leave this selection mode and return to single-selection mode.

View Tooltip

For desktops, a tooltip is enabled to provide additional information about the symbol.

Keyboard Shortcuts (desktop only)

Action	Shortcut
Lasso selection	A
Rectangular selection	R
Zoom in	+
Zoom out	–
Rectangular zoom	Z
Move	← ↑ → ↓
Go to initial start position	H

Styles

Analytical Map

Colors

For general rules about using colors in charts, see Chart – Color Palettes. You can define colors programmatically for each region.

Default Colors

Water and regions have default colors. The color of water cannot be changed. The color of each region can be changed individually. Keep the default color if the region has no data.

Regions Only

Colors from Qualitative Palette

Use colors from the qualitative palette to highlight particular regions. Use the first color of the qualitative palette. Also use colors from the qualitative palette to separate regions into distinct groups. Note that colors from the qualitative palette have no semantic value. For example, do not choose a color because it is blue or green as the hue associated to these colors may change in the future or may be customized by the customers. Start by using the first color and then the second color and so on, unless there is a good reason for not doing so. If there is no data for a region, keep the default color.

Colors from Sequential Palette

Use colors from the sequential palette to encode quantitative differences, that is, to visually represent the idea of level, progression, or graduation. If there is no data for an item, keep the default color. See the section on How to Use the Sequential Palette in the Chart – Color Palettes article.

Colors from Semantic Palette

Use colors from the semantic palette to show that data points are bad, neutral, or good. If there is no data for an item, keep the default color.

Colors for Symbols

Symbols and Regions

Map with Circles/Geocircles

If you need to display circles over a map and use sequential colors for the regions, use the sequential palette with the following colors:

Region	Circle	After
Multiple brightness of the first hue	sapUiChartPaletteSequentialHue2; Opacity: 60%	@sapUiLightestBorder

See the section on How to Use the Sequential Palette in the Chart – Color Palettes article.

Guidelines

General Guidelines

• Use the sequential color palette if there are no more than six different states. If you have more than three states, we recommend that you use the tooltip or legend in addition to the colors to provide detailed information. The reason for this is that the contrast of the colors for maps is too low to differentiate all colors at first glance. The sequential palette aims to highlight the most interesting states by using the darkest and the lightest color.
• Use the qualitative color palette if you want to visualize various states that are independent of each other, such as election areas.
• Use the semantic palette if you want to express good versus bad states, such as with revenue figures.
• If you want to display two regions with specific parameters, a combination of coloring the regions and using circles would be the best choice. Avoid overlaps by providing different aggregation levels at different zoom levels. Note that there could be problems with relating a parameter to the radius of a circle because a user will compare the area and not the radius. The area has a quadratic relation to the radius. Consequently, a smaller number looks very small and cannot be visually compared with other values.

Embedding

To place the map on a page together with other charts, use the same guidelines as for the VizFrame charts, as explained on the Chart Toolbar and Chart – Embedding articles.

Resources

All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:

• SAPUI5 number formatters
• SAPUI5 date formatters
• SAPUI5 time formatters

Numbers

• Value axis
• Plot area (value labels that are displayed close to the data points)
• Popover
• Tooltip
• Value-based legend
• Legend for the bubble size

Time

All dates and times must comply with the user’s locale setting. Dates and times can be visible in the following areas:

• Time axis
• Categorical axis (if you use standard categories for dates or times)
• Popover
• Tooltip

Developer Hint

In order to use UI5 formats in the chart, you must use the sap.viz.ui5.format.ChartFormatter. Just add the 2 lines:

• var formatterInstance = sap.viz.ui5.format.ChartFormatter.getInstance();
• sap.viz.ui5.api.env.Format.numericFormatter(formatterInstance);

The ChartFormatter comes with some predefined UI5 patterns listed in “sap.viz.ui5.format.ChartFormatter.DefaultPattern”. Therefore you can use them directly. They will be correctly localized.

Nevertheless, if you need a format pattern than is not in the list, you need to create your own pattern and register it by using registerCustomFormatter.

Resources

This article illustrates the different ways you can visualize changes of measures through time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.

Time Category and Time Axis

By convention, time is represented horizontally from left to right which means it’s best to use the horizontal axis to represent the time in chart visualizations. We recommend using the time axis which has three main advantages:

• It allows you to display dates and times in a responsive manner.
• All the complexity involved with formatting the axis labels is automatically taken care of.
• The physical spacing between the data points accurately respects the time scale, as opposed to just displaying them equidistantly.

Additional Categories

In addition to the time category, there are additional categories that contain an intrinsic order and that that carry the notion of progression or trend.

For example, age, time period, or a rating.

As such, the rest of this article also applies to these categories.

Column or Line Chart?

• Use a line chart if you want to emphasize the trend through time.
• Use a column chart if you want to emphasize the values themselves.

In the figure below, you can see that the trend of the values immediately stands out in the line chart, while we need to make an effort to visualize the trend of the values in the column chart. At the same time, the values can be compared more easily in the column chart.

One Set of Values

Illustrating the Trend

As previously stated, the line chart is the best way to illustrate a trend through time.

Sometimes it’s difficult to see the global trend when the values vary a lot. In these circumstances you can display a moving average in the same chart as illustrated below. You can see the three month moving average of the total demand of ice cream displayed as a black line. Please note that you should avoid using a straight line to represent the global trend because the inclination depends too much on the start date and end date and is therefore misleading.

Combining Trends: Actual, Plan, Budget and Target

This section describes how to visualize the trend of values while comparing them with reference values such as plan, budget or target. The bullet chart below displays actual and target values for four years.

Trend of Deviation

If you want to show how the deviation between two measures evolves through the time, please refer to the deviation article (see: time deviation).

Multiple Rates of Change

If you want to compare the rate of change of two measures over time, you can use percentages to express the rate of change and start from the initial date of the series. The chart below represents the rate of change of ice cream and the rate of change of pizza displayed in percentage from the original date.

Part to Whole 

Check out the part to whole article (see section: through time).

Resources

This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.

Scatter charts and bubble charts are the most frequently used charts to visualize a correlation, although using a line chart or bar chart side-by-side is also an acceptable solution.

Two Datasets

The scatter plot is the most efficient chart to show the correlation between two sets of numerical values. The chart below illustrates the correlation between age and income.

You can also group all the data points in ranges and display one average value per range, as illustrated below.

Few Items

When you have a small number of items, you can display the datasets in two sets of bars. This allows you to display the item name just once. Both sets of bars should be sorted by the first set or the second set to make the relationship easily visible by comparing the two shapes.

In the chart below, we can easily see that there is a direct correlation between Revenue and Margin, although ‘Servers’ is an outlier.

Three Datasets

You can use a bubble chart to show the correlation between three sets of numerical values. One set can be displayed in the horizontal axis, another set can be displayed in the vertical axis, and the third set can be represented by the size of the bubbles.

It’s difficult to precisely compare the size of bubbles. Therefore, it’s better to only use the Bubble chart when you want people to grasp a rough approximation of the values represented by the size of the bubbles.

The bubble chart below shows how the probability of the sales opportunty relates to the estimated close date and the expected revenue which is represented by the size of the bubble. In this context, the sales opportunity bubble usually begins in the bottom right quadrant, and moves to the top left quadrant of the chart over time.

Resources

This page will help you choose an appropriate chart for visualizing how values are distributed within a set.

For example: You want to visualize how the number of employees are distributed across different salary ranges, or you want to compare the distribution of salaries across different job levels.

Histogram

A histogram is used to display a number of values distributed across a series of ranges. Histograms are extremely useful for emphasizing the number of values.

The convention for a histogram is to remove the gaps between the bars or columns. However, as this chart is not yet available in SAP Fiori, you can use a classic column chart or bar chart instead.

The chart below shows how the rating of a product is distributed.

If the labels of the ranges are long compared to the width of the chart, it’s better to use horizontal bars as illustrated below. If you follow this advice, you will avoid the undesirable effects that come as a result of displaying the category labels at 45°, making them hard to read and frequently leading to truncation of text.

Frequency Polygon

If you want to emphasize the shape of the distribution more than the number of values, then use a ‘frequency polygon’ which is really just a line chart that shows the distribution of a frequency of something. The chart below shows how salaries are distributed within a company.

Multiple Distribution

You can use a frequency polygon with multiple lines if you want to compare the distribution of multiple sets of values. The chart below compares the distribution of salaries between two countries.

You can use a ‘stacked histogram’ if you want to split the distribution into multiple parts, as illustrated below.

Box Plot

The Box plot is an ideal chart if you want to display how a distribution changes over time, or you want to compare many distributions. The example below illustrates a typical box plot with the median including the lower and higher quartiles and the highest and lowest value.

Please note that the box plot is not yet available in the SAP Fiori chart library.

Resources

This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.

By Category

We recommend using a bar chart to display a list of category items sorted by value (for example, a product ranking by revenue).

In the chart below, it is easy to:

• Understand that the category items are sorted by values.
• Identify the top-ranking countries and the lowest-ranking countries.
• See that all the countries in the middle have values that are very close together.

If you’re also interested in seeing how the values are distributed among category items, you can display a reference line that indicates the median.

Bar Chart vs. Column Chart

It’s worth noting that you can use a column chart or a bar chart, but if the category is not time-based (or does not have an intrinsic order), we recommend using a bar chart. If you follow this advice, you will avoid the undesirable effects that come as a result of displaying the category labels at 45°, which as well as making them hard to read, also often leads to truncation of text. See the example below with the truncated ‘Great Britain’ label.

Within a Hierarchy

You can rank items within groups of the hierarchy.

In the example below, the countries are ranked inside their respective continents which makes it easy to compare each continent and each country within each continent.

Flat Hierarchy

When the hierarchy does not contain many items, you can flatten it and use color to identify the first level of the hierarchy.

In the chart below, you can immediately grasp which top 3 countries have the highest values and that America has the smallest values.

The chart below is used in the Cash Management app and displays the liquidity forecast by outcome and income. Displaying the outcome and income seperately helps to identify which income and outcome are the biggest.

Ranking and Parts to Whole

If you want to know which items have the biggest values and how much of these items contribute to the total of the values, you can use a Pareto chart which is designed to illustrate the well-known 80%/20% rule (that is, 20% of the items contribute to 80% of the total).

The chart below displays the number of defects by type of defect, and we can see that 80% of the defects come from the first four types of defect.

Resources

The analytical card is used for data visualization. It consist of two areas: a header area that displays the aggregated value of a key measure (KPI), and a chart area that displays a visual representation of the data. It is a single object card and does not contain a footer area. The analytical card can only be used in the overview page (OVP).

Responsiveness

The analytical card has a uniform horizontal width of either 20 or 25 rem, depending on the screen size. The vertical height is flexible. The VizFrame charts within the cards are fully responsive.

Types

There are eight chart types currently supported by the analytical card:

• Line
• Bubble
• Column
• Stacked column
• Vertical bullet
• Donut
• Combined
• Scatter plot

 

Line Chart

In general, the line chart is the most efficient chart for showing the evolution of a trend over a period of time.

• Avoid showing more than four lines in the same card.
• When showing more than one line in the chart, different units should not be displayed. All the lines should use the same unit, such as “Euro”.

Use the line chart if…

• You want to emphasize the evolution of a trend over a period of time.
• You want to visualize data that contains an intrinsic order, such as age, a range, or a rating (but excluding time). In this case, there is an idea of a progression or trend, and the best way to represent these values is to use the horizontal axis.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Do not use the line chart if…

• You want to emphasize the values themselves. Use a column chart instead.
• The data does not contain an intrinsic order.

Bubble Chart

A bubble chart displays the correlation between three sets of numerical values. One set is represented in the horizontal axis, another set is represented in the vertical axis, and the third set is encoded in the size of the bubbles.

We recommend showing only one or two series. Because series are represented by specific bubble colors, having too many series/colors can make the chart hard to read.

The sizes of the bubbles are determined by the values in the third data series. The measure that is represented by the bubble size is defined below the chart.

Color

• If the goal is to isolate outliers within a cloud of other bubbles, use the same color for all bubbles.
• If the goal is to group bubbles that have the same characteristic, use one color per group. Warning: Too many colors can make the chart hard to read.
• If the goal is to compare bubbles individually, then use one color per bubble. Only use this option if there are very few bubbles.

Use the bubble chart if…

• You need a rough approximation of the values encoded in the bubble size.
• You want to represent data with three dimensions on a 2D chart.
• You want to compare and show the relationships between labeled/categorized circles, by the use of positioning and proportions.
• You want to display the correlation between three sets of numerical values.

Do not use the bubble chart if…

• You need to represent information only with two dimensions.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Column Chart

Column charts are used to compare multiple values over time or over values containing an intrinsic order (such as age).

Columns are clustered side-by-side along the horizontal axis and are color-coded by series.

• We recommend using no more than two series and a maximum of four category items.
• If you want to show the trend over time of two series, you can use the line chart with two lines instead of two series of columns.

Use the column chart if…

• Category items represent a time series. The natural orientation for time is from left to right.
• Category items contain an intrinsic order. For example, age, range, and ranking.
• You want to emphasize the values themselves rather than the trends.

Do not use the column chart if…

• Your data is not related to a time category or to a category with an intrinsic order.
• You want the emphasis to fall on the trend. Use the line chart instead.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

For more detailed information, see column chart.

Stacked Column Chart

This type of visualization depicts items stacked on top of one other in columns, with the item categories differentiated by colored bars or strips.

This chart works only for time series and categories with an intrinsic order.

Use the stacked column chart if…

• You want to display variation of the sum of measures over a period of time.
• The sum of the values is as important as the individual items.

Do not use the stacked column chart if…

• Accuracy or comparisons are of primary importance. In this case, a line graph might be the better option.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Vertical Bullet Chart

The bullet chart is used to compare a primary value to a secondary over time or over a category containing an intrinsic order, such as age, range, or ranking.

The bullet chart supports primary values, comparison values and additional values. For more information, see bullet chart.

Use the bullet chart if…

• You want to compare a primary value to a secondary value using a reference point. For example, if you want to compare actual and planned costs per quarter.
• The category items represent a time series. The natural orientation for time is from left to right.
• The category items contain an intrinsic order.

Do not use the bullet chart if…

• Your data does not contain an intrinsic order.
• You have only one series of data.
• There is no data series that act as a reference point for the other data series.

Donut Chart

The donut chart is used for representing parts of a whole, and the whole should always represent 100%. The data is displayed in rings, where each ring represents a data series.

We recommend using a maximum of four sections in the donut chart.

Use the donut chart if…

• You want to visualize the part to whole as a percentage.

• You have one or more category items that you want to plot.

Do not use the donut chart if…

• You want to plot negative or zero values.
• You have more than four categories or sections.
• You want to compare data over time. You can use the column chart, line chart, stacked column chart, or bullet chart instead.

Combined Column and Line Chart

Combined column and line charts are used to compare two sets of values over time or over a category containing an intrinsic order, such as age, range, or ranking.

You could also use a column chart or a line chart for that, but using a combined column and line chart is the better choice if you want to clearly distinguish between the two sets of values, or if the values represent different measures, such as revenue and profit.

Use the combined column and line chart if…

• You want to compare values in different categories.

• You want to give a clear view of which category is higher or lower.

• You want to use more than one measure.

Do not use the combined column and line chart if…

• The combination data between line and column is not logical.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Scatter Plot Chart

A scatter plot chart is a type of chart that displays the correlation between two sets of numerical values. The data is displayed as a set of points plotted on a horizontal and vertical axis.

We recommend showing only one or two series. Because bubbles in a series are color-coded, having too many series/bubbles can make the chart hard to read.

Use the scatter plot chart if…

• You want to show the correlation between two sets of numerical values (for example, the correlation between age and income).

Do not use the scatter plot chart if…

• You want to show the correlation between three sets of numerical values. Use the bubble chart instead.

Behavior and Interaction

The entire header area of the card is selectable. It serves as navigation to the specific app or view from which the card content originates. If the application needs to show detailed information about a specific data point, the single selection mode can be used. It is up to the app developer to provide meaningful navigation.  For example, clicking/tapping on a section from the donut chart can navigate the user to an object page providing more information.

There are two selection modes for the charts: single selection and no selection. Clicking or tapping a blank area on the chart does not trigger any action.

Single Selection

In the single selection mode, clicking or tapping a data point selects the data point and navigates to a more detailed screen.

No Selection

In this mode, data points cannot be selected individually and therefore no actions can be triggered from a data point.

Guidelines

Number of Data Points

There is no technical limitation regarding the number of data points, but be aware that the user experience can be very degraded when there are too many data points. For example, labels in the horizontal axis will be displayed at 45⁰. In the bubble chart, too much bubbles might lead to unreadable information.

Chart Title

The chart title is always visible for each chart type. It is used to describe the axis titles within the chart. For example, Revenue by quarter conveys that the y-axis represents the revenue and x-axis represents the quarters.

Time Axis

The time axis is more responsive and shows information in much better manner compared to the category axis. Currently the time axis is supported for the line, column, stacked column, bubble and combination charts. You could use these chart types either with the category or with the time axis. We recommend using the time axis when the category items represent a time series.

The time axis has three main advantages:

• It allows you to display dates and times in a responsive manner.
• All the complexity involved with formatting the axis labels is automatically taken care of.
• The physical spacing between the data points accurately represents the time scale, as opposed to being equidistant.

Axis Title

The axis titles are always hidden, except in the bubble and scatter plot chart. Instead use the chart title of the Analytical Card to convey this information. For example, Revenue by quarter conveys that the y-axis represents the revenue and x-axis represents the quarters.

Axis Labels

Try to avoid displaying labels at 45⁰. Use abbreviations for dates, such as Jan or Feb for months, or Q1 or Q2 for quarters.

Semantic Colors Based on Values

• Use semantic coloring based on values when you want to show data points that are bad, medium or good. Based on the defined threshold values the color of each data points  could be red, green, or orange.

Legend

Colors are automatically assigned and cannot be customized.

View Switch

The view switch functionality provides the user with different views of the data in one card. It can be used for filtering, sorting, or grouping (such as by supplier or material group). The view switch is optional.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The analytical card is used for data visualization. It consist of two areas – a header area (either a standard header or a KPI header) and a chart area that displays a visual representation of the data. It is a single object card and does not contain a footer area. The analytical card can only be used in the overview page (OVP).

Responsiveness

The analytical card has a uniform horizontal width of either 20 or 25 rem, depending on the screen size. The vertical height is flexible. The VizFrame charts within the cards are fully responsive.

Header Area

There are two header types that could be used with the analytical card depending on the use case:

Types

There are eight chart types currently supported by the analytical card:

• Line
• Bubble
• Column
• Stacked column
• Vertical bullet
• Donut
• Combined
• Scatter plot

 

Line Chart

In general, the line chart is the most efficient chart for showing the evolution of a trend over a period of time.

• Avoid showing more than four lines in the same card.
• When showing more than one line in the chart, different units should not be displayed. All the lines should use the same unit, such as “Euro”.

Use the line chart if…

• You want to emphasize the evolution of a trend over a period of time.
• You want to visualize data that contains an intrinsic order, such as age, a range, or a rating (but excluding time). In this case, there is an idea of a progression or trend, and the best way to represent these values is to use the horizontal axis.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Do not use the line chart if…

• You want to emphasize the values themselves. Use a column chart instead.
• The data does not contain an intrinsic order.

Bubble Chart

A bubble chart displays the correlation between three sets of numerical values. One set is represented in the horizontal axis, another set is represented in the vertical axis, and the third set is encoded in the size of the bubbles.

We recommend showing only one or two series. Because series are represented by specific bubble colors, having too many series/colors can make the chart hard to read.

The sizes of the bubbles are determined by the values in the third data series. The measure that is represented by the bubble size is defined below the chart.

Color

• If the goal is to isolate outliers within a cloud of other bubbles, use the same color for all bubbles.
• If the goal is to group bubbles that have the same characteristic, use one color per group. Warning: Too many colors can make the chart hard to read.
• If the goal is to compare bubbles individually, then use one color per bubble. Only use this option if there are very few bubbles.

Use the bubble chart if…

• You need a rough approximation of the values encoded in the bubble size.
• You want to represent data with three dimensions on a 2D chart.
• You want to compare and show the relationships between labeled/categorized circles, by the use of positioning and proportions.
• You want to display the correlation between three sets of numerical values.

Do not use the bubble chart if…

• You need to represent information only with two dimensions.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Column Chart

Column charts are used to compare multiple values over time or over values containing an intrinsic order (such as age).

Columns are clustered side-by-side along the horizontal axis and are color-coded by series.

• We recommend using no more than two series and a maximum of four category items.
• If you want to show the trend over time of two series, you can use the line chart with two lines instead of two series of columns.

Use the column chart if…

• Category items represent a time series. The natural orientation for time is from left to right.
• Category items contain an intrinsic order. For example, age, range, and ranking.
• You want to emphasize the values themselves rather than the trends.

Do not use the column chart if…

• Your data is not related to a time category or to a category with an intrinsic order.
• You want the emphasis to fall on the trend. Use the line chart instead.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

For more detailed information, see column chart.

Stacked Column Chart

This type of visualization depicts items stacked on top of one other in columns, with the item categories differentiated by colored bars or strips.

This chart works only for time series and categories with an intrinsic order.

Use the stacked column chart if…

• You want to display variation of the sum of measures over a period of time.
• The sum of the values is as important as the individual items.

Do not use the stacked column chart if…

• Accuracy or comparisons are of primary importance. In this case, a line graph might be the better option.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Vertical Bullet Chart

The bullet chart is used to compare a primary value to a secondary over time or over a category containing an intrinsic order, such as age, range, or ranking.

The bullet chart supports primary values, comparison values and additional values. For more information, see bullet chart.

Use the bullet chart if…

• You want to compare a primary value to a secondary value using a reference point. For example, if you want to compare actual and planned costs per quarter.
• The category items represent a time series. The natural orientation for time is from left to right.
• The category items contain an intrinsic order.

Do not use the bullet chart if…

• Your data does not contain an intrinsic order.
• You have only one series of data.
• There is no data series that act as a reference point for the other data series.

Donut Chart

The donut chart is used for representing parts of a whole, and the whole should always represent 100%. The data is displayed in rings, where each ring represents a data series.

We recommend using a maximum of four sections in the donut chart.

Use the donut chart if…

• You want to visualize the part to whole as a percentage.

• You have one or more category items that you want to plot.

Do not use the donut chart if…

• You want to plot negative or zero values.
• You have more than four categories or sections.
• You want to compare data over time. You can use the column chart, line chart, stacked column chart, or bullet chart instead.

Combined Column and Line Chart

Combined column and line charts are used to compare two sets of values over time or over a category containing an intrinsic order, such as age, range, or ranking.

You could also use a column chart or a line chart for that, but using a combined column and line chart is the better choice if you want to clearly distinguish between the two sets of values, or if the values represent different measures, such as revenue and profit.

Use the combined column and line chart if…

• You want to compare values in different categories.

• You want to give a clear view of which category is higher or lower.

• You want to use more than one measure.

Do not use the combined column and line chart if…

• The combination data between line and column is not logical.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Scatter Plot Chart

A scatter plot chart is a type of chart that displays the correlation between two sets of numerical values. The data is displayed as a set of points plotted on a horizontal and vertical axis.

We recommend showing only one or two series. Because bubbles in a series are color-coded, having too many series/bubbles can make the chart hard to read.

Use the scatter plot chart if…

• You want to show the correlation between two sets of numerical values (for example, the correlation between age and income).

Do not use the scatter plot chart if…

• You want to show the correlation between three sets of numerical values. Use the bubble chart instead.

Behavior and Interaction

The entire header area of the card is selectable. It serves as navigation to the specific app or view from which the card content originates. If the application needs to show detailed information about a specific data point, the single selection mode can be used. It is up to the app developer to provide meaningful navigation.  For example, clicking/tapping on a section from the donut chart can navigate the user to an object page providing more information.

There are two selection modes for the charts: single selection and no selection. Clicking or tapping a blank area on the chart does not trigger any action.

Single Selection

In the single selection mode, clicking or tapping a data point selects the data point and navigates to a more detailed screen.

No Selection

In this mode, data points cannot be selected individually and therefore no actions can be triggered from a data point.

Guidelines

Number of Data Points

There is no technical limitation regarding the number of data points, but be aware that the user experience can be very degraded when there are too many data points. For example, labels in the horizontal axis will be displayed at 45⁰. In the bubble chart, too much bubbles might lead to unreadable information.

Chart Title

The chart title is always visible for each chart type. It is used to describe the axis titles within the chart. For example, Revenue by quarter conveys that the y-axis represents the revenue and x-axis represents the quarters.

Time Axis

The time axis is more responsive and shows information in much better manner compared to the category axis. Currently the time axis is supported for the line, column, stacked column, bubble and combination charts. You could use these chart types either with the category or with the time axis. We recommend using the time axis when the category items represent a time series.

The time axis has three main advantages:

• It allows you to display dates and times in a responsive manner.
• All the complexity involved with formatting the axis labels is automatically taken care of.
• The physical spacing between the data points accurately represents the time scale, as opposed to being equidistant.

Axis Title

The axis titles are always hidden, except in the bubble and scatter plot chart. Instead use the chart title of the Analytical Card to convey this information. For example, Revenue by quarter conveys that the y-axis represents the revenue and x-axis represents the quarters.

Axis Labels

Try to avoid displaying labels at 45⁰. Use abbreviations for dates, such as Jan or Feb for months, or Q1 or Q2 for quarters.

Semantic Patterns

The analytical card supports semantic patterns, such as dashes, dots, or hatches, in order to distinguish:

• Actual values: What values are (solid pattern).
• Projected values:What values might be (dashed line, hatched areas).

Currently, semantic patterns are supported for the following chart types: line chart, column chart, and vertical bullet chart.

Semantic Colors Based on Values

Use semantic coloring based on values when you want to show data points that are positive, neutral, or negative. Based on the defined threshold values, the color of each data point could be red, green, or orange. For more information on color use, see colors.

Legend

Colors are automatically assigned and cannot be customized.

View Switch

The view switch functionality provides the user with different views of the data in one card. It can be used for filtering, sorting, or grouping (such as by supplier or material group). The view switch is optional.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The analytical card is used for data visualization. It consist of two areas: a header area that displays the aggregated value of a key measure (KPI), and a chart area that displays a visual representation of the data. It is a single object card and does not contain a footer area. The analytical card can only be used in the overview page (OVP).

Responsiveness

The analytical card has a uniform horizontal width of either 20 or 25 rem, depending on the screen size. The vertical height is flexible. The VizFrame charts within the cards are fully responsive.

Types

There are six chart types currently supported by the analytical card:

• Line
• Bubble
• Column
• Stacked column
• Vertical bullet
• Donut

 

Line Chart

In general, the line chart is the most efficient chart for showing the evolution of a trend over a period of time.

• Avoid showing more than four lines in the same card.
• When showing more than one line in the chart, different units should not be displayed. All the lines should use the same unit, such as “Euro”.

Use the line chart if…

• You want to emphasize the evolution of a trend over a period of time.
• You want to visualize data that contains an intrinsic order, such as age, a range, or a rating (but excluding time). In this case, there is an idea of a progression or trend, and the best way to represent these values is to use the horizontal axis.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Do not use the line chart if…

• You want to emphasize the values themselves. Use a column chart instead.
• The data does not contain an intrinsic order.

Bubble Chart

A bubble chart is a type of chart that displays the correlation between three sets of numerical values. One set is represented in the horizontal axis, another set is represented in the vertical axis and the third set is encoded in the size of the bubbles.

We recommend showing only one or two series. Because series are represented by specific bubble colors, having too many series/colors can make the chart hard to read. The sizes of the bubbles are determined by the values in the third data series. The measure that is represented in the bubble size should be explained in the title.

Color

• If the goal is to isolate outliers within a cloud of other bubbles, use the same color for all bubbles.
• If the goal is to group bubbles that have the same characteristic, use one color per group. Warning: Too many colors can make the chart hard to read.
• If the goal is to compare bubbles individually, then use one color per bubble. Warning: Use only this option if there are very few bubbles. Too many bubbles can make the chart hard to read.

Use the bubble chart if…

• You need a rough approximation of the values encoded in the bubble size.
• You want to represent data with three dimensions on a 2D chart.
• You want to compare and show the relationships between labeled/categorized circles, by the use of positioning and proportions.
• You want to display the correlation between three sets of numerical values.

Do not use the bubble chart if…

• You need to represent information only with two dimensions.

Column Chart

Column charts are used to compare multiple values over time or over values containing an intrinsic order (such as age).

Columns are clustered side-by-side along the horizontal axis and are color-coded by series.

• We recommend using no more than two series and a maximum of four category items.
• If you want to show the trend over time of two series, you can use the line chart with two lines instead of two series of columns.

Use the column chart if…

• Category items represent a time series. The natural orientation for time is from left to right.
• Category items contain an intrinsic order. For example, age, range, and ranking.
• You want to emphasize the values themselves rather than the trends.

Do not use the column chart if…

• Your data is not related to a time category or to a category with an intrinsic order.
• You want to emphasize the evolution of the trend over a period of time. Use the line chart instead.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

For more detailed information, see column chart.

Stacked Column Chart

This type of visualization depicts items stacked on top of one other in columns, with the item categories differentiated by colored bars or strips.

This chart works only for time series and categories with an intrinsic order.

Use the stacked column chart if…

• You want to display variation of the sum of measures over a period of time.
• The sum of the values is as important as the individual items.

Do not use the stacked column chart if…

• Accuracy or comparisons are of primary importance. In this case, a line graph might be the better option.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Vertical Bullet Chart

The bullet chart is used to compare a primary value to a secondary over time or over a category containing an intrinsic order, such as age, range, or ranking.

The bullet chart supports primary values, comparison values and additional values. For more information, see bullet chart.

Use the bullet chart if…

• You want to compare a primary value to a secondary value using a reference point. For example, if you want to compare actual and planned costs per quarter.
• The category items represent a time series. The natural orientation for time is from left to right.
• The category items contain an intrinsic order.

Do not use the bullet chart if…

• Your data does not contain an intrinsic order.
• You have only one series of data.
• There is no data series that act as a reference point for the other data series.

Donut Chart

The donut chart is used for representing parts of a whole, and the whole should always represent 100%. The data is displayed in rings, where each ring represents a data series.

We recommend using a maximum of four sections in the donut chart.

Use the donut chart if…

• You want to visualize the part to whole as a percentage.

• You have one or more category items that you want to plot.

Do not use the donut chart if…

• You want to plot negative or zero values.
• You have more than four categories or sections.
• You want to compare data over time. You can use the column chart, line chart, stacked column chart, or bullet chart instead.

Behavior and Interaction

In the analytical card, sections of charts can be tapped or clicked in order to display additional information via navigation to a more detailed screen. It is up to the app developer to provide meaningful navigation. For example, tapping or clicking on a section of a donut chart allows the user to navigate to an object page for more information.

Selecting data points individually is the only interaction that is provided within the charts of the card. Otherwise, clicking or tapping a blank area does not trigger any action.

Guidelines

Number of Data Points

There is no technical limitation regarding the number of data points, but be aware that the user experience can be very degraded when there are too many data points. For example, labels in the horizontal axis will be displayed at 45⁰. In the bubble chart, too much bubbles might lead to unreadable information.

Axis Title

The axis titles are always hidden, except in the bubble chart. Use the title or the subtitle of the analytical card to convey this information. For example, Revenue by quarter conveys that the y-axis represents the revenue and x-axis represents the quarters.

Axis Labels

Try to avoid displaying labels at 45⁰. Use abbreviations for dates, such as Jan or Feb for months, or Q1 or Q2 for quarters.

Legend

Colors are automatically assigned and cannot be customized.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Ranking

Rank items from highest to lowest, or vice versa.
For example: Rank countries by market share.

For more information, see ranking.

Comparison

Compare values of items in a list that has no particular order.
For example: Compare revenues in a list of products, or transaction volumes in a list of banks.

For more information, see comparison.

Variation through Time

Show the variation of values though time.
For example: Show stock level through time, or expenses by month compared to budget.

For more information, see variation through time.

Part to Whole

Display contribution of individual values to the whole.
For example: Show the percentage of sales attributed to various regions.

For more information, see part to whole.

Deviation

Show the deviation, difference, or gap between two sets of values.
For example: Show the deviation between actual revenue and target revenue by product.

For more information, see deviation.

Distribution

Show distribution within a set of values.
For example: Show how exam scores are spread or grouped around the median score.

For more information, see distribution.

Correlation

Show correlation between two or three sets of values.
For example: Show how sales revenues are impacted by customer age.

For more information, see correlation.

Cumulation

Show the accumulation of successive values.
For example: Show cumulation of stock day by day, or cumulation of revenues and cost for profit and loss.

For more information, see cumulation.

Geographical Values

Use a map to show the values associated with geographical areas.
For example: Show revenues by country on a map.

For more information, see maps.

Recources

This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.

The first two sections address deviations within a non-time category. The last two sections are dedicated to time-category.

All figures that represent a deviation should include a + or – sign. They can appear in the value axis, close to the data points in the plot area, and in popovers.

Deviation Only

This section explains how to visualize the deviation (difference) between two measures, and only the deviation. The chart below shows the difference between the actual cost and budgeted cost for multiple cost centers.

Deviation in Percentage

It’s a good idea to consider whether the actual value can be given as a percentage when displaying a deviation. The chart below displays the same information as the chart above, but the deviation is expressed in percentage.

If the order is not important, you can also rank items to make the values easy to compare, as illustrated below.

Deviation and Measures

Sometimes you may want to display two measures and the variance (deviation) between them.

The best way to achieve this is by displaying two charts side-by-side: a bullet chart to display the two measures, and a bar chart to display the deviation. Placing the variance (deviation) in a separate chart makes it easy to compare the variance.

The chart below displays the variance between actual expenses and planned expenses for different cost centers and the deviation between them.

For the same reason mentioned above, you should consider displaying the deviation in percentages as illustrated below:

Time Deviation Only

This section explains how to show the deviation through time between two measures, and only the deviation. If you want to show the measures as well, please proceed to the the next section called ‘Time Deviation and Measures’.

Focus on Value

You can use a column chart when the value of the variance is more important than the trend of the variance.

Focus on Trend

Use a line chart if you want to focus on the trend of the variation, as illustrated below.

Sometimes, it’s better to see the deviation as a percentage. In these circumstances, choose one measure as the reference and express the deviation as a percentage of the reference. The chart below contains the same information as the chart above, but with the variation expressed in percentage. You can now see that the deviation in March and June were very high.

Time Deviation and Measures

If you want to display two measures and the deviation in the same visualization, you can use two charts one above the other. And, if the trend of the measures and the variation is important, or if there are many data points, you can use two line charts as illustrated below.

When the value of the variance is more important than the trend of the variance, you can use a bullet chart and a column chart side by side. The chart below displays Actual and Target through time, as well as the deviation for each time period.

Resources

This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).

Example use case: The regional sales revenue contribution shown in comparison to the total sales revenue of a company.

Bar Charts

When designers think about visualising parts of a whole, they are invariably drawn toward the trusty pie chart. However, in many cases simple bars are in fact a far better option because you can:

• Compare parts to each other.
• Display category labels and value labels associated with each part.
• Display multiple values.
• Display small values in a better way.
• Avoid having to use multiple colors and a corresponding legend.

 

 

The first chart in this example below represents the cash position by currency.

If the order of the category items is not important, you should rank the items from the biggest value to the lowest value as illustrated below. This makes it easy to compare items and see the highest values and smallest values.

Pie Charts

The pie chart (donut chart) is best used when there are only two or three slices to display, and when it’s not important to immediately have the exact value of each slice. Note that the values are ranked from the largest to the smallest to make reading and comparison easier, although you can use a different order if it’s important in the context of your application.

Pie charts are great to use if you’re primarily interested in seeing how much the largest values compare to the rest in percentage. In the chart below, a company has ten stores, but we are most interested in seeing how much percentage the three biggest stores represent. The rest of the stores have been grouped under a slice called ‘Others’. You can easily see that the first three stores represent approximatively 75-80%.

Variations through Time

If you want to show how a part to whole evolves through time, you can use a line chart, multiple bar charts, or stacked columns. Generally speaking, the line chart is the best solution where you can use one line for each part of the whole as illustrated below.

When there are a small number of time periods (between 2 and 4), you can use bar charts side by side as illustrated below. In this example, the chart represents the contribution of six product lines to the total revenue of a company over a period of four years. Because the first chart is ranked by percentage, you can easily identify when the shape of the different parts changes through time. You can see the contribution made by ‘Flat Screen TVs’ has increased over the last two years compared to the other product lines.

If there are only two parts in the whole, you can use a stacked column as illustrated below. Here the evolution of each part is immediately visible.

If there are more than two parts in the whole, the first and last values are easy to compare. However, it’s hard to grasp the evolution of parts that exist between the first and last parts. In the chart below the ‘neutral mentions’ are less important so it’s acceptable not to be able to compare them very easily, and only have a rough approximation of their evolution.

Comparison

If you want to compare the composition of a whole between few items, use bar charts side by side. The chart below illustrates the contribution that five product lines make to the total revenue of three sales regions. Note that the first sales region is ranked by percentage, which makes easy to compare the shape of each chart.

Stacked bars work well when you have only two parts. The chart below is used in the Cash Management app and displays the import status of bank statements for some banks expressed in percentages.

If there is no reason to display the items in a specific order, you can rank by one of the measures. The chart below contains the same information as the chart above, except now the banks have been ranked according to the successful import rate.

If there are more than two parts in the whole, the first and last values are easy to compare. However, it’s hard to grasp the evolution of parts that exist between the first and last parts.

The chart below displays the revenue contribution made by three sales regions of each for five product lines. In the context of the application, the ‘Asia’ sales region is less important so it’s acceptable not to be able to compare the values very easily, and only have a rough approximation of their evolution. The American sales region is also the most important, so it is displayed first in order to rank the product lines.

If you want to know which items have the biggest values and how many of these items contribute to the total of the values, you can use a Pareto chart which is designed to illustrate the well-known 80%/20% rule. That is, 20% of the items contribute to 80% of the total.

The chart below displays the number of defects by type of defect, and we can see that 80% of the defects come from the first four types of defect.

Resources

This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order.  This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.

If the items you want to compare have an intrinsic order such as dates, age, or time periods, please see the Chart – Variation through Time page.

One Set of Values

If you want to compare items based on one type of value, we recommend using a bar chart as shown in the example below.

You can make it easy to compare items by ranking them in order of the largest value to the smallest value as illustrated below, or vice versa if you wish. Learn more about ranking on the Chart – Ranking page.

Why we recommend using a bar chart instead of a column chart

It’s worth noting that you can use a column chart or a bar chart, but if you use a bar chart you will avoid the undesirable effects that come as a result of displaying the category labels at 45°, making them hard to read and frequently leading to truncation of text.

Hierarchical Categories

Multiple Sets of Values

Compare Values Individually

We recommend using a bar chart to compare values within item categories. If one of the values acts as a point of reference, please refer to the section below on comparison with a point of reference.

The chart below compares the revenues of USA and Germany for nine product lines.

As previously stated, you can make it easy to compare items by ranking them in order of the largest value to the smallest value as illustrated below, or vice versa if you wish.

In the example below, the ranking allows us to clearly see that the top three products in USA are also the top three products in Germany.

Comparing with a Reference Point

Sometimes you might want to see how close a value is to reaching or exceeding a reference point. Typical examples of reference points are target, plan and budget. A benchmark or a value from the previous year can also be considered as reference points.

The chart below compares actual and planned costs for four lines of business.

Comparing Two Entire Sets of Values

If you need to compare two entire sets of values, we recommend using two bar charts side by side. You can order the items in one of the datasets in order to better highlight the differences between the two datasets.

In the example below, we can easily see that the margin for ‘Servers’ is much higher than other product lines that have a similar revenue.

If there are many items within categories, you could also use a scatter plot or a bubble chart which are designed to illustrate correlation between datasets.

Comparing Values that have Different Units

 If the values being compared have different units, you can either convert the values to a common unit such as the percentage, or you can use multiple charts side by side.

The example below displays two sets of values, the transaction volume and the transaction amount for four banks. With this type of visualization, it’s easy to spot that Bank C is the odd one out when comparing the bars.

What Not to do: Take a look at the chart below. It contains the same information as the two charts above, but with a dual axis. It looks like the Transaction Amounts for Bank C and Bank D are bigger than their Transaction Volumes, but this is meaningless because the axes use completely different scales.

Comparing Sum of Values (Stacked Bars)

The following section illustrates how to visualize the sum of values inside and across different category items using a stacked chart. In the example below the number of ‘imported successfully’ bank accounts are stacked on top of number of ‘imported with errors’ bank accounts. However, please notice that this approach does not make it easy to compare the number of ‘Imported with Errors’.

The chart below is used in the Analyze Sentiments app which enables product managers to view sentiment information for multiple products by analyzing the number of mentions in social media broken down by how positive, neutral and negative they were. You can see how the sum of the positive, negative and neutral mentions provides a good indication of the “buzz” around each product, independently of how good or bad it was.

If you want to see which products received the most mentions overall, as well as the most positive, negative, and neutral mentions, then an ideal solution would be to split this information into four separate charts. However, you need to make sure that the four charts use the same horizontal scale.

In the example below, you can easily see that the product line ‘PDAs & Organizers’ received a lot of mentions, although a large percentage of them were actually negative.

An alternative solution would be to use a table with bars inside each column.

Two Categories

You can use bar charts placed side by side if you want to compare values across two categories, such as revenue by products and by country. You do not need to repeat the list of category items on the vertical axis. However, you must make sure that all the charts use the same horizontal scale!

Please be aware that this layout only works well:

• for a limited number of charts (between 2 and 5),
• when vertical scrolling is not required,
• on large screens.

The chart below shows the revenue of each product line for three different countries. You can easily see that the revenue for ‘computer system accessories’ is exceptional high in Asia and you can easily compare values within each business area, although you cannot easily compare values between different business areas.

Two Categories Containing Many Items

You can use a heatmap if the categories you’re comparing contain many items, and you’re just interested in showing approximate values. The heatmap is a two-dimensional representation of data where values are represented just by color. The heatmap below visualises gross sales of products items by month.

In the example below, a heatmap is used by an IT department to visualize response times in ms throughout the weekdays and working hours using semantic colors to differentiate between response times.

If you have a lot of categories, be aware that the heatmap might not render correctly on small devices. This is because all content on the screen will be resized proportionally and the category labels may by hidden due to lack of space.

Three Categories

If you want to compare three categories such as product, region and quarter, we recommend displaying multiple charts in a matrix. All you need to do is make sure the charts all use the same scale.

Be aware that this layout only works well:

• with a limited number of charts,
• on large screens

The chart below shows the percentage deviation of actual revenue versus target revenue, by country and product line, for the last four quarters. It’s immediately obvious that the first quarters have frequently fallen below target, and that ‘graphic cards’ did not perform well in all the countries.

Resources

This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.