Horizontal Bar Chart¶
Horizontal Bar Chart is a UI control that presents a given data series as an array of evenly spaced values in the form of horizontal bars. You can add multiple data sets. The width of the bar is proportional to the values. Multiple arrays can be provided to represent different data sets. When there are multiple arrays, each index of the array consists of groups that form a bar group. The bar groups are a set of bars that are relatively closer to each other and each bar corresponds to a value set.
Usage¶
<com.sap.cloud.mobile.fiori.chart.BarChartView
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"/>
</com.sap.cloud.mobile.fiori.chart.BarChartView>
Additional attributes allow you to modify the axis labels and chart properties:
- Use
xlabel
andylabel
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 isf72_regular
). - 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
main_no_data_text
to set the main no-data text. - Use the
sub_no_data_text
to set the description for no data - 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>
<com.sap.cloud.mobile.fiori.chart.BarChartView
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:chartlabelfont="f72_regular" />
Initializing BarChart
¶
The following code initializes a BarChart
.
BarChartView barChart = findViewById(R.id.chart);
Bar Chart Configuration APIs¶
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");
barChart.setXLabels(months);
setXlabelOverlapEnable(Boolean enable)
This API enables or disables the X-label overlapping. By default, overlapping is disabled.
barChart.setXlabelOverlapEnable(true)
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.
barChart.setXAxisInverted(true)
Configuring Legend¶
setValueFormatter(SapLegendValueFormatter formatter)
Set formatting for the legend label values. This function is deprecated. Use setLegendValueFormatter
instead (see below).
setLegendAlignment(FioriLegendComponent.ALIGNMENT alignment)
Set the LegendAlignment
to LEFT, RIGHT, or CENTERED.
barChart.setLegendAlignment(FioriLegendComponent.ALIGNMENT.LEFT);
barChart.setLegendAlignment(FioriLegendComponent.ALIGNMENT.RIGHT);
barChart.setLegendAlignment(FioriLegendComponent.ALIGNMENT.CENTER);
barChart.setValueFormatter(
new SapLegendValueFormatter() {
@Override
public String formatXValue(float value) {
int labelSize = months.length;
int labelPos = (int) ((value - barChart.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);
}
});
setLegendValueFormatter(SapLegendValueFormatter formatter)
Set formatting for the legend label values.
barChart.setLegendValueFormatter(
new SapLegendValueFormatter() {
@Override
public String formatXValue(float value) {
int labelSize = months.length;
int labelPos = (int) ((value - barChart.getXChartMin()) * (labelSize-1) / barChart.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);
}
});
addLegendSummaryHeader(String header)
Add and set the text for the legend summary header.
barChart.addLegendSummaryHeader("My Summary Header");
setBarChartTitle(String chartTitle)
Set the text for the chart title.
barChart.setBarChartTitle("The Chart Title");
setStatusString(String statusString)
Set the text for the time stamp status string.
barChart.setStatusString("Updated a minute ago")
Configuring Y Axis¶
setYAxisValueFormatter(ValueFormatter formatter)
Set formatting for the Y axis values.
barChart.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));
}
});
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"};
barChart.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.
barChart.setDefaultYGridSpacingEnabled(enable);
setDefaultYGridSpacing(float gap)
This function sets a specific value for grid spacing. This is used in conjunction with setDefaultYGridSpacingEnabled
.
barChart.setDefaultYGridSpacing(2000);
Configuring Data for Bar Chart¶
addDataSet(float[] values, String dataSetName)
Add a data set to the bar chart.
float[] values = new float[100];
for (int i = 0; i < values.length; i++) {
float val = (float) (Math.random() * 5) ;
values[i] = val * 1000.0f;
}
barChart.addDataSet(values, "2008");
updateGraph()
Redraw the UI control with all of the changes to its properties applied and with a data set.
barChart.addDataSet(values, "2010");
barChart.updateGraph();
resetDataSet()
Reset all of the data sets.
barChart.resetDataSet();
Configuring Chart Area¶
setNoDataText(String text)
Sets the text that informs the user that there is no data available to display on an empty chart.
barChart.setNoDataText("No Data Provided");
setNoDataTextColor(int color)
Sets the color of the no data text.
barChart.setNoDataTextColor(Color.GREEN)
setNoDataTextSize(float size)
Sets the text size for no data text.
barChart.setNoDataTextSize(size);