Jul 27, 2013

Displaying your apps in Graphs and Charts With HoloGraphLibrary

By
It’s no secret that visual aids such as charts and graphs help in effectively disseminating numerical information. After all, who really wants to read an essay of numbers? That feeling is only exacerbated when the reading is done on a small cell phone screen. Thankfully, as apps are becoming more and more visually enriched, dull data visualization is nearly a thing of the past.
To help developers better display exactly the data they need in their apps,We created HoloGraphLibrary. Forked from a separate base library by developer Daniel Nadeau, Androguide.fr’s offering builds on the original by adding support for various unit display types and compatibility with Android Studio and Gradle.
In addition to providing his forked library, Androguide.fr has also included a comprehensive guide on how to use the library in his thread. So what are you waiting for? Don’t display numbers as text; it’s not pretty.

 If you need to display graphs and/or charts in your application in a stylish, holo-compliant way, this is your go-to library.

I especially needed the BarGraph view for a project I am preparing for the Samsung Smart App Challenge 2013, but unfortunately, the base library by Daniel Nadeau was hardcoding the prepended $ unit, while my project requires several different other units to be displayed.

So I forked the library and added a couple features (I will be adding more over time), so I thought I would share:
  • Defining the unit programmatically, using BarGraph.setUnit(String unit)
    Code:
    // Example
    BarGraph bg = (BarGraph) findViewById(R.id.bargraph);
    bg.setUnit("m");
  • Appending or prepending the unit programmatically using #BarGraph.appendUnit(Boolean doAppend)
    Code:
    // Example
    BarGraph bg = (BarGraph) findViewById(R.id.bargraph);
    bg.appendUnit(true);
  • ==> The result would be :



 Additionnally, I converted the library for proper compatibility with Gradle & Android Studio (IntelliJ).
You can find my fork on Github at the following url: https://github.com/Androguide/HoloGraphLibrary

If you haven't heard of this library before, it currently offers the following views:








 You can use them in your project as follows:

  • LineGraph:
    XML
    Code:
    <com.echo.holographlibrary.LineGraph
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:id="@+id/graph" />
    Java
    Code:
    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:
    XML
    Code:
    <com.echo.holographlibrary.BarGraph
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:id="@+id/graph" />
    Java
    Code:
    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);
    g.setUnit("$");
    g.appendUnit(true);
  • PieGraph:
    XML
    Code:
    <com.echo.holographlibrary.PieGraph
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:id="@+id/graph" />
    Java
    Code:
    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);

If you guys have ideas or feature requests, please share. Pull-requests are obviously welcome.

BTW, anyone else participating in the SSAC this year? The $800k prize-money is mindblowing.

0 comments:

Post a Comment

Back to Top