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.
 |
 |
|---|---|
| Base Card on a Small Device | Base Card on a Medium Device |
 |
|---|
| 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.
 |
 |
|---|---|
| Base Card on a Small Device | Base Card on a Medium-sized Device |
 |
|---|
| 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 with Line Chart | ChartCard with Column Chart | Chart Card with Horizontal Bar Chart |
 |
 |
 |
|---|---|---|
| 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 Anatomy |
Header¶
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 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 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;
}