Upcoming SlideShare
×

# Graph for Pie chart and Line Chart in Android Development

4,615
-1

Published on

Learn how to Draw Graph using Chart engine Library

Published in: Technology, Art & Photos
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

Views
Total Views
4,615
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
43
0
Likes
0
Embeds 0
No embeds

No notes for slide

### Graph for Pie chart and Line Chart in Android Development

1. 1. "Android Application Development Company India" www.letsnurture.com Draw Graph using Chart engine Library
2. 2. "Android Application Development Company India" www.letsnurture.com Draw Graph using Chart engine Library Follow Simple steps to draw chart like  line chart  area chart  scatter chart  time chart  bar chart  pie chart  bubble chart  doughnut chart  range (high-low) bar chart  dial chart / gauge  combined (any combination of line, cubic line, scatter, bar, range bar, bubble) chart  cubic line chart Link to Examle Here example of Line Chart step 1: download A-Chart Engine library from this link. copy the jar file into the libs folder of your project. step 2 the activity_main.xml like the following: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
3. 3. "Android Application Development Company India" www.letsnurture.com android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/Chart_layout" android:orientation="vertical"> </LinearLayout> </LinearLayout> step 3 In the main.java do the following steps. // First Create a Graphical View object called mChart. import org.achartengine.ChartFactory; import org.achartengine.GraphicalView; import org.achartengine.chart.PointStyle; import org.achartengine.model.XYMultipleSeriesDataset; import org.achartengine.model.XYSeries; import org.achartengine.renderer.BasicStroke; import org.achartengine.renderer.XYMultipleSeriesRenderer; import org.achartengine.renderer.XYSeriesRenderer; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.Menu;
4. 4. "Android Application Development Company India" www.letsnurture.com import android.widget.LinearLayout; public class MainActivity extends Activity { private GraphicalView mChart; private String[] mMonth = new String[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); openChart(); } private void openChart() { int[] x = { 1, 2, 3, 4, 5, 6, 7, 8 }; int[] income = { 2000, 2500, 2700, 3000, 2800, 3500, 3700, 3800 }; // int[] margin = { 10, -10, 10, 10 }; int[] expense = { 2200, 2200, 2200, 2200, 2200, 2200, 2200, 2200 }; // Creating an XYSeries for Performance XYSeries performanceSeries = new XYSeries("Perfomance"); XYSeries expenseSeries = new XYSeries("expense"); // Adding data to Income and Expense Series for (int i = 0; i < x.length; i++) { performanceSeries.add(x[i], income[i]); expenseSeries.add(x[i], expense[i]); } // Creating a dataset to hold each series
5. 5. "Android Application Development Company India" www.letsnurture.com XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset(); // Adding Perfomance Series to the dataset dataset.addSeries(performanceSeries); dataset.addSeries(expenseSeries); // Creating XYSeriesRenderer to customize/style performanceSeries XYSeriesRenderer performanceRenderer = new XYSeriesRenderer(); performanceRenderer.setColor(Color.GREEN); performanceRenderer.setPointStyle(PointStyle.TRIANGLE); performanceRenderer.setFillPoints(true); performanceRenderer.setStroke(BasicStroke.SOLID); performanceRenderer.setLineWidth(2); performanceRenderer.setDisplayChartValues(true); // Creating second XYSeriesRenderer to customize/style performanceSeries XYSeriesRenderer expenseRenderer = new XYSeriesRenderer(); expenseRenderer.setColor(Color.YELLOW); expenseRenderer.setPointStyle(PointStyle.TRIANGLE); expenseRenderer.setFillPoints(true); expenseRenderer.setStroke(BasicStroke.SOLID); expenseRenderer.setLineWidth(2); expenseRenderer.setDisplayChartValues(true); // Creating a XYMultipleSeriesRenderer to customize the whole chart XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer(); multiRenderer.setXLabels(-15); multiRenderer.setLabelsTextSize(20); multiRenderer.setAxisTitleTextSize(30); // add chart title and x and y title multiRenderer.setChartTitle("Performance Chart"); multiRenderer.setXTitle("Performance X title");
7. 7. "Android Application Development Company India" www.letsnurture.com Here example of Pie Chart step 1: create a new android activity and name it as PieChart. Step 2: Now, navigate to "/res/layout" and select the xml file associated with above activity. In this case, activity_pie_chart.xml and paste the following code there. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:id="@+id/chart" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout> step 3:
8. 8. "Android Application Development Company India" www.letsnurture.com Now, navigate to PieChart.java file and replace the code with below code import org.achartengine.ChartFactory; import org.achartengine.GraphicalView; import org.achartengine.model.CategorySeries; import org.achartengine.renderer.DefaultRenderer; import org.achartengine.renderer.SimpleSeriesRenderer; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.Menu; import android.view.ViewGroup.LayoutParams; import android.widget.LinearLayout; public class PieChart extends Activity { int[] pieChartValues={25,15,20,40}; publics tatic final String TYPE = "type"; private static int[] COLORS = new int[] { Color.GREEN, Color.BLUE, Color.MAGENTA, Color.CYAN }; private CategorySeries mSeries = new CategorySeries(""); private DefaultRenderer mRenderer = new DefaultRenderer();
9. 9. "Android Application Development Company India" www.letsnurture.com private GraphicalView mChartView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_pie_chart); mRenderer.setApplyBackgroundColor(true); mRenderer.setBackgroundColor(Color.argb(100,50,50,50)); mRenderer.setChartTitleTextSize(20); mRenderer.setLabelsTextSize(15); mRenderer.setLegendTextSize(15); mRenderer.setMargins(new int[] {20,30,15,0}); mRenderer.setZoomButtonsVisible(true); mRenderer.setStartAngle(90); if (mChartView == null) { LinearLayout layout = (LinearLayout) findViewById(R.id.chart); mChartView = ChartFactory.getPieChartView(this, mSeries, mRenderer); mRenderer.setClickEnabled(true); mRenderer.setSelectableBuffer(10); layout.addView(mChartView, new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT)); } else { mChartView.repaint(); } fillPieChart(); }
10. 10. "Android Application Development Company India" www.letsnurture.com public void fillPieChart(){ for(int i=0;i<pieChartValues.length;i++) { mSeries.add(" Share Holder "+ (mSeries.getItemCount() + 1), pieChartValues[i]); SimpleSeriesRenderer renderer = new SimpleSeriesRenderer(); renderer.setColor(COLORS[(mSeries.getItemCount() -1) % COLORS.length]); mRenderer.addSeriesRenderer(renderer); if (mChartView != null) mChartView.repaint(); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_main, menu); return true; } } The working of code is almost similar to that of Bar chart. Renderer is used to actually draw the Pie chart and we created a Dataset as a sample array
11. 11. "Android Application Development Company India" www.letsnurture.com int[] pieChartValues={25,15,20,40}; Then, we declare the different colors which will be used the differentiate the graph area. In our case private static int[] COLORS = new int[] { Color.GREEN, Color.BLUE, Color.MAGENTA, Color.CYAN }; Then we have to declare some basic characteristics for renderer such as title, title size, margin, zoom option or start angle etc. You can always modify it as per requirements. Since we are using another activity to display the Pie chart so we declare it in onCreate method of PieChart activity. Then we actually create reference of the "chart" layout we created in step 4 and assign the "chartView" to it and call the fillPieChart() method. if (mChartView == null) { LinearLayout layout = (LinearLayout) findViewById(R.id.chart); mChartView = ChartFactory.getPieChartView(this, mSeries, mRenderer); mRenderer.setClickEnabled(true); mRenderer.setSelectableBuffer(10); layout.addView(mChartView, new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT)); } else { mChartView.repaint(); } fillPieChart(); } Link of Source Code