Line Chart

Line chart provides a UI control to present data sets represented in the form of an array of values as a line graph. You can add multiple data sets, where each set is represented by an XY scatter-line. The data set is assumed to be equally distributed over x values. Axis values can be customized to represent a specific value range, such as Years or Months.

Line Chart

Usage

The line chart provides a UI control with the following layout:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<com.sap.cloud.mobile.fiori.chart.LineChartView
        android:id="@+id/chart"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="60dp"
        android:background="#ccc"
        android:paddingLeft="20dp"
        android:paddingBottom="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

There are additional attributes that allow you to control items such as axis labels and 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).

1
2
3
4
5
6
7
8
9
<com.sap.cloud.mobile.fiori.chart.LineChartView
        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 a Chart

The following code initializes a lineChart.

1
2
3
LineChart lineChart = findViewById(R.id.chart);
//This line sets the font size
lineChart.setLegendTextSize(16.2f);

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 months[index*12/n] value.

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

Line Chart APIs

Construct line charts using one of the following three constructor methods: * LineChart Constructor * LineChart Configuration APIs * setYLabels(String[] labels)

LineChart Constructor

The LineChart constructor is automatically called if the control is specified with the layout. The LineChart constructor can also be called directly if you are creating the layout with direct coding. The type Context is a reference to the context of the activity in which the control is placed.

1
2
LineChart(Context context);
LineChart(Context context, AttributeSet attrs)

Line Chart Configuration APIs

setXLabels(List\<String> labels)

This sets a range of values to be set as X label.

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

setValueFormatter(SapLegendValueFormatter formatter)

This provides a value formatting for legend labels.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
lineChart.setValueFormatter(
                       new SapLegendValueFormatter() {
                    @Override
                    public String formatXValue(float value) {
                        int labelSize = months.length;
                        int labelPos = (int) ((value - lineChart.getXChartMin()) * (labelSize-1) / lineChart.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);
                    }

            });

setYLabels(List\<String> labels)

This sets a range of values to be set as Y label.

1
2
List<String> ylable = Arrays.asList("Very Low", "Low", "Medium Low", "Medium High", "High", "Very High"};
lineChart.setYLabels(ylable);

addDataSet(float[] values, String dataSetName)

This adds a data set to the line chart.

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

updateGraph()

This redraws the UI control with all the changes to its properties and with a dataset.

1
2
lineChart.addDataSet(values, "2010");
lineChart.updateGraph();

setYAxisToRight()

This function set the Y Axis to the right side

1
columnChart.setYAxisToRight();

setYAxisToLeft()

This function sets the Y Axis to the left side

1
lineChart.setYAxisToLeft();

resetDataSet()

This function can be used to reset all data set

1
lineChart.resetDataSet();

addLegendSummaryHeader(String header)

Add a legend Summary Header

1
lineChart.addLegendSummaryHeader("My Summary Header");

setColumnChartTitle(String chartTitle)

Set the Chart Title

1
lineChart.setColumnChartTitle("The chart Title");

setStatusString(String statusString)

Set the Time Stamp status string

1
lineChart.setStatusString("Updated a minute ago")