Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Android Pie chart example using MpAndroidChart Library

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 8.58k
    Comment on it

    Step1: Adding MpAndroidChart android library into project

    dependencies {
    		compile 'com.github.PhilJay:MPAndroidChart:v2.1.6'
    		}
    	repositories {
            	maven { url "https://jitpack.io" }
        		}

    Step2: Pie Chart layout in your xml file

    <com.github.mikephil.charting.charts.PieChart
            	android:id="@+id/chart"
            	android:layout_width="400dp"
            	android:layout_height="300dp"
            	android:layout_gravity="center_horizontal"/>

    Step3: Initializing pie chart and a dataset of different arraylists

    // Piechart initialization
    	pieChart = (PieChart) findViewById(R.id.chart);
    
            // array of images
            ArrayList<Drawable> array_image = new ArrayList<Drawable>();
            array_image.add(ContextCompat.getDrawable(this, R.drawable.creditcard));
            array_image.add(ContextCompat.getDrawable(this, R.drawable.dollar));
            array_image.add(ContextCompat.getDrawable(this, R.drawable.favourite));
            array_image.add(ContextCompat.getDrawable(this, R.drawable.plane));
            array_image.add(ContextCompat.getDrawable(this, R.drawable.others));
    
            // array of graph percentage value
            ArrayList<String> array_percent = new ArrayList<String>();
            array_percent.add(String.valueOf(15)+"%");
            array_percent.add(String.valueOf(10)+"%");
            array_percent.add(String.valueOf(25)+"%");
            array_percent.add(String.valueOf(20)+"%");
            array_percent.add(String.valueOf(30)+"%");
    
            // array of graph drawing size according to design
            ArrayList<Float> array_drawGraph = new ArrayList<Float>();
            array_drawGraph.add((float) 15);
            array_drawGraph.add((float) 10);
            array_drawGraph.add((float) 25);
            array_drawGraph.add((float) 20);
            array_drawGraph.add((float) 30);
    
            // array of graph different colors 
            ArrayList<Integer> colors = new ArrayList<Integer>();
            colors.add(ContextCompat.getColor(this, R.color.green));
            colors.add(ContextCompat.getColor(this, R.color.orange));
            colors.add(ContextCompat.getColor(this, R.color.blue));
            colors.add(ContextCompat.getColor(this, R.color.grey));
            colors.add(ContextCompat.getColor(this, R.color.yellow));

    Step4: Set the data

    // Now adding array of data to the entery set
            ArrayList<PieEntry> entries = new ArrayList<PieEntry>();
    
    	// count is the number of values you need to display into graph
            for (int i=0; i<count; i++) {
                entries.add(new PieEntry(array_drawGraph.get(i), new CustomLabelWithIcon(array_percent.get(i), array_image.get(i))));
            }
    
            // initializing pie data set
            PieDataSet dataset = new PieDataSet(entries, "");
    
            // set the data
            PieData data = new PieData(dataset);        // initialize Piedata
            pieChart.setData(data);
    
    	// colors according to the dataset
            dataset.setColors(colors);
    
    	// adding legends to the desigred positions
            Legend l = pieChart.getLegend();
            l.setTextSize(14f);
            l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
            l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
            l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
            l.setDrawInside(false);
            l.setTextColor(Color.BLACK);
            l.setEnabled(true);
    
    	// calling method to set center text
            pieChart.setCenterText(generateCenterSpannableText());
    	// if no need to add description
            pieChart.getDescription().setEnabled(false);
    	// animation and the center text color
            pieChart.animateY(5000);
            pieChart.setEntryLabelColor(Color.BLACK);
        
    // If we need to display center text with textStyle
        private SpannableString generateCenterSpannableText() {
    
            SpannableString s = new SpannableString("TOTAL SPENT\n$ 4000");
            s.setSpan(new RelativeSizeSpan(2f), 11, s.length(), 0);
            s.setSpan(new StyleSpan(Typeface.BOLD), 11, s.length(), 0);
            return s;
        }

     

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: