GraphLib: An open source Android library for graphs

An easy way to draw graphs and data plots in your Android applications

1 2 Page 2
Page 2 of 2

Example 1: Graphing y = x2

Let's start by adding a simple function to a graph. If your version of Android Studio is configured to use Java 8 or later, you can use lambda expressions as shown in Listing 6.

Listing 6. Using a lambda expression.


Graph graph = new Graph.Builder()
    .addFunction(x -> x*x)
    .build();

If you are using a version of Java prior to Java 8, you will need to create an instance of a class that implements the Function interface. I've done this in Listing 7 using an anonymous class.

Listing 7. Using an anonymous class


Function xSquared = new Function()
  {
    public double apply(double x)
      {
        return x*x;
      }
  };
Graph graph = new Graph.Builder()
    .addFunction(xSquared)
    .build();

Figure 3 shows how this application would look on an Android device.

firstgraph John I. Moore

Figure 3. Graph of y = x2

Note: The remaining examples will use only lambda expressions for mathematical functions.

Example 2: Adding color and setting world coordinates

For this example we'll make a few changes to the previous example. First, let's change the color of the graph to red. There are a couple of ways to do this. We could set the default color for functions by calling method setFunctionColor() before calling addFunction(). Another option is to call the overloaded version of addFunction(), which has two parameters, both the function to be graphed and the color to be used for that graph. This example demonstrates the latter approach.

For another change to the previous example, let's adjust the world coordinates (a.k.a. window) for the graph. Notice how much of the graph in Figure 3 is in the top half of the view. For this example we'll let the x-axis range from -5 to 5 and the y-axis range from -2 to 10. When we make this change, we also need to modify the "tick" marks and labels on the axes, using calls to methods setXTicks() and setYTicks(). Listing 8 shows the code to build this graph.

Listing 8. Adding color and setting world coordinates


Graph graph = new Graph.Builder()
    .addFunction(x -> x*x, Color.RED)
    .setWorldCoordinates(-5, 5, -2, 20)
    .setXTicks(new double[] {-4, -3, -2, -1, 1, 2, 3, 4})
    .setYTicks(new double[] {2, 4, 6, 8, 10, 12, 14, 16, 18})
    .build();

Figure 4 shows the resulting application running on an Android device.

firstgraphwithcolor John I. Moore

Figure 4. Adding color and setting world coordinates

Example 3: Graphing three functions

Observe that some of the builder methods shown in Listing 2 start with the set prefix, and some start with the add prefix. Those starting with set control access to a single attribute value, but those starting with add can be called multiple times to append to a list of similar attribute values. For example, we can call either of the overloaded versions of the addFunction() method to add more than one function to a graph.

Listing 9 shows how to add three functions, each with different colors.

Listing 9. Graphing two functions


Graph graph = new Graph.Builder()
    .addFunction(x -> sin(x), Color.RED)
    .addFunction(x -> 0.1*x*x*x, Color.BLUE)
    .addFunction(x -> 1/x, Color.GREEN)
    .setWorldCoordinates(-2*Math.PI, 2*Math.PI, -5, 5)
    .setXTicks(new double[] {-3, -1, 1, 3})
    .setYTicks(new double[] {-3, -1, 1, 3})
    .build();

Figure 5 shows the application running on an Android device.

secondgraph John I. Moore

Figure 5. Graphing three functions

Example 4: Straight line plus data points

This example illustrates how to add data points to a graph. When a set of points visually appear to be in a pattern that is "almost" a straight line, it is possible use a technique known as linear regression to determine the line that best fits the data points. A detailed discussion of linear regression is beyond the scope of this article, but I have used that technique (with some numerical rounding) to find the formula for the line used in this example.

Listing 10 shows how to add both a function (in this case a straight line) and a set of four data points to a graph

Listing 10. Straight line plus data points


Graph graph = new Graph.Builder()
    .addFunction(x -> x*x -5)
    .addPoints(new Point[] { new Point(-6, -6), new Point(-2, 3),
                             new Point(2, 6),   new Point(5, 7)},
                             Color.RED)
    .build();

Figure 6 shows the application running on an Android device.

thirdgraph John I. Moore

Figure 6. Straight line plus data points

Example 5: Line graph

