Labels

Wednesday, July 6, 2011

Chart and Graph Library for Android

This post is deprecated! Visit the always-up-to-date GraphView page.


I would like to introduce to my own graph library for Android.
// GraphView creates a scaled line graph with x and y axis labels.
public class GraphView extends LinearLayout {

What is GraphView

GraphView is a library for Android to programmatically create flexible and nice-looking diagramms. It is easy to understand, to integrate and to customize it.
At the moment there are two different types:
  • Line Charts
  • Bar Charts

GraphView was originally created by arnodenhond, but I did a complete remake and so now I can say it is "my" library ;-)

Tested on Android 1.6, 2.2, 2.3 and 3.0 (honeycomb, tablet).

Features


  • Two chart types
    Line Chart and Bar Chart.
  • Custom labels
    The labels for the x- and y-axis are generated automatically. But you can set your only labels, Strings are possible.
  • Background
    Optionally draws a light background under the diagramm stroke.
  • Handle incomplete data
    It's possible to give the data in different frequency.
  • Viewport
    You can limit the viewport so that only a part of the data will be displayed.
  • Scrolling
    You can scroll with a finger touch move gesture.
  • Scaling / Zooming
    Since Android 2.3! With two-fingers touch scale gesture (Multi-touch), the viewport can be changed.

How to use

To show you how to integrate the library into an existing project I will demonstrate the GraphView-Demos project.

Checkout GraphView library and Demos

First, you have to checkout the graphview library and the demos project from github and import them into your workspace in eclipse.
cd workspace/
git clone git://github.com/jjoe64/GraphView.git
git clone git://github.com/jjoe64/GraphView-Demos.git

Use library - project property

The project GraphView-Demos must use the GraphView project as Android library. For this, go to the project properties of GraphView-Demos, on "Android" make sure that the GraphView project is used as library.

Maybe you have to add the GraphView project to the build path of GraphView-Demos project. But Eclipse will help you...

Understand SimpleGraph.java

When you look into this file you see how easy it is to create a simple graph.
// graph with dynamically genereated horizontal and vertical labels
GraphView graphView = new LineGraphView(
  this // context
  , new GraphViewData[] {
    new GraphViewData(1, 2.0d)
    , new GraphViewData(2, 1.5d)
    , new GraphViewData(2.5, 3.0d) // another frequency
    , new GraphViewData(3, 2.5d)
    , new GraphViewData(4, 1.0d)
    , new GraphViewData(5, 3.0d)
  } // data
  , "GraphViewDemo" // heading
  , null // dynamic labels
  , null // dynamic labels
);
LinearLayout layout = (LinearLayout) findViewById(R.id.graph1);
layout.addView(graphView);
There isn't much to say about that. But one important thing: Always give to data array sorted by x-values (ASC)!!
For performance, the library doesn't sort the data.

Zoom and Scrolling - Advanced.java

For demonstration the zooming and scrolling feature we need more example data. So in Advanced.java I generate a few data sets with random and sinus algorithm.
// draw random curve
int num = 1000;
GraphViewData[] data = new GraphViewData[num];
double v=0;
for (int i=0; i<num; i++) {
 v += 0.2;
 data[i] = new GraphViewData(i, Math.sin(Math.random()*v));
}
// graph with dynamically genereated horizontal and vertical labels
GraphView graphView = new LineGraphView(
  this
  , data
  , "GraphViewDemo"
  , null
  , null
);
// set view port, start=2, size=10
graphView.setViewPort(2, 10);
graphView.setScalable(true);
graphView.setDrawBackground(true);
LinearLayout layout = (LinearLayout) findViewById(R.id.graph2);
layout.addView(graphView);

Custom formatter for axis

To format the x and y axis you can use a custom formatter:
GraphView graph = new LineGraphView(
  mActivity
  , values
  , currentGraphDescription // title
  , null // horlabels
  , null // verlabels
) {
 @Override
 protected String formatLabel(double value, boolean isValueX) {
  if (isValueX) {
   // convert from unix timestamp to human time format
   return dateTimeFormatter.format(new Date((long) value*1000));
  } else {
   // y-axis, use default formatter
   return super.formatLabel(value, isValueX);
  }
 }
};

That's all about it for now.

Follow on github:



GraphView in action

YouTube: Chart and Graph Library for Android Demo

