Draw Line Graph using achart engine in android tutorial with example


Introduction : Achartengine is a java library which is developed for showing graphical data on android platform. The steps to create a line graph are-

Step 1: First you need to download the library from here .

Step 2: Now create a new project in Android Studio.  Copy the file “achartengine- 1.0.0.jar” to the app>libs folder. Add the library as a dependency in build.gradle file.Now rebuild the project you should see your library in the libs folder.
You can get a detailed description of importing a library in android studio here .
Line Graph in Android Project Structure
Step 3: Now as our chart is a type of view so we need to create a layout for it. I have called my view “chartlay”
<LinearLayout
    android:id="@+id/chartlay"
    android:layout_width="fill_parent"
    android:layout_height="400dp"
    android:orientation="vertical">

Step 4: Now create an empty program which will be called in the onCreate method of the activity. I have called my program drawChart.

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_charting);
    drawChart();
}

Step 5: Now it is important to know that the achartengine library draws graph by taking a series as an argument not regular arrays.
So we need to create a series and then enter our data in that series.

int[] x = {1,2,3,4,5,6,7,8};
int[] y = {10,15,12,13,15,19,12,18};
XYSeries series = new XYSeries("chart");
for(int i=0; i<x.length;i++){
    series.add(x[i],y[i]);
}

In above code first we create our arrays which contain the x and y points we want to plot.
Then we use constructer XYSeries() to define a new series. I have called it simply “series”.
Now using series.add() method insert the data points in the series.

Step 6: Now we need an XYMultipleSeriesDataset. XYMultipleSeriesDataset is passed as an argument to the drawing program at the end.
XYMultipleSeriesDataset datas = new XYMultipleSeriesDataset();
I have called my dataset “datas”
Now add the series to fill the dataset.
datas.addSeries(series);

Step 7: Now we need a renderer. A renderer can be understood as a painter of your chart. You can control various features of you chart through the renderer. Some of them I have demonstrated like color of the graph, pointstyle etc.

XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setColor(Color.RED);
renderer.setPointStyle(PointStyle.DIAMOND);
renderer.setFillPoints(true);
renderer.setLineWidth(3);
renderer.setDisplayChartValues(true);

Step 8: Now create the XYMultipleSeriesRenderer.
XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
Almost done, just final few steps.
Add add your renderer to mRenderer.
mRenderer.addSeriesRenderer(renderer);

Create a LinearLayout object and initialize it to our “chartlay” layout.
LinearLayout chartContainer = (LinearLayout)findViewById(R.id.chartlay);

Create a new view with the arguments and add it to the layout.
View chart = ChartFactory.getLineChartView(getBaseContext(),datas,mRenderer);
chartContainer.addView(chart);

Now run the app in emulator, the output should be something like below.


Line Graph in Android - Output

activity_charting.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"       
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="comapkresandroid.android.httpschemas.m_ecg.charting">

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:id="@+id/chartlay"
        android:layout_width="fill_parent"
        android:layout_height="400dp"
        android:orientation="vertical">
    </LinearLayout>


</RelativeLayout>


charting.java

package comapkresandroid.android.httpschemas.m_ecg;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.LinearLayout;
import org.achartengine.ChartFactory;
import org.achartengine.chart.PointStyle;
import org.achartengine.model.XYMultipleSeriesDataset;
import org.achartengine.model.XYSeries;
import org.achartengine.renderer.XYMultipleSeriesRenderer;
import org.achartengine.renderer.XYSeriesRenderer;


public class charting extends AppCompatActivity {

    private String[] mMonth =  new String[]{
            "a","b","c","d","e","f","g","h","i","j","k","l"
    };

    private void drawChart(){
        int[] x = {1,2,3,4,5,6,7,8};
        int[] y = {10,15,12,13,15,19,12,18};
        XYSeries series = new XYSeries("chart");
        for(int i=0; i<x.length;i++){
            series.add(x[i],y[i]);
        }

        XYMultipleSeriesDataset datas = new XYMultipleSeriesDataset();
        datas.addSeries(series);
        XYSeriesRenderer renderer = new XYSeriesRenderer();
        renderer.setColor(Color.RED);
        renderer.setPointStyle(PointStyle.DIAMOND);
        renderer.setFillPoints(true);
        renderer.setLineWidth(3);
        renderer.setDisplayChartValues(true);

        XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
        mRenderer.setXLabels(0);
        for(int i=0;i<x.length;i++){
            mRenderer.addXTextLabel(i+1, mMonth[i]);
        }

        mRenderer.addSeriesRenderer(renderer);
        LinearLayout chartContainer = (LinearLayout)findViewById(R.id.chartlay);
        View chart = ChartFactory.getLineChartView(getBaseContext(),datas,mRenderer);
        chartContainer.addView(chart);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_charting);
        drawChart();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_charting, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }



Hope this tutorial helps you to understand how to create simple line graph in Android using achart engine...

Download code and Line graph apk here




Reactions:

0 comments :

Post a Comment