Skip to content

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.

Scatter Chart

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 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.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);

Last update: October 15, 2021