Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art
HomeF.A.Q.
Community
Writing Recipes
Login
Using AndroidPlot to display charts and graphs in your Android application.
Chapter 6. Graphics
Contributed by Rachee Singh 2011-07-22 11:25:46 (updated 2011-09-28 07:23:00)
In Published Edition? Yes
0
Votes
Problem

Depicting data graphically in an Android application.

Solution

There are many 3rd party graph libraries for Android available. In this example we make use of AndroidPlot library (open source) to depict a simple graph.

Discussion

Step 1: Download AndroidPlot library from here: http://androidplot.com/wiki/Download (any version).

Step 2: Create a new Android project and add the AndroidPlot library to the new project. To do this, create a new folder in the project folder by the name 'lib'. To this folder add the downloaded AndroidPlot jar file (named something like this: 'Androidplot-core-0.4a-release.jar'). (At this stage you should be having directories like src, res, gen, lib.)

Step 3: To use the library, it must be added to the build path. For this, in Eclipse, right click the .jar you added and select the "Build Path -- Add to Build Path" option. This will show another directory called 'Referenced Libraries' in the Eclipse project.

Step 4: In our sample application, we are hard-coding some data and showing the plot corresponding to the data in the application. So, we require to add an XY plot to our XML layout (main.xml). Here's what main.xml looks like with a XYPlot component in a linear layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
  <com.androidplot.xy.XYPlot
    android:id="@+id/mySimpleXYPlot"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    title="Stats"/>
</LinearLayout>

Step 5: Get a reference to the XYplot defined in the XML.

         mySimpleXYPlot = (XYPlot) findViewById(R.id.mySimpleXYPlot);
	

Step 6: Initialize two arrays of numbers for which the plot will be displayed.

	// Create two arrays of y-values to plot:	
	Number[] series1Numbers = {1, 8, 5, 2, 7, 4};
	Number[] series2Numbers = {4, 6, 3, 8, 2, 10};
	

Step 7: Turn the above arrays into XYSeries:

	XYSeries series1 = new SimpleXYSeries(
	Arrays.asList(series1Numbers),          // SimpleXYSeries takes a List so turn our array into a List
	SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, // Y_VALS_ONLY means use the element index as the x value
	"Series1");                             // Set the display title of the series
	XYSeries series2 = new SimpleXYSeries(Arrays.asList(series2Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, 
	"Series2");
	

Step 8: Create a formatter to use for drawing a series using LineAndPointRenderer:

	LineAndPointFormatter series1Format = new LineAndPointFormatter(
		Color.rgb(0, 200, 0),                   // line color
		Color.rgb(0, 100, 0),                   // point color
		Color.rgb(150, 190, 150));              // fill color (optional)
	

Step 9: Add series1 and series2 to the xyplot:

	mySimpleXYPlot.addSeries(series1, series1Format);
	mySimpleXYPlot.addSeries(series2, new LineAndPointFormatter(Color.rgb(0, 0, 200), Color.rgb(0, 0, 100), Color.rgb(150, 150, 190)));
	

Step 10: Make it look cleaner:

	// Reduce the number of range labels
    mySimpleXYPlot.setTicksPerRangeLabel(3);
    
    // By default, AndroidPlot displays developer guides to aid in laying out your plot.
    // To get rid of them call disableAllMarkup():
    mySimpleXYPlot.disableAllMarkup();
      
    mySimpleXYPlot.getBackgroundPaint().setAlpha(0);
    mySimpleXYPlot.getGraphWidget().getBackgroundPaint().setAlpha(0);
    mySimpleXYPlot.getGraphWidget().getGridBackgroundPaint().setAlpha(0);   
	

Step 11: Run the application! This is how it looks:

	
	
Code Repository Subdirectory The code example is in the "AndroidPlot" subdirectory of our GitHub repo, and can be viewed at https://github.com/androidcook/Android-Cookbook-Examples/tree/master/AndroidPlot You can also download the complete collection of examples at https://github.com/androidcook/Android-Cookbook-Examples/.
Comments (0)
Leave a comment
Edit History (7)
There are no (moderator-approved) comments on this recipe yet.