"Android Application Development Company India" www.letsnurture.com
Draw Graph using Chart engine
Library
"Android Application Development Company India" www.letsnurture.com
Draw Graph using Chart engine Library
Follow Simple st...
"Android Application Development Company India" www.letsnurture.com
android:layout_width="fill_parent"
android:layout_heig...
"Android Application Development Company India" www.letsnurture.com
import android.widget.LinearLayout;
public class MainA...
"Android Application Development Company India" www.letsnurture.com
XYMultipleSeriesDataset dataset = new XYMultipleSeries...
"Android Application Development Company India" www.letsnurture.com
multiRenderer.setYTitle("Performance Y Title");
// mul...
"Android Application Development Company India" www.letsnurture.com
Here example of Pie Chart
step 1:
create a new android...
"Android Application Development Company India" www.letsnurture.com
Now, navigate to PieChart.java file and replace the co...
"Android Application Development Company India" www.letsnurture.com
private GraphicalView mChartView;
@Override
protected ...
"Android Application Development Company India" www.letsnurture.com
public void fillPieChart(){
for(int i=0;i<pieChartValu...
"Android Application Development Company India" www.letsnurture.com
int[] pieChartValues={25,15,20,40};
Then, we declare t...
Upcoming SlideShare
Loading in...5
×

Graph for Pie chart and Line Chart in Android Development

4,082

Published on

Learn how to Draw Graph using Chart engine Library

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,082
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
38
Comments
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");
  6. 6. "Android Application Development Company India" www.letsnurture.com multiRenderer.setYTitle("Performance Y Title"); // multiRenderer.setZoomButtonsVisible(true); for (int i = 0; i < x.length; i++) { multiRenderer.addXTextLabel(i + 1, mMonth[i]); } // Adding incomeRenderer and expenseRenderer to multipleRenderer // Note: The order of adding dataseries to dataset and renderers to // multipleRenderer // should be same multiRenderer.addSeriesRenderer(performanceRenderer); multiRenderer.addSeriesRenderer(expenseRenderer); // Getting a reference to LinearLayout of the MainActivity Layout LinearLayout chartContainer = (LinearLayout) findViewById(R.id.chart_container); // Creating a Line Chart mChart = (GraphicalView) ChartFactory.getLineChartView( getBaseContext(), dataset, multiRenderer); // Adding the Line Chart to the LinearLayout chartContainer.addView(mChart); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; } } Finally You will get a Line Chart that will look like this.
  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

×