Updated: September 25, 2017

Chart – Embedding

Intro

This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.

Developer Hint
The ChartContainer toolbar and FixFlex SAPUI5 control help you support these guidelines. See the “Resources” section at the end of this page.

Vertically-Scrolled Page vs. Frame

The optimal way to embed a chart component in an app depends on the layout pattern of the app. Embedding a chart component in a split-screen layout is different from embedding one in a full screen layout.

Two main layout patterns must be considered:

Vertically-Scrolled Page

In this layout pattern, the page scrolls vertically. If the page content cannot be seen in full, a vertical scroll bar appears.

Layout examples:

Split-screen layout with object below the chart:

Chart embedded in a detail view
Chart embedded in a detail view

Object page or dashboard:

Chart embedded in an object page or dashboard
Chart embedded in an object page or dashboard

Full-width page:

Chart embedded in a full-width page
Chart embedded in a full-width page

Frame

In this layout pattern, the page contains multiple frames and does not scroll horizontally or vertically. If the page content cannot be seen in full, the frames are resized so that they remain visible. Some frames may remain with a fixed size, while other frames are resized. When a chart is embedded in a frame, the frame is generally resized.

Layout examples:

Split-screen layout with the chart as the last object in the detail view:

Chart embedded in a detail view
Chart embedded in a detail view

SAP Smart Business apps, full-screen app, analysis floorplan, list report floorplan:

Chart embedded in a frame
Chart embedded in a frame

Apps with multiple frames:

Two charts embedded in two frames
Two charts embedded in two frames

Scrolling Direction of the Chart

How you embed a chart component in an app also depends on its scrolling direction. Embedding a chart that scrolls horizontally is different from embedding one that scrolls vertically.

For more information, see the article on the scrolling direction of charts.

Horizontally-Scrolled Chart

The height of the chart component is defined by the app developer and remains fixed, even when the height of the page changes.

Height of a horizontally scrolled chart
Height of a horizontally scrolled chart

Vertically-Scrolled Chart

The height of the chart component is defined by the app developer and remains fixed, even when the height of the page changes.

Height of a vertically scrolled chart
Height of a vertically scrolled chart

As a design principle, you should avoid having two vertical scroll bars on the same page. To do so, try one of the following:

  • Define the correct zoom setting to display the entire set of data.
  • Make the chart non-zoomable, but ensure that the chart component is big enough to avoid having a vertical scroll bar inside it. The height of the chart component must be calculated so that its entire content can be seen without a scroll bar.

When the scroll bar of the page appears, the chart toolbar could disappear when scrolling. For that reason, this layout should be applied only for a small amount of data. For a large amount of data, it is better to embed the chart in a frame.

Embedding in Frames

In this layout pattern, the screen contains multiple frames and does not scroll horizontally or vertically. The scrolling is instead managed by each of the frames. When the chart component is embedded in a frame, it is resized to occupy the full height and width of the frame.

The chart component manages the scroll bars as necessary and displays the appropriate data point correctly.

Charts embedded in a frame
Charts embedded in a frame

When the chart is reduced to its minimum height, it is no longer resized. This is likely to happen on small screens.

Chart embedded in a frame with minimum height
Chart embedded in a frame with minimum height
Developer Hint
Use the property fixFlex:minFlexSize to set a minimum height for the flexible part of the layout.

Bidirectional Scrolled Chart

Charts that have no main scrolling direction should be managed on a case-by-case basis.

Resources

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

Elements and Controls

Implementation