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.

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 and frame.

Vertically Scrolling Page

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

Layout examples:

Split-screen layout with object below the chart:

Chart embedded in a detail view

Object page or dashboard:

Chart embedded in an object page or dashboard

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

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

Chart embedded in a frame

Apps with multiple frames:

Two charts embedded in two frames

Embedding in a Page

How you embed a chart component in a vertically-scrolled page depends on its scrolling direction. Embedding a chart that scrolls horizontally is different from embedding one that scrolls vertically.

Horizontally Scrolling Charts

Charts that scroll horizontally are charts that might contain a horizontal scrollbar when the width of the chart cannot display the entire set of values. Typical examples are the line chart or column chart.

When a chart that scrolls horizontally is embedded in a page, the height of the chart component must be defined by the app developer and remains fixed, even when the height of the page changes. That means we can have together the vertical scrollbar of the page and the horizontal scrollbar of the chart control.

Height of a horizontally scrolled chart

Vertically Scrolling Charts

Charts that scroll vertically are charts that might have a vertical scrollbar when the height of the chart cannot display the entire set of values. Typical examples are bar chart or stacked bars.

When a chart that scrolls vertically is embedded in a page, avoid having together the vertical scrollbar of the page and the vertical scrollbar of the chart control. A good way to avoid the vertical scrollbar within the chart is to choose a height for the chart component relatively big to see all data points or to set a specific zoom in order to see all data point (use window.start and window.end properties).

Height of a vertically scrolled chart

Charts Scrolling in Both Directions

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

Embedding in a Frame

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 scrollbars as necessary and displays the appropriate data point correctly.

Charts embedded in a frame

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

Chart (guidelines)
Size of the Chart Container (guidelines)

Implementation

Chart Container (SAPUI5 samples)
FixFlex (SAPUI5 samples)