Column Chart

ColumnChart provides a UI control that can lay out an array of evenly spaced values as columns. The height of the bar (vertical square that represent a data point) is proportional to the values. Multiple arrays can be provided to represent different datasets. When there are multiple arrays, each index of the array consists of groups that form a bar group. Bar groups are a set of bars that are relatively close to each other and each bar corresponds to a value set.

Usage

The ColumnChart provides a UI control with the following layout:

<com.sap.cloud.mobile.fiori.chart.ColumnChartView
 android:id="@+id/barchart"
 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:xlabel="@string/Months"
 app:ylabel="@string/revenue_amount"
 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"/>

Additional attributes allow you to modify the axis labels and chart properties:

• Use xlabel and ylabel to specify default labels.
• Use the legendenabled flag to turn the chart legend on and off.
• 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>

<com.sap.cloud.mobile.fiori.chart.ColumnChartView
 android:id="@+id/chart"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:layout_marginTop="60dp"
 app:xlabel="Months"
 app:ylabel="Revenue Amount ($)"
 app:legendenabled="true"
 app:legendalignment="center"|"left"|"right"
 app:chartlabelfont="f72_regular"
 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"/>

Initializing ColumnChart

The following code initializes a ColumnChart.

ColumnChartView colummnChart = findViewById(R.id.chart);

ColumnChart Configuration APIs

Configuring Chart Style

Column chart can be one of three different types: each group element in the group can be displayed side by side, elements can be stacked, and elements can be displayed in 100% stacked mode.

Stacked Column Chart 100% Stacked Column Chart

setStacked(boolean stacked) Configure the chart to stacked mode. Set to true to enable the stacked mode and false to make it a default column chart mode.

setCentPercentage(boolean percentage) Turns 100% stacked chart mode on or off. If percentage value is true, the mode is 100% stacked, otherwise it is normal stacked mode.

Configuring X Labels

You can specify an array of labels to be used as X-axis labels for the graph. For example, use the code below to specify each data value distributed across Months. If there are n number of data points, each data point corresponds to a months[index*12/n] value.

