Donut Chart

DonutChart represents a series of data such that each data point is displayed as a slice of the Donut, proportional to the whole (which represents the sum of all the data points). Thus, each slice in a DonutChart visually represents a data point proportionally to the sum of all the items in the series. As with all the other charts, the DonutChart displays a legend that provides the numerical value of each of the data points, as well as the sum, which represents the data as a whole.

Usage

The DonutChart provides a UI control with the following layout:

<com.sap.cloud.mobile.fiori.chart.DonutChart
    android:id="@+id/pie_chart_view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_margin="16dp"
    android:layout_marginTop="2dp"
    android:layout_marginBottom="5dp"
    android:background="#FFFFFF"
    android:paddingStart="@dimen/key_line_16dp"
    android:paddingEnd="@dimen/key_line_16dp"
    android:paddingBottom="40dp"
    app:chartlabelfont="f72_regular"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    app:legendenabled="true"
    app:headlineTextAppearance="@style/nodataMomentTextStyle"
    app:subheadlineTextAppearance="@style/nodataMomentTextStyle"
    app:headline_text="No Data Available"
    app:sub_headline_text="A description of the issue, such as resynching the app for data"/>

The DonutChart view provides the chart UI with additional headers:

<com.sap.cloud.mobile.fiori.chart.DonutChartView
    android:id="@+id/pie_chart_view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_margin="16dp"
    android:layout_marginTop="2dp"
    android:layout_marginBottom="5dp"
    android:background="#FFFFFF"
    android:paddingStart="@dimen/key_line_16dp"
    android:paddingEnd="@dimen/key_line_16dp"
    android:paddingBottom="40dp"
    app:chartlabelfont="f72_regular"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    app:legendenabled="true"
    app:headlineTextAppearance="@style/nodataMomentTextStyle"
    app:subheadlineTextAppearance="@style/nodataMomentTextStyle"
    app:headline_text="No Data Available"
    app:sub_headline_text="A description of the issue, such as resynching the app for data"/>

There are additional attributes that allow you to modify axis labels and properties:

• Use the chartlabelfont attribute to set a different default font (the default font is f72_regular).
• Use the legendalignment property to set the default alignment. The supported values are {"center", "left", "right"}.
• Use the headline_text to set the main no-data text title. This is a short title.
• Use the sub_headline_text to set the description for no-data state.
• Use the headlineTextAppearance and subheadlineTextAppearance attributes to customize the headline and subheadline, respectively. The recommended approach is to extend the default FioriTheme and only customize the attributes you desire. This means that the other attributes will be retained and all the components in the application will have a consistent look and feel. For example:

app:headlineTextAppearance="@style/nodataMomentTextStyle" app:subheadlineTextAppearance="@style/Test.ObjectCell.Subheadline"

<!-- Base application theme. -->
<style name="nodataMomentTextStyle" parent="FioriTheme">
    <item name="android:textColor">@color/colorPrimaryDark</item>
    <item name="android:textStyle">italic</item>
</style>

Initializing a DonutChart

The following code initializes a DonutChart:

DonutChart donutChart = findViewById(R.id.chart);
//Set the font size.
donutChart.setLegendTextSize(16.2f);

Configuring the Legend

setLegendHeader(String percentageHeader, String valueHeader)

Set the legend header with specific values for percentage header and value headers.

chart.setLegendHeader("Votes(%)", "Vote Count");

setLegendValueFormatter(SapLegendValueFormatter formatter)

Set formatting for the legend label values.

chart.setLegendValueFormatter(
                new FioriLegendValueFormatter() {
                    @Override
                    public String formatXValue(float v) {
                        if (Float.isNaN(v)) {
                            return "No Data";
                        }
                        if (v <= 1) {
                            return String.format("%.0f%%",v*100);
                        }
                        DecimalFormat format = new DecimalFormat("#,###,000.00");
                        return format.format(v);
                    }

                    @Override
                    public String formatYValue(float v) {
                        if (Float.isNaN(v)) {
                            return "No Data";
                        }
                        if (v <= 1) {
                            return String.format("%.0f%%",v*100);
                        }
                        DecimalFormat format = new DecimalFormat("#,###,000.00");
                        return format.format(v);
                    }
                    @Override
                    public String formatRangeValue(float v) {
                        DecimalFormat format = new DecimalFormat("+#,###,000.00; -#,###,000.00");
                        return format.format(v);
                    }

                });

setLegendAlignment(FioriLegendComponent.ALIGNMENT alignment)

Set the legend alignment to LEFT, RIGHT, or CENTERED.

chart.setLegendAlignment(FioriLegendComponent.ALIGNMENT.LEFT);
chart.setLegendAlignment(FioriLegendComponent.ALIGNMENT.RIGHT);
chart.setLegendAlignment(FioriLegendComponent.ALIGNMENT.CENTER);

---

Last update: June 22, 2021