Skip to content

Chart Header

Chart Header is a composite UI component that displays analytics information using different types of chart plot, as well as related metadata including title, timestamp, KPI summary, and trend. It is currently used inside an Object Header.

Chart Header - Tablet Chart Header - Phone
Chart Header on a Tablet Landscape mode Chart Header on a Phone

Anatomy

There are three types of chart plot available:

  • Line Chart Header
  • Column Chart Header
  • Horizontal Bar Chart Header
  • Donut Chart
  • Hundred Percent Chart
  • Scatter Chart

All types of Chart Header follow the same structure and design.

Chart Header - Line Chart Chart Header - Column Chart Chart Header - Horizontal Bar Chart
Chart Header with a Line Chart Plot Chart Header with a Column Chart Plot Chart Header with a Horizontal Bar Chart Plot
Chart Card Chart Card Chart Card
Chart Card with Donut Chart Chart Card with hundred percent Chart Chart Card with scatter Bar Chart

Line 1 consists of the title and timestamp, which are both mandatory content provided by the app. Line 2 consists of the summary value and trend label. This line is optional.

The chart plot area is composed of the horizontal legends and the chart plot. For different chart plot types there are different requirements for the data series and the numbers of data points.

Plot Type Line Chart Column Chart Horizontal Bar Chart
Single-series At most 12 data points At most 6 data points At most 3 data points
Multi-series At most 3 series with 12 data points each At most 3 data series with 6 data points each At most 3 data series with 2 data points each

Usage

Chart Headers are used to display the analytics trend of data in a visual context in addition to simple metadata, such as title, timestamp, and summary value, etc. Currently, it is embedded as the Details view inside the Object Header component.

Construction in ObjectHeader

ChartHeaderView is a custom composite view created in Fiori UI to implement the Chart Header component. To create a ChartHeaderView in an app, or more specifically in an Object Header of your app, you need to create the following XML layout, say with the name object_header_detail_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/analyticsContainer"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.sap.cloud.mobile.fiori.chartheader.ChartHeaderView
        android:id="@+id/object_header_detail_chart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="210dp"
        app:plotType="COLUMN"
        app:title="Column Chart Header Title"
        app:timestamp="1d"
        app:maxCharCountXLabel="0"
        />
</LinearLayout>

Note that the plotType, title, timestamp and maxCharCountXLabel are all properties of the ChartHeaderView, which can either be set in the XML layout file or in the code. To create a ChartHeaderView, only the following XML definition is required:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/analyticsContainer"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.sap.cloud.mobile.fiori.chartheader.ChartHeaderView
        android:id="@+id/object_header_detail_chart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="210dp"
        />
</LinearLayout>

Then, in the activity where the ObjectHeader is being created, you need to use the following code to initialize a ChartHeaderView and set it as the Details view for the ObjectHeader:

View lineChartView = View.inflate(ObjectHeaderActivity.this,
                    R.layout.object_header_detail_view, null);


/* On a phone or in portrait mode, set LayoutParams to MATCH_PARENT
on both width and height. By default they are WRAP_CONTENT. */
if(!mObjectHeader.isTabletLandscape()) {
    lineChartView.setLayoutParams(new ViewGroup.LayoutParams(-1, -1));
}

ChartHeaderView chartHeaderView = lineChartView.findViewById(R.id.object_header_detail_chart);
chartHeaderView.setSummaryLabel("$ 1000000");
chartHeaderView.setTrendLabel("+ 10% of target");
chartHeaderView.setXLabels(MyDemoData.months);
chartHeaderView.setChartPlotData(getMultipleTestData(3), MyDemoData.seriesNames);
mObjectHeader.setDetailView(lineChartView);

The preceding example creates a ChartHeaderView with the plot type of Column Chart that displays the following attributes:

  • Plot Type: COLUMN chart.
  • Title: Column Chart Header Title
  • Timestamp: 1d
  • Summary Label: $ 1000000
  • Trend Label: + 10% of target
  • Chart Data: three data series, each displaying three data points:
    • Three legend labels.
    • The first and last X labels.
    • Long X labels will be denoted with ellipses.
    • Three Y grid lines (i.e. the default value).
Chart Header - Column Chart
Chart Header with a Column Chart Plot

Fields

As shown in the preceding example, there are multiple fields with public APIs in ChartHeaderView, allowing you to supply data for different fields inside the Chart Header, customize the styles of the text views, change the plot type, and change the detailed styles inside the chart plot area. Details about the APIs can be found in the Java documentation for those APIs.

Plot Type

There are five plot types currently supported: Line chart, Column chart, Bar chart, Donut chart, and Scatter chart.

PlotType is an Enum defined in ChartHeaderView. The field can be set either in the XML layout (see preceding example) or in the code. The possible values for the types are. PlotType.LINE, PlotType.SCATTER, PlotType.COLUMN, PlotType.BAR, and PlotType.DONUT

chartHeaderView.setPlotType(ChartHeaderView.PlotType plotType.LINE);

Title and Title Text Style

The title of the Chart Header. It can be set in either XML or in the code:

chartHeaderView.setTitle("This is a new title");

You can also customize the title's style by supplying a user-defined TextAppearance style. You define the style in your style resources:

<style name="TextAppearance.Fiori.Chart.ChartHeaderView.Title" parent="TextAppearance.Fiori.Subtitle2">
     <item name="android:textSize">16sp</item>
     <item name="android:textColor">@color/white</item>
</style>

and call the following API to change it in the code:

chartHeaderView.setTitleTextAppearance(textAppearanceResId);

Timestamp and Timestamp Text Style

The timestamp of the Chart Header. Similar to the title field, both the text and the text style of this field can be altered using the following APIs:

chartHeaderView.setTimestamp("5d 23hr");
chartHeaderView.setTimestampTextAppearance(textAppearanceResId);

Summary Label and Text Style

The summary label of the Chart Header on the 2nd line. This line is optional. If you don't provide a Summary value to the Chart Header, this line will be hidden in the ChartHeaderView. The chart plot area expands to occupy more vertical space.

Chart Header with Summary Label Chart Header without Summary Label
Chart Header with Summary Label Chart Header without Summary Label

Similar to the other text fields, both the text and the text style of Summary Label can be altered using the following APIs:

chartHeaderView.setSummaryLabel("$ 100000");
chartHeaderView.setSummaryTextAppearance(textAppearanceResId);

Trend Label and Text Style

The trend label of the Chart Header on the 2nd line. This field is optional. If you don't provide a trend label, the text view will be hidden.

Chart Header with Trend Label Chart Header without Trend Label
Chart Header with Trend Label Chart Header without Trend Label

Similar to the other text fields, both the text and the text style of Trend Label can be altered using the following APIs:

chartHeaderView.setTrendLabel("5d 23hr");
chartHeaderView.setTrendTextAppearance(textAppearanceResId);

Chart Plot Data

In order to draw a plot inside the Chart Header, you need to provide the following data via the setChartPlotData() APIs:

  1. plotDataSet: a Map of data points for the chart plot.
  2. seriesNames: a List of String values for the data series names used to display as the legend labels.
  3. xLabels: a List of String values for the labels displayed along the X axis corresponding to the data points.

You can specify all three pieces of data together and call the following API:

chartHeaderView.setChartPlotData(getMultipleTestData(3), MyDemoData.seriesNames, MyDemoData.months);

Or provide only the plotDataSet and the seriesNames but set xLabels separately:

chartHeaderView.setXLabels(MyDemoData.months);
chartHeaderView.setChartPlotData(getMultipleTestData(3), MyDemoData.seriesNames);

To hide legends on the chart plot you can call the following API to omit seriesNames:

chartHeaderView.setXLabels(MyDemoData.months);
chartHeaderView.setChartPlotData(getMultipleTestData(3));

Chart Plot Styles

The following APIs allow you to customize plot styles.

Chart Label Color

You can change the color of the legend labels and X labels using chartHeaderView.setChartLabelColor.

chartHeaderView.setChartLabelColor(R.color.sap_ui_link);
![Chart Header with Custom Chart Label Color] (images/chart-header-chart-label-color.png)
Chart Header with a Custom Chart Label Color

Number of Y Grid Lines

The number of Y grid lines is set to three by default. You can set a different value by calling chartHeaderView.setYGridLines:

chartHeaderView.setYGridLines(5);

or set it in the XML layout:

<com.sap.cloud.mobile.fiori.chartheader.ChartHeaderView
        android:id="@+id/object_header_detail_chart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="210dp"
        app:yGridLines="5"
        />
Chart Header with Five Y Grid Lines
Chart Header with Five Y Grid Lines
Whether or Not to Truncate X Labels

Because Chart Header displays only the first and last X labels along the X axis, it's usually not necessary to truncate long X labels. Therefore, the maxCharCountXLabel is set to 0 by default. If you want to truncate long X labels, you can set this value to a positive integer. For example, you could set the value to 4 in the preceding example, either by setting the attribute in XML or calling the API in code:

<com.sap.cloud.mobile.fiori.chartheader.ChartHeaderView
        android:id="@+id/object_header_detail_chart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="210dp"
        app:maxCharCountXLabel="4"
        />

chartHeaderView.setMaxCharacterCountXLabel(4);

The Chart Header will display the X labels as follows:

Chart Header with Truncated X Labels
Chart Header with Truncated X Labels
Last update: October 15, 2021