This example illustrates how to add a line graph. A line graph is defined by a set of points. Defining a line graph to be drawn on the screen is similar to defining a set data points to be plotted on the screen. The difference is that when defining a line graph, we need to call method addLineGraph() instead of calling addPoints(). Listing 11 shows how to add a line graph.

Listing 11. Line graph


Point[] points =
  {
    new Point(-10, 3), new Point(-8, 4),  new Point(5, 2),
    new Point(0, 0),   new Point(2, -6),  new Point(3,3),
    new Point(7,5),    new Point(9, 9),   new Point(12, 6)
  };
Graph graph = new Graph.Builder()
    .addLineGraph(points, Color.RED)
    .build();

Figure 7 shows the application running on an Android device.

fourthgraph John I. Moore

Figure 7. Line graph on an Android device

Example 6: Tracking weight for one month

For this example let's assume that we have a weight-tracking application that shows weights measured for several days throughout a given month. Similar to the example at the beginning of this article (and depicted in Figure 1), this example combines a horizontal goal weight line and a line graph showing actual weight measurements. Whereas the example shown in Figure 1 used string labels on the horizontal axis, this one will use numbers representing the days of the month when weights were taken.

Listing 12 shows the code to add both a horizontal green line for the goal weight and a line graph for the measured weight.

Listing 12. Tracking weight for one month


Point[] points =
  {
    new Point(1, 178),  new Point(4, 179),  new Point(7, 179),
    new Point(10, 181), new Point(13, 180), new Point(16, 182),
    new Point(19, 182), new Point(22, 184), new Point(25, 183),
    new Point(28, 185), new Point(31, 185)
  };
Graph graph = new Graph.Builder()
    .setWorldCoordinates(-5, 33, 165, 191)
    .setAxes(0, 167)
    .setXTicks(new double[] {5, 10, 15, 20, 25, 30})
    .setYTicks(new double[] {170, 175, 180, 185, 190})
    .addFunction(x -> 170, Color.GREEN)
    .addLineGraph(points, Color.RED)
    .build();

Figure 8 shows the application running on an Android device.

weightformonth John I. Moore

Figure 8. Tracking weight for one month

Example 7: Tracking weight for a year

We now come full circle back to that motivating example from Figure 1, showing weight measurements for an entire year. Similar to Example 6 above, this application combines a horizontal goal weight line together with a line graph showing actual weight measurements. But in this case we've added nonnumeric (string) labels for the x-axis.

Note, too, that all previous examples have used methods setXTicks() and setYTicks() to specify the placement of numeric labels for the axes. In this example, we use setXLabels() for the month abbreviations on the x-axis, but still use setYTicks() to show the numerical values for weights on the y-axis. Also note that I've used only the first letter of each month, accounting for space limitations on most Android phone screens.

Listing 13 shows the source code to create the graph.

Listing 13. Tracking weight for a year


Point[] points =
  {
    new Point(1, 178),  new Point(2, 179),  new Point(3, 179),
    new Point(4, 181),  new Point(5, 180),  new Point(6, 182),
    new Point(7, 182),  new Point(8, 184),  new Point(9, 183),
    new Point(10, 185), new Point(11, 185), new Point(12, 186)
  };
Label[] xLabels =
  {
    new Label(1, "J"),  new Label(2, "F"),  new Label(3, "M"),
    new Label(4, "A"),  new Label(5, "M"),  new Label(6, "J"),
    new Label(7, "J"),  new Label(8, "A"),  new Label(9, "S"),
    new Label(10, "O"), new Label(11, "N"), new Label(12, "D")
  };
Graph graph = new Graph.Builder()
    .setWorldCoordinates(-2, 13, 165, 191)
    .setAxes(0, 167)
    .setXLabels(xLabels)
    .setYTicks(new double[] {170, 175, 180, 185, 190})
    .addFunction(x -> 170, Color.GREEN)
    .addLineGraph(points, Color.RED)
    .build();

For convenience, Figure 9 simply repeats Figure 1, showing the application running on an Android device.

weightforyear John I. Moore

Figure 9. Tracking weight for the year (revisited)

Conclusion

Many Android applications can make effective use of graphs and data plots to help illustrate relationships, depict data trends, and track progress versus goals. I created the open source library GraphLib in order to support this type of functionality. As you've seen, GraphLib is an easy-to-use library for graphing functions, plotting data points, and drawing line graphs. This library is freely available, and you can get the source code for it here.

1 2 Page 2
Page 2 of 2