Draw Graph in Android

Graph play a very important role in showing data in Graphical view. User generally find comparison in a graph very interesting. It gives a clear view of something going up or down or how things related to each other or what is previous record and is next coming forecast for that etc.
But in android there is no graph related API . We can draw graph in android by using general android API. The other way is to use third party graph library to draw the graph. So finally we have to two option
(1.) Draw graph by using general android API and
(2.) Draw the graph by using Third party graph library
(As for Example AChartEngine, AndroidPlot, Google Chart , AFreeChart etc)

Here I am going to show a example of Pie chart in both scenario :
Firstly I am using case A ( by using general android API to draw a Graph)
These are the 4 files and class we need to draw the graph :-

pie_chart_activity.xml ( pie chart view purpose)
PieChartActivity.java ( main class to draw a pie chart )
Piechart.java ( pie chart properties class)
PieItem.java ( attributes class )

Step 1.
Create a Project in Your Eclipse IDE. Then copy and paste following file and java class in your application .
pie_chart_activity.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"
tools:context=".PieChartActivity" >

<LinearLayout
    android:id="@+id/pie_container"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:orientation="vertical" >
</LinearLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignRight="@+id/pie_container"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" >

    <TextView
        android:id="@+id/parta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#444544"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="PartA"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/partb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/parta"
        android:background="#878887"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="PartB"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/partc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/partb"
        android:background="#98967F"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="PartC"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/partd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/partc"
        android:background="#A1A1A1"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="PartD"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/parte"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/partd"
        android:background="#0000FF"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="PartE"
        android:textStyle="bold" />
</RelativeLayout>

PieChartActivity.java

package com.sks.mks.pieexample;
public class PieChartActivity extends Activity {

List<PieItem> piedata = new ArrayList<PieItem>(0);

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_pie_chart);

  PieItem item;
  int maxCount = 0;
  int itemCount = 0;
  int items[] = { 20, 40, 10, 15, 5 };
  int colors[] = { -6777216, -16776961, -16711681, -12303292, -7829368 };
  String itemslabel[] = { "part A 100", "part B 200",
    "Part C 300", "Part D  400", "Part E 500" };
  for (int i = 0; i < items.length; i++) {
   itemCount = items[i];
   item = new PieItem();
   item.count = itemCount;
   item.label = itemslabel[i];
   item.color = colors[i];
   piedata.add(item);
   maxCount = maxCount + itemCount;
  }

  int size = 155;
  int BgColor = 0xffa11b1;
  Bitmap mBaggroundImage = Bitmap.createBitmap(size, size,Bitmap.Config.ARGB_8888);

  Piechart piechart = new Piechart(this);
  Piechart.setLayoutParams(new LayoutParams(size, size));
  piechart.setGeometry(size, size, 2, 2, 2, 2, 2130837504);
  piechart.setSkinparams(BgColor);
  piechart.setData(piedata, maxCount);
  piechart.invalidate();
  piechart.draw(new Canvas(mBaggroundImage));
  piechart = null;
  ImageView mImageView = new ImageView(this);
  mImageView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
  mImageView.setBackgroundColor(BgColor);
  mImageView.setImageBitmap(mBaggroundImage);
  LinearLayout finalLayout = (LinearLayout) findViewById(R.id.pie_container);
  finalLayout.addView(mImageView);
 }
}

Piechart.java

package com.sks.mks.pieexample;

public class Piechart {

public static final int WAIT = 0;
 public static final int IS_READY_TO_DRAW = 1;
 public static final int IS_DRAW = 2;
 private static final float START_INC = 30;
 private Paint mBagpaints = new Paint();
 private Paint mLinePaints = new Paint();

 private int mWidth;
 private int mHeight;
 private int mGapTop;
 private int mGapBottm;
 private int mBgcolor;
 private int mGapleft;
 private int mGapright;
 private int mState = WAIT;
 private float mStart;
 private float mSweep;
 private int mMaxConnection;
 private List<PieItem> mdataArray;

 public Piechart(Context context) {
  Log.w(" single cons ", " single cons");
 }

 public Piechart(Context context, AttributeSet attr) {
  Log.w(" double cons ", " double cons");
 }


 protected void onDraw(Canvas canvas) {
  if (mState != IS_READY_TO_DRAW) {
   return;
  }
  canvas.drawColor(mBgcolor);
  mBagpaints.setAntiAlias(true);
  mBagpaints.setStyle(Paint.Style.FILL);
  mBagpaints.setColor(0x88FF0000);
  mBagpaints.setStrokeWidth(0.0f);
  mLinePaints.setAntiAlias(true);
  mLinePaints.setColor(0xff000000);
  mLinePaints.setStrokeWidth(3.0f);
  mLinePaints.setStyle(Paint.Style.STROKE);
  RectF mOvals = new RectF(mGapleft, mGapTop, mWidth - mGapright, mHeight
    - mGapBottm);
  mStart = START_INC;
  PieItem item;
  for (int i = 0; i < mdataArray.size(); i++) {
   item = (PieItem) mdataArray.get(i);
   mBagpaints.setColor(item.color);
   mSweep = (float) 360* ((float) item.count / (float) mMaxConnection);
   canvas.drawArc(mOvals, mStart, mSweep, true, mBagpaints);
   canvas.drawArc(mOvals, mStart, mSweep, true, mLinePaints);
   mStart = mStart + mSweep;
  }

  mState = IS_DRAW;
 }