55 comments:

  1. Dear Sir,

    I downloaded your GraphView & GraphView-Demos, when I try to include GraphView into GraphView-Demos, R.java was disappear and cannot build normally. Could you show me how to fix it?

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Before cleaning first Build Project and then Clean Project I hoipe it will work!

      Delete
  2. try to clean and rebuild the projects.
    In eclipse: Project -> Clean ...

    ReplyDelete
  3. error in import android.view.ScaleGestureDetector
    it works in android 2.1??

    tnks

    ReplyDelete
  4. oh well...it works.... how can i name the x-axis and y-axis in GraphViewDemo?.. and how can change the graph form? ( like the images: https://github.com/jjoe64/GraphView/raw/master/GVLine.jpg )
    thx

    ReplyDelete
  5. I did project -> clean and also fix project problem, but no help. I could not confirm if cause by my environment. I use Eclipse - Indigo, and newest ADT.

    ReplyDelete
  6. @Shermano
    I added a new section "Custom formatter for axis".

    ReplyDelete
  7. When can we see the bar charts integrated in this library ???

    ReplyDelete
  8. I don't need bar charts, so I won't integrate it. But it's on GitHub and everybody can contribute.

    ReplyDelete
  9. Jones91, I have integrated bar charts in your code. I am going to commit it on Github :))

    ReplyDelete
    Replies
    1. Hi Hameed,
      I've a usecase where each bar should come with a number on top it. Did you taken care of this usecase in Github. If so can you give me a hint how to enable it in the project.
      Thanks in advance.

      Delete
  10. great library. Simple is beautiful ;)

    ReplyDelete
  11. Does this support multiple plots on the same axis?

    ReplyDelete
  12. @Boozel
    not at the moment.. maybe in future...

    ReplyDelete
  13. Hi, Jonas,
    Could you tell me, what type of license for this library?

    ReplyDelete
  14. License for this library: LGPL
    http://en.wikipedia.org/wiki/LGPL

    ReplyDelete
  15. Cool! Anyone implemented sparklines yet?

    ReplyDelete
  16. Superb library, It saved me months of research and work for my line chart. Thanks Jones

    ReplyDelete
  17. How i can set y-axis with 4 point ?
    thanks you

    ReplyDelete
  18. Not able to zoom. Kindly suggest.
    Thanks in Advance !!

    ReplyDelete
  19. @Rathika
    Zooming only since Android 2.3!

    ReplyDelete
  20. Thanks Jones. Can we test zoom feature in 3.2 simulator/ we can test only in tablet. We are trying with Graph View demo example.

    Kindly suggest.

    ReplyDelete
    Replies
    1. Hi... I Just create with Line Graph demo..GraphViewSeries can be Visiable.... But How to Remove series in android... Pls Help Me.

      Delete
  21. @Rathika
    you have to use the two-finger gesture to scale. So you can't do this in AVD.

    ReplyDelete
  22. I owe you a beer man....awesome...thanks

    ReplyDelete
  23. I got : Cannot instantiate the type GraphView
    can someone help ?

    ReplyDelete
  24. Hi Jones,

    Can we zoom y-axis similar to x-axis with existing library. Kindly suggest . Thanks !!!

    Regards
    Rathika

    ReplyDelete
  25. Hello,
    How can i convert this graphics to an image ? Please help me :)
    Thanks

    ReplyDelete
  26. Hi,

    I'm just wondering if you can scale a Graph with custom label.
    I want to scale a graph showing dates in the x axis, but it transform to integer.

    Thanks

    ReplyDelete
    Replies
    1. no, then you need to use a labelformatter

      Delete
  27. The app run at main screen is ok (it mean the screen we will choose chart kind). But when i choose any chart kind, "force close" happens. Please check it

    ReplyDelete
  28. I want x and y axis to be constant like x starts from 0 and ends at 100 and similarly for y.And i want to plot point on it. So can anyone help me in this.

    ReplyDelete
  29. Have you tested this with Android 4.0? I'm having problems with zooming and scrolling; the scrolling works but is a little erratic and the with zooming it only updates if you pinch and then scroll. Also, would it be possible to implement a feature to let you select a point on the graph and show the values at that point?

    ReplyDelete
  30. hey can these graphs be made dynamic?

    ReplyDelete
  31. this is a good demo for draw a graph in android.
    thank you.
    keep updating new thing in android.

    ReplyDelete
  32. Can you please tell me how can i use a Label Formatter to get my
    x-axis in the form of dates in graph view demo

    ReplyDelete
  33. can u please tell me how can i use in mono for android c#

    ReplyDelete
  34. Hello your library is very nice.
    But is it possible to set with multiple series for east serie this one vertical layout. like this one.
    http://static.nbd-online.nl/pictures/Luxalon%20BKA%20Acoustic+,%20plafondsysteem%20voor%20betonkernactivering%20-%20grafiek_2-5.jpg

    ReplyDelete
  35. Any way I could press SEND button on mms/sms application programatically?

    ReplyDelete
  36. Thanks for the excellent chart. I want to change the colour of the series and am unable to do it in 3.0 jar. Is 3.1 jar available for download Please provide link

    or please advise on how to add colour style info to series,

    ReplyDelete
  37. Unable to use GraphViewData datatype ??

    ReplyDelete
  38. Is it possible to have 2 sets of values for the X axis one in the right and the other in the left? for example on the right I have inches and on the left I have centimeters.

    ReplyDelete
  39. Hi,

    I want to use 9 patch images to show the bargraph. Is this possible?
    Please share one example for using the same.
    Thanks

    ReplyDelete
  40. Hi, I just started with simple grap demo , and tried to use it for my simple work .. but in the x-axis I want to set the scale from 0 to30(each scacle should increment by 1) .. for the demo I just tried to put my all values for each scale ,, but the scale shows only 11 values ..

    Pls help to how to set the scale for all n values

    ReplyDelete
  41. Hi... I Just create with Line Graph demo..GraphViewSeries can be Visiable.... But How to Remove series in android... anybody Pls Help Me...

    ReplyDelete
  42. This comment has been removed by the author.

    ReplyDelete
  43. Hello your library is very good.
    I need some help to implement a particular task i.e.
    How can i handle on click event on particular data point?
    Is there any way of doing this?
    Please help me....

    ReplyDelete
  44. Dear sir this is not work pls help me
    // sin curve
    int num = 10;
    GraphViewData[] data = new GraphViewData[num];
    double v=0;
    int n=-5;
    for (int i=n; i<num; i++) {
    v += 0.2;
    data[i] = new GraphViewData(i, Math.sin(v));
    }
    GraphViewSeries seriesSin = new GraphViewSeries("Probe 3", new GraphViewSeriesStyle(Color.rgb(0, 0, 255), 3), data);

    i want to draw the wave from -5,-4..
    thats why i start i value is -5

    pl help me

    ReplyDelete