Displaying chart inside Fragment Activity in Android

Posted By : Chandan Wadhwa | 22-Sep-2014

android

Displaying chart inside Fragment Activity in Android

To create chart in android we need a library named “achartengine”

achartengine library can be downloaded from Download achartengine.jar link.

After downloading this jar file we need to add this jar file to libs directory. After this we need to add this library to build bath by the following process.

Right click on root directory of project -> build path -> library-> add jar-> choose the jar file from libs directory of your project

This library provides following types of chart

scatter chart
line chart
time chart
doughnut chart
area chart
combined (any combination of line, cubic line, scatter, bar, range bar, bubble) chart
pie chart
cubic line chart
bubble chart
range (high-low) bar chart
dial chart / gauge
bar chart

I am going to explain with a pie chart which display a Result chart with correct and wrong no of answers in a fragment activity

Following is the fragment activity code of chart

 public static class ResultChartFragment extends Fragment {
	       
		private GraphicalView graphView;
		public CardFrontFragment() {
	        }

	        @Override
	        public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
	        	View view = (LinearLayout) inflater.inflate(R.layout.activity_chart_fragment,
	                    container, false);
	    LinearLayout chartContainerlayout = (LinearLayout) view.findViewById(R.id.chart_container);
	        	if (container == null) {
	                return null;
	            }
	        	 int []Performance = { totalcorrect,(9-totalcorrect)};  // [0] for correct ans, [1] for wrong ans
	             CategorySeries series = new CategorySeries("pie"); // adding series of charts from array .
	                 series.add("Correct Answer",Performance[0]);           
	                 series.add("Wrong Answer",Performance[1]);
	                 int []colors = new int[]{Color.GREEN, Color.RED};            // set style for chart series
	                          DefaultRenderer renderer = new DefaultRenderer();
	                          for(int color : colors){
	                              SimpleSeriesRenderer r = new SimpleSeriesRenderer();
	                              r.setColor(color);
//	                              r.setDisplayBoundingPoints(true);
//	                              r.setDisplayChartValuesDistance(5);
	                              r.setDisplayChartValues(true);
	                              r.setChartValuesTextSize(15);
	                              renderer.addSeriesRenderer(r);
	                          }
	                          renderer.isInScroll();
	                          renderer.setZoomButtonsVisible(true);   //setting zoom button of Graph
	                          renderer.setApplyBackgroundColor(true);
	                          renderer.setBackgroundColor(Color.BLACK); //setting background color of chart
	                          renderer.setChartTitle("Result Chart");   //setting title of chart
	                          renderer.setChartTitleTextSize((float) 30);
	                          renderer.setShowLabels(true); 
	                          renderer.setLabelsTextSize(20);
	                          renderer.setLegendTextSize(25);
	                          graphView = ChartFactory.getPieChartView(getActivity(),
	                                 series, renderer);

	                          // Adding the pie chart to the custom layout
	                          chartContainerlayout.addView(graphView);
	                          return view;
	}
}

Layout of ResultChartFragment