 public void setGeometry(int width, int height, int gapleft, int gapright,
   int gaptop, int gapbottom, int overlayid) {

  mWidth = width;
  mHeight = height;
  mGapleft = gapleft;
  mGapright = gapright;
  mGapBottm = gapbottom;
  mGapTop = gaptop;

 }

 public void setSkinparams(int bgcolor) {
  Log.w(" Set bg color  : ", bgcolor + "");
  mBgcolor = bgcolor;
 }

 public void setData(List<PieItem> data, int maxconnection) {
  mdataArray = data;
  mMaxConnection = maxconnection;
  Log.w(" Max Connection  ", maxconnection + " " + "  Adataarray :"
    + data.toString());
  mState = IS_READY_TO_DRAW;
 }

 public void setState(int state) {
  mState = state;
 }

 public int getColorValues(int index) {
  if (mdataArray == null) {
   return 0;
  }

  else if (index < 0)
   return ((PieItem) mdataArray.get(0)).color;
  else if (index > mdataArray.size())
   return ((PieItem) mdataArray.get(mdataArray.size() - 1)).color;
  else
   return ((PieItem) mdataArray.get(mdataArray.size() - 1)).color;

 }

}

PieItem.java

package com.sks.mks.pieexample;
public class PieItem {
 public int count, color;
 public float percent;
 public String label;
}

Now I am going to draw graph by using Third party library. Here i am using AchartEngin to draw graph :-
At first download AchartEngin and put it on libs folder of Your Eclipse project. You can download it from Here

Now Create two java class in src and one xml file in res folder.
1. DrawChart.java
2.GraphActivity.java
3. activity_graph.xml
copy and paste following code in your DrawChart.java

packagecom.sks.mks.piechart;

importorg.achartengine.ChartFactory;

importorg.achartengine.GraphicalView;

importorg.achartengine.model.CategorySeries;

importorg.achartengine.renderer.DefaultRenderer;

importorg.achartengine.renderer.SimpleSeriesRenderer;

importandroid.content.Context;

importandroid.content.Intent;

importandroid.graphics.Color;

importandroid.widget.RelativeLayout;

public class DrawChart {

private GraphicalView ChartView1;

private GraphicalView mChartView2;

static int count=5;

int[] Mycolors = new int[] { Color.RED, Color.parseColor("#FA58F4"),

Color.parseColor("#0B0B61"),

Color.parseColor("#800080"),Color.parseColor("#008000"),Color.GRAY };

public Intent execute(Context context,RelativeLayout parent) {

int[] colors = new int[count];

for(int i=0;i<count;i++)

{

colors[i]=Mycolors[i];

}

DefaultRenderer renderer = buildCategoryRenderer(colors);

renderer.setPanEnabled(false);// Disable User Interaction

renderer.setLabelsColor(Color.BLACK);

renderer.setShowLabels(true);

//renderer.setChartTitle("Total Assets");

renderer.setLabelsTextSize(12);

CategorySeries categorySeries = new CategorySeries("Fruits");

categorySeries.add("Apple", 36);

categorySeries.add("Banana", 23);

categorySeries.add("Grapes", 30);

categorySeries.add("Guava", 8);

categorySeries.add("Orange", 3);

ChartView1=ChartFactory.getPieChartView(context, categorySeries,renderer);

parent.addView(ChartView1);

return ChartFactory.getPieChartIntent(context, categorySeries, renderer,null);

}

protected DefaultRenderer buildCategoryRenderer(int[] colors)

{

DefaultRenderer renderer = new DefaultRenderer();

for (int color : colors) {

SimpleSeriesRenderer r = new SimpleSeriesRenderer();

r.setColor(color);

renderer.addSeriesRenderer(r);

}

return renderer;

}

Now put following code in GraphActivity.java

packagecom.sks.mks.piechart;

import android.os.Bundle;

importandroid.app.Activity;

importandroid.content.Intent;

import android.view.Menu;

importandroid.widget.RelativeLayout;

public class GraphActivity extends Activity {

RelativeLayout LayoutToDisplayChart;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_graph);

LayoutToDisplayChart=(RelativeLayout)findViewById(R.id.relative);

Intent achartIntent = new DrawChart().execute(GraphActivity.this, LayoutToDisplayChart);

}

lastly put following code in xml file:-

<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"

tools:context=".GraphActivity" >

<RelativeLayout

android:id="@+id/relative"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >

</RelativeLayout>

Happy Coding !!!

Pages

ANDROID

Label

Minggu, 09 Juni 2013

Draw Graph in Android

0 komentar:

Posting Komentar