List<String> months = Arrays.asList("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
colummnChart.setXLabels(months);

Configuring Y Labels

setYAxisValueFormatter(ValueFormatter formatter)

Set formatting for the Y-axis values.

colummnChart.setYAxisValueFormatter(new ValueFormatter() {
            @Override
            public String getFormattedValue(float value) {
                if (value == 0f) {
                    return "0";
                }
                int exp = (int) (Math.log(Math.abs(value)) / Math.log(1000));
                return String.format("%.0f%c",
                        (int) value / Math.pow(1000, exp),
                        " kMGTPE".charAt(exp));
            }

        });

setXlabelOverlapEnable(Boolean enable)

Long labels may sometimes overlap each other in such a way that the X-axis labels are not readable. In such cases, this API can be used to disable the overlapping by appending an ellipsis (...) to the labels. This enables or disables the xlabel overlapping as desired. By default this is disabled.

colummnChart.setXlabelOverlapEnable(true)

Chart Configuration APIs

Set X Axis Direction

The X axis direction can be changed to conform to different right-to-left standards. For instance, in some cases it might be useful to set the X axis orientation from right to left.

setXAxisInverted(boolean inverted) Set the direction of the X axis. If true, the direction is right to left. If false, left to right.

colummnChart.setXAxisInverted(true)

Configuring Legend

setValueFormatter(SapLegendValueFormatter formatter)

Set formatting for the legend label values. This function is deprecated. Use setLegendValueFormatter instead (see below).

colummnChart.setValueFormatter(
 new SapLegendValueFormatter() {
 @Override
 public String formatXValue(float value) {
 int labelSize = months.length;
 int labelPos = (int) ((value - columnChart.getXChartMin()) * (labelSize-1) / column.getXRange());
 return months[labelPos];
 }

 @Override
 public String formatYValue(float v) {
 DecimalFormat format = new DecimalFormat("#,##0,000.00");
 return format.format(v);
 }
 @Override
 public String formatRangeValue(float v) {
 DecimalFormat format = new DecimalFormat("+#,##0,000.00; -#,##0,000.00");
 return format.format(v);
 }

 });

setLegendAlignment(FioriLegendComponent.ALIGNMENT alignment)

Set the LegendAlignment to LEFT, RIGHT, or CENTERED.

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

addLegendSummaryHeader(String header)

Add and set the text for the legend summary header.

columnChart.addLegendSummaryHeader("My Summary Header");

setColumnChartTitle(String chartTitle)

Set the text for the chart title.

columnChart.setColumnChartTitle("The Chart Title");

setStatusString(String statusString)

Set the text for the time stamp status string.

columnChart.setStatusString("Updated a minute ago")

Configuring X Axis

setOnlyLimitLabels(Boolean enable)

This sets whether to display only the limit labels or all labels. If enabled, only the starting and ending X-axis labels for the visible X-axis area will be displayed. Left labels will be left-aligned and right labels will be right aligned. This is the default behavior.

colummnChart.setOnlyLimitLabels(true);

setOnlyLimitLabels(Boolean enable, Boolean centered)

Enable or disable limit labels (the first and last labels). If centered is true then the limit labels will be centered. Otherwise left labels will be left-aligned and right labels will be right-aligned.

colummnChart.setOnlyLimitLabels(true, false);

setLegendValueFormatter(SapLegendValueFormatter formatter) Set formatting for the legend label values.

colummnChart.setLegendValueFormatter(
 new SapLegendValueFormatter() {
 @Override
 public String formatXValue(float value) {
 int labelSize = months.length;
 int labelPos = (int) ((value - columnChart.getXChartMin()) * (labelSize-1) / column.getXRange());
 return months[labelPos];
 }

 @Override
 public String formatYValue(float v) {
 DecimalFormat format = new DecimalFormat("#,##0,000.00");
 return format.format(v);
 }
 @Override
 public String formatRangeValue(float v) {
 DecimalFormat format = new DecimalFormat("+#,##0,000.00; -#,##0,000.00");
 return format.format(v);
 }

 });

Configuring Y Axis

setYLabels(List\<String\> labels)

Set a range of values for the Y label.

List<String> ylabel = Arrays.asList("Very Low", "Low", "Medium Low", "Medium High", "High", "Very High"};
colummnChart.setYLabels(ylabel);

setDefaultYGridSpacingEnabled(boolean enable)

This function enables or disables the default Y axis grid spacing. By default, MPAndroidChart calculates the spacing based on the given maximum Y value and minimum Y value. At times this may cause hard-to-format values to appear on the Y axis. Disabling this will allow the user to specify a preferred specific grid spacing value.

colummnChart.setDefaultYGridSpacingEnabled(enable);

setDefaultYGridSpacing(float gap)

This function sets a specific value for grid spacing. This is used in conjunction with setDefaultYGridSpacingEnabled.

colummnChart.setDefaultYGridSpacing(2000);

Configuring Data for ColumnChart

addDataSet(float[] values, String dataSetName)

Add a data set to the ColumnChart.

float[] values = new float[100];
for (int i = 0; i < values.length; i++) {
 float val = (float) (Math.random() * 5) ;
 values[i] = val * 1000.0f;
}
colummnChart.addDataSet(values, "2008");

updateGraph()

Redraw the UI control with all of the changes to its properties applied and with a data set.

resetDataSet()

Reset all of the data sets. This will remove all the data from the graph and the graph will become empty.

columnChart.resetDataSet();

colummnChart.addDataSet(values, "2010");
colummnChart.updateGraph();

Configuring Chart Area

setYAxisToRight()

Set the Y axis to the right side.

columnChart.setYAxisToRight();

setYAxisToLeft()

Set the Y axis to the left side.

columnChart.setYAxisToLeft();

setNoDataText(String text)

Sets the text that informs the user that there is no data available to display on empty chart.

colummnChart.setNoDataText("No Data Provided");

setNoDataTextColor(int color) Sets the color of the no data text.

colummnChart.setNoDataTextColor(Color.GREEN)

setNoDataTextSize(float size) Sets the text size for no data text.

colummnChart.setNoDataTextSize(size);

---

Last update: June 22, 2021