HelloCharts for Android Example

This example is using HelloCharts for Android to plot line chart for function |sin(x)|. The value range for x axis is from 0 to 360 degrees. The x values are given like 0, 15, 30, 45 ... 360. So there is difference of 15 degrees between  two points. But X axis is drawn with 30 degree scale. Therefore it goes like 0, 30, 60, 90, ..., 180, ...360. Y axis is drawn with scale of 0.25 from 0 to 1.0 to make Y axis range 0, 0.25, 0.5, 1.

At the end of this example developed application creates the below chart.

Add hello-charts library to app by adding below line to dependencies block of build.gradle file of app module. Then sync the project by using Android Studio.

compile 'com.github.lecho:hellocharts-library:1.5.8@aar'

Project has one Activity file with the name MainActivity.java. It's layout resource file is activity_main.xml.

This is the content of activity_main.xml. It has RelativeLayout as root element and RelativeLayout contain TextView and chart definition.

<TextView 

 android:id="@+id/chartLbl" 

 android:gravity="center" 

 android:layout_width="match_parent" 

 android:layout_height="wrap_content" 

 android:text="|sin(x)|" 

 android:layout_alignParentTop="true"     

 android:layout_alignParentStart="true"     

 android:layout_alignParentLeft="true"     

 android:layout_margin="5dp" 

 android:textStyle="bold" />

<lecho.lib.hellocharts.view.LineChartView 

 android:id="@+id/chart"     

 android:layout_width="match_parent" 

 android:layout_height="match_parent" 

 android:padding="10dp" 

 android:layout_below="@+id/chartLbl"/>

The element lecho.lib.hellocharts.view.LineChartView is xml definition of the line chart.

Now reference to this LineChartView can be made with findViewById(int) method. To hold reference to that view, field of type LineChartView has been defined in the MainActivity.java like this.

private LineChartView lineChartView;

Line chart has been created with below method. That is called in onCreate(Bundle) method.

public void drawSinAbsChart()

Method definition of  drawSinAbsChart()

public void drawSinAbsChart() {
    String decimalPattern = "#.##";
    DecimalFormat decimalFormat = new DecimalFormat(decimalPattern);

    lineChartView = (LineChartView) findViewById(R.id.chart);

    List<PointValue> values = new ArrayList<PointValue>();

    PointValue tempPointValue;
    for (float i = 0; i <= 360.0; i+= 15.0f) {
        tempPointValue = new PointValue(i, Math.abs((float)Math.sin(Math.toRadians(i))));
        tempPointValue.setLabel(decimalFormat

                   .format(Math.abs((float)Math.sin(Math.toRadians(i)))));
        values.add(tempPointValue);
    }

    Line line = new Line(values)

                   .setColor(Color.BLUE)

                   .setCubic(false)

                   .setHasPoints(true).setHasLabels(true);
    List<Line> lines = new ArrayList<Line>();
    lines.add(line);

    LineChartData data = new LineChartData();
    data.setLines(lines);

    List<AxisValue> axisValuesForX = new ArrayList<>();
    List<AxisValue> axisValuesForY = new ArrayList<>();
    AxisValue tempAxisValue;
    for (float i = 0; i <= 360.0f; i += 30.0f){
        tempAxisValue = new AxisValue(i);
        tempAxisValue.setLabel(i+"\u00b0");
        axisValuesForX.add(tempAxisValue);
    }

    for (float i = 0.0f; i <= 1.00f; i += 0.25f){
        tempAxisValue = new AxisValue(i);
        tempAxisValue.setLabel(""+i);
        axisValuesForY.add(tempAxisValue);
    }

    Axis xAxis = new Axis(axisValuesForX);
    Axis yAxis = new Axis(axisValuesForY);
    data.setAxisXBottom(xAxis);
    data.setAxisYLeft(yAxis);


    lineChartView.setLineChartData(data);


}

Code Explanation

    String decimalPattern = "#.##";
    DecimalFormat decimalFormat = new DecimalFormat(decimalPattern);

Values that are obtained must be shown only up to two decimal places in chart point labels. Object decimalFormat is created for that purpose.

    lineChartView = (LineChartView) findViewById(R.id.chart);

Above jave statement is to obtain the LineChartView object that is declared in the layout xml resource.

    List<PointValue> values = new ArrayList<PointValue>();

    PointValue tempPointValue;
    for (float i = 0; i <= 360.0; i+= 15.0f) {
        tempPointValue = new PointValue(i, Math.abs((float)Math.sin(Math.toRadians(i))));
        tempPointValue.setLabel(decimalFormat

                   .format(Math.abs((float)Math.sin(Math.toRadians(i)))));
        values.add(tempPointValue);
    }

Tha values that must be displayed in the line chart must be in the List of type List<PointValue>. That is doing here. That list contains points which are drawn in the chart. Point is represented with PointValue Class. for loop create those points and set it label that are shown at the points.

    Line line = new Line(values)

                   .setColor(Color.BLUE)

                   .setCubic(false)

                   .setHasPoints(true).setHasLabels(true);
    List<Line> lines = new ArrayList<Line>();
    lines.add(line);

    LineChartData data = new LineChartData();
    data.setLines(lines);

Line chart can  contain many lines, Above code shows how to create new line with the values which was generated function |sin(x)|. Method setColor() is used to define color of the line. This chart has straight line as setCubic() has been provided false value. If setHasPoints() called with argument false value points wouldn't be displayed.When setHasLabels() is provided with argument true value labels that was set during PointValue object are created is shown. The lines variable of type List<Line> holds all the lines that is drawn in the chart. This example chart has only one line so it has been added. Finally that lines object is added to LineChartData object with setLines().

    List<AxisValue> axisValuesForX = new ArrayList<>();
    List<AxisValue> axisValuesForY = new ArrayList<>();
    AxisValue tempAxisValue;
    for (float i = 0; i <= 360.0f; i += 30.0f){
        tempAxisValue = new AxisValue(i);
        tempAxisValue.setLabel(i+"\u00b0");
        axisValuesForX.add(tempAxisValue);
    }

    for (float i = 0.0f; i <= 1.00f; i += 0.25f){
        tempAxisValue = new AxisValue(i);
        tempAxisValue.setLabel(""+i);
        axisValuesForY.add(tempAxisValue);
    }

    Axis xAxis = new Axis(axisValuesForX);
    Axis yAxis = new Axis(axisValuesForY);
    data.setAxisXBottom(xAxis);
    data.setAxisYLeft(yAxis);

Java statements that are shown creating X and Y axis of the chart. First loop creates X axis which is started from 0 and goes upto 360 with increment 15.0 from previous x value. Values of axis is represented with object of type List<AxisValue> and AxisValue objects are used represent a location in the axis. AxisValue has setLabel() to display developer preferred label in the chart. In same way Y axis also has been created. After thata x & y axis is created as Axis objects. X axis is set to bottom with setAxisXBottom() and Y Axis is set to left with setAxisYLeft().

Chart data is provided to LineChartView with below statement.

    lineChartView.setLineChartData(data);

If axis values is cut off this link might be helpful. I had similar problem but I could resolve it without that link by adding 5dp padding around LineChartView.

Reference:

• https://github.com/lecho/hellocharts-android