1. Daniel Nadeau
  2. HoloGraphLibrary

Wiki

Clone wiki

HoloGraphLibrary / Home

Welcome

This is a library written to allow beautiful graphs and charts to be easily incorporated into your Android application. Included are:

  • LineGraph view
  • BarGraph view
  • PieGraph view

LineGraph BarGraph PieGraph

Usage

LineGraph View

<com.echo.holographlibrary.LineGraph
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/graph"/>
Line l = new Line();
LinePoint p = new LinePoint();
p.setX(0);
p.setY(5);
l.addPoint(p);
p = new LinePoint();
p.setX(8);
p.setY(8);
l.addPoint(p);
p = new LinePoint();
p.setX(10);
p.setY(4);
l.addPoint(p);
l.setColor(Color.parseColor("#FFBB33"));

LineGraph li = (LineGraph)findViewById(R.id.graph);
li.addLine(l);
li.setRangeY(0, 10);
li.setLineToFill(0);

BarGraph View

<com.echo.holographlibrary.BarGraph
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/graph"/>
ArrayList<Bar> points = new ArrayList<Bar>();
Bar d = new Bar();
d.setColor(Color.parseColor("#99CC00"));
d.setName("Test1");
d.setValue(10);
Bar d2 = new Bar();
d2.setColor(Color.parseColor("#FFBB33"));
d2.setName("Test2");
d2.setValue(20);
points.add(d);
points.add(d2);

BarGraph g = (BarGraph)findViewById(R.id.graph);
g.setBars(points);

Animation

To animate each existing bar, call bar.setGoalValue(floatnewFloatValue) on each and every bar, then call bargraph.animateToGoalValues().

                for (Bar b : barGraph.getBars()) {
                    b.setGoalValue((float) Math.random() * 1000);
                    b.setValuePrefix("$");//display the prefix throughout the animation
                }
                barGraph.setDuration(1200);//default if unspecified is 300 ms
                barGraph.setInterpolator(new AccelerateDecelerateInterpolator());//Only use over/undershoot  when not inserting/deleting
                barGraph.setValueStringPrecision(1); //1 decimal place. 0 by default for integers.
                barGraph.animateToGoalValues();

Insertion and Deletion

To mark a bar that was just added to animate an insertion, set the bar.mAnimateSpecial = HoloGraphAnimate.ANIMATE_INSERT . Set it's goal value to the desired final height and it's value to 0 to make it grow throughout the animation. To mark a bar for a deletion animation set the bar.mAnimateSpecial = HoloGraphAnimate.ANIMATE_DELETE . Set it's goal value to 0 to make it shrink throughout the animation.

Do not use under/overshoot interpolators when inserting or deleting

To make sure these animations are only played once, remove deleted bars and set the rest to ANIMATE_NORMAL in a custom animation listener like so

barGraph.setAnimationListener( new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {}

                @Override
                public void onAnimationEnd(Animator animation) {
                    ArrayList<Bar> newBars = new ArrayList<Bar>();
                    //Keep bars that were not deleted
                    for (Bar b : bg.getBars()){
                        if (b.mAnimateSpecial != HoloGraphAnimate.ANIMATE_DELETE){
                            b.mAnimateSpecial = HoloGraphAnimate.ANIMATE_NORMAL;
                            newBars.add(b);
                        }
                    }
                    bg.setBars(newBars);
                }

                @Override
                public void onAnimationCancel(Animator animation) {
                //called when starting an animation that is already ongoing or barGraph.cancelAnimating();
                 }

                @Override
                public void onAnimationRepeat(Animator animation) {}
            };);

PieGraph View

<com.echo.holographlibrary.PieGraph
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/graph"/>
PieGraph pg = (PieGraph)findViewById(R.id.graph);
PieSlice slice = new PieSlice();
slice.setColor(Color.parseColor("#99CC00"));
slice.setValue(2);
pg.addSlice(slice);
slice = new PieSlice();
slice.setColor(Color.parseColor("#FFBB33"));
slice.setValue(3);
pg.addSlice(slice);
slice = new PieSlice();
slice.setColor(Color.parseColor("#AA66CC"));
slice.setValue(8);
pg.addSlice(slice);

Customization

To turn the pie into a donut call

pg.setInnerCircleRatio(int holeSize);

To put padding between each slice call

pg.setPadding(int padding);

Animation

To animate each existing slice, call slice.setGoalValue(float newFloatValue) on each and every slice, then call pg.animateToGoalValues().

                for (PieSlice s : pg.getSlices())
                    s.setGoalValue((float)Math.random() * 10);
                pg.setDuration(1000);//default if unspecified is 300 ms
                pg.setInterpolator(new AccelerateDecelerateInterpolator());//default if unspecified is linear; constant speed
                pg.setAnimationListener(getAnimationListener());//optional
                pg.animateToGoalValues();

Have fun!

Updated