Skip to content

Chart Cards

Chart Cards is a composite UI component that displays a list of CardViews, each of which contains a chart plot as well as related metadata.

Overview

There are two supported card modes: base card and scrollable card. App developers need to decide which mode is appropriate for their app based on these characteristics:

  • Base card (default mode): Orders cards vertically, stacked on top of each other.
  • Scrollable card: Places a horizontally scrollable collection view within an app screen.

Base Cards

Depending on the screen size of the device, chart cards displays all the cards vertically in one, two, or three columns.

Chart Card Chart Card
Base Card on a Small Device Base Card on a Medium Device
Chart Card
Base Card on a Large Device

Scrollable Cards

Depending on the screen size of the device, chart cards displays one, two, or three cards in a horizontal collection view. Swiping on the cards from left to right will scroll the cards to the left. There is always a full card aligned to the left edge at the end of a scroll, unless it's towards the end of the entire collection. For locales in right-to-left (RTL) mode, the effect is occurs in the opposite direction.

Chart Card Chart Card
Base Card on a Small Device Base Card on a Medium-sized Device
Chart Card
Base Card on a Large Device

Chart Type

The chart card uses the same framework for the different types of analytic charting. There are three basic analytic types supported by the SDK: line chart, column chart and horizontal bar chart.

Chart Card Chart Card Chart Card
Chart Card with Line Chart ChartCard with Column Chart Chart Card with Horizontal Bar Chart
Chart Card Chart Card Chart Card
Chart Card with Donut Chart Chart Card with Hundred Percent Chart Chart Card with Scatter Bar Chart

Chart Card Anatomy

A chart card is composed of three major components: header, legend and chart plot preview.

Chart Card
Chart Card Anatomy

In the header of a chart card, the app developer should supply at least a title and a timestamp for the chart, which will appear in the first line. A summary value and a trend description for the chart may also be provided from the data source and will be displayed on the second line if it becomes available.

Chart Card
Chart Card Header

Legend and Chart Plot Preview

Both the legend and chart plot preview are generated using the same chart modules for line chart and column chart in Fiori.

Chart Card
Chart Card Legend and Chart Plot Preview

User Interaction

The entire chart card is the touch target area that responds to tap or click by showing a ripple effect. The app developer can define any customized touch event listener in their app. The chart plot preview does not support touch events on its own. It's only for preview purposes in the chart card.

Chart Card View

Chart card view (a.k.a. ChartCardView) is a custom composite view created in Fiori UI to implement the Chart Cards component.

In order to add this component to an app, the app developer needs to add the following code to the layout XML:

<com.sap.cloud.mobile.fiori.chartcard.ChartCardView
        android:id="@+id/chartCardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layoutStyle="baseCard"
        app:theme="@style/AppTheme.NoActionBar"
        tools:minHeight="240dp" />

Note that the layoutStyle parameter is used to set the chart card mode. Either baseCard or scrollableCard need to be defined. The chart card mode can also be defined in the app activity if it's omitted here.

In the activity's onCreate() method, the app developer needs to add the following code to initialize the view:

    mChartCardView = findViewById(R.id.chartCardView);
    int layoutType = mChartCardView.getLayoutType(); //read layoutStyle from XML. It can also be assigned by the app here.
    mChartCardView.setViewLayoutManager();
    ChartCardViewAdapter chartCardViewAdapter = new ChartCardViewAdapter(this, mChartData, layoutType);
    mChartCardView.setViewAdapter(chartCardViewAdapter);
    mChartCardView.setItemClickListener(new FioriItemClickListener() {
            @Override
            public void onClick(@NonNull View view, int position) {
                    //replace this with your own callback.
                    Toast.makeText(getApplicationContext(), "You clicked on: " + position, Toast.LENGTH_SHORT).show();
            }
            @Override
            public void onLongClick(@NonNull View view, int position) {
                    //replace this with your own callback.
                    Toast.makeText(getApplicationContext(), "You long clicked on: " + position, Toast.LENGTH_SHORT).show();
            }
    });

Chart Card Data

Each chart card needs a data object named ChartCardDataModel to render the view. App developers should create a subclass of the abstract ChartCardDataModel class in order to transform data from its original data source into a format that the Chart Card View understands and uses to render as a chart card.

An example of this implementation can be found here:

private class DemoChartCardData extends ChartCardDataModel {

        public DemoChartCardData (int plotType, String chartCardTitle, String chartCardTimestamp,
                                  ChartCardSummary chartCardSummary, ChartCardTrend chartCardTrend,
                                  List<String> xLabels, List<String> yLabels) {
            super(plotType, chartCardTitle,chartCardTimestamp, chartCardSummary, chartCardTrend, xLabels, yLabels);
            initializePlotDataSet(3);
        }


        /* add your own initialization method to populate the plot data set.*/
        protected void initializePlotDataSet (int numberOfDataSets) {
            setMultipleTestData(numberOfDataSets);
        }

        public void setMultipleTestData(int num) {

            if(num <1 ) {
                return;
            }
            for (int k=0; k<num; k++) {
                float[] values = new float[12];
                for (int i = 0; i < values.length; i++) {

                    float val = (float) (Math.random() * 5.f);
                    values[i] = val * 1000.0f;
                }
                this.getPlotDataSet().put(MyDemoData.dataNameArray[k], values);
            }
        }
    }

Parameters

Parameters
plotType int: the plot type: 0 for line chart; 1 for column chart; 2 for horizontal barchart; 3 for stacked chart; 4 for hundred percent chart; 5 for donut chart; 6 for scatter chart
chartCardTitle String: the title of the chart card
chartCardTimestamp String: the timestamp for the chart card
chartCardSummary ChartCardSummary: the chart card summary object
chartCardTrend ChartCardTrend: the chart card trend object
xLabels List<String>: the list of labels displayed on the X-axis
yLabels List<String>: the list of labels displayed on the Y-axis

For ChartCardSummary:

Parameters Nullable
chartCardSummaryValue String: the summary value of the chart Yes
chartCardSummaryLeftUnit String: the left unit used in the summary value Yes
chartCardSummaryRightUnit String: the right unit used in the summary value Yes

For ChartCardTrend:

Parameters Nullable
isTrendUpward Boolean: whether the chart trend is upward No
trendLabel String: the trend description of the chart Yes

Plot Data Set

In a ChartCardDataModel object, there is a member variable named plotDataSet which has exactly the same data structure as the plot data used in analytic charts such as line chart or column chart. ChartCardViewAdapter takes this plotDataSet from each of the ChartCardDataModel objects to draw a line chart or a column chart inside the chart card. App developers should create their own initialization method in the subclass of ChartCardDataModel (as shown in the previous example) to populate the chart plot data set, usually from a back-end data provider.

    private Map<String, float[]> plotDataSet;

    /**
     * Gets the data set that can be used to draw the chart.
     * @return the plot data set.
     */
    public Map<String, float[]> getPlotDataSet() {
        return plotDataSet;
    }

Last update: October 15, 2021