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 isf72_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
andsubheadlineTextAppearance
attributes to customize the headline and subheadline, respectively. The recommended approach is to extend the defaultFioriTheme
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);