Scatter Chart¶
ScatterChart
provides a UI control that can lay out a set of data points on a graph. Each data point is represented by a solid circle. You can use multiple data series for any given scatter chart and each data series will have a unique color as defined by the Fiori theme. Users can touch any data point to see the description and value of that data point. In the legend area, users can touch a legend item to select the single data series for that item.
Usage¶
The ScatterChart
provides a UI control with the following layout:
<com.sap.cloud.mobile.fiori.chart.ScatterChartView
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
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
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>
<com.sap.cloud.mobile.fiori.chart.ScatterChartView
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=One of "center" OR "left" OR "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 ScatterChart
¶
The following code initializes a ScatterChart
.
ScatterChartView scatterChart = findViewById(R.id.chart);
Configuring the Y Axis¶
setDefaultYGridSpacingEnabled(boolean enable)
This function enables or disables the default Y axis grid spacing. By default, the spacing is calculated 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 function allows the user to specify a preferred specific grid spacing value.
scatterChart.setDefaultYGridSpacingEnabled(enable);
setDefaultYGridSpacing(float gap)
This function sets a specific value for grid spacing. This is used in conjunction with setDefaultYGridSpacingEnabled
.
scatterChart.setDefaultYGridSpacing(2000);
setYAxisValueFormatter(ValueFormatter formatter)
Set formatting for the Y axis values.
scatterChart.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));
}
});
Configuring Popover¶
Popover is a square bubble that is displayed when the user selects a data point by touching it, as shown in the preceding screenshot.
setPopoverHeaderText(CharSequence headerText)
Set the header text for the popover. If the string is empty, the header is not displayed.
scatterChart.setPopoverHeaderText(CharSequence headerText)
setPopoverXvalueTitleText("Data Point")
Set the X value title for the popover.
scatterChart.setPopoverXvalueTitleText("X Value")
setPopoverYValueTitleText(CharSequence yValueTitleText)
Set the Y Value title for the popover.
scatterChart.setPopoverYValueTitleText("Y Value")
setPopoverXValueFormatter(ValueFormatter formatter)
Set a formatter for the X value of the popover.
scatterChart.setPopoverXValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float v) {
if (Float.isNaN(v)) {
return "No Data";
}
DecimalFormat format = new DecimalFormat("#,###,###.##");
return format.format(v);
}
});
setPopoverYValueFormatter(ValueFormatter formatter)
Set a formatter for the Y value of the popover.
scatterChart.setPopoverYValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float v) {
if (Float.isNaN(v)) {
return "No Data";
}
DecimalFormat format = new DecimalFormat("#,###,###.00");
return format.format(v);
}
});
setPopoverHeaderTextFormatter(PopOverValueFormatter formatter)
Set a formatter for the popover header.
scatterChart.setPopoverHeaderTextFormatter(new PopOverValueFormatter() {
@Override
public String getFormattedStringValue(String value) {
return "The state of "+value;
}
});
Configuring the Chart Area¶
setYAxisToRight()
Set the Y axis to the right side.
scatterChart.setYAxisToRight();
setYAxisToLeft()
Set the Y axis to the left side.
scatterChart.setYAxisToLeft();
setNoDataText(String text)
Sets the text that informs the user that there is no data available to display on an empty chart.
scatterChart.setNoDataText("No Data Provided");
setNoDataTextColor(int color)
Sets the color of the no data text.
scatterChart.setNoDataTextColor(Color.GREEN)
setNoDataTextSize(float size)
Sets the text size for the no data text.
scatterChart.setNoDataTextSize(size);