Monday, November 26, 2012

Another Android Chart

This post is part of series about building a simple Android App.
If you haven't done so yet, read an overview of these posts here.

Never design what you can steal - Jeff Atwood.

In the dual pursuit of building a pretty Android app and increasing my Android development skills, I created my own "view" which displayed a custom drawn pie chart.  Overall, it was a great success.  But after going through the process of designing a custom view (for a rather standard shape) once, I thought it would be good to 'steal' something that works right out of the box.  Or in other words, "good programmers code, great re-use" - not sure where that's from.

There's an app, I mean a library, for that
I thought it would be nice to add a line chart to my Android app.  After some research, I ended up working with charting library called achartengine a try.  Here are my notes on what transpired.

AchartEngine tutorial with eclipse
1. Set up the library.
- Download it.
- Unzip the file and find the file achartenginedemo/lib/achartengine-1.0.0.jar .
- Copy that file into your <your_project_name>/libs
- Open your workspace/project in eclipse.
- If you don't see the file under the libs directory, right click on the folder and choose refresh.
- Right click on the achartengine jar file, go to 'Build Path', go to 'Add to Build Path'. You should see the achartengine jar file under the Referenced Libraries section now.

2. Create a class that will create the chart intent.
Here's my code for it.
public class ALineChart 
{
    public Intent getIntent( Context context )
    {
        int[] x = { 1 , 2, 3, 7};
        int[] y = { 2, 4, 16, 64};
  
        TimeSeries series = new TimeSeries("Line 1");
        for ( int i = 0; i < x.length; i++ )
        {
            series.add( x[i], y[i] );
        }
  
        XYMultipleSeriesDataset dataset = 
            new XYMultipleSeriesDataset();
        dataset.addSeries(series);
  
        XYSeriesRenderer renderer = new XYSeriesRenderer();
        renderer.setPointStyle( PointStyle.CIRCLE );
        renderer.setFillPoints( true );
        
        XYMultipleSeriesRenderer mrenderer = new 
            XYMultipleSeriesRenderer();
        mrenderer.addSeriesRenderer(renderer);
        
        Intent intent = ChartFactory.getLineChartIntent( 
            context, dataset,mrenderer, "My first line" );
        return intent;
    }
}

3.  Create the object to make the chart intent.
I added this from a fragment, but it could be called from an activity.
public void some_event_handler()
{
    ALineChart aChart = new ALineChart();
    Intent aChartIntent = aChart.getIntent( 
        getActivity().getApplicationContext() );    
    startActivity( aChartIntent );
}
That is just a simple example with some toy data.  I may update later if I find some interesting gotcha's or figure out how to make this all work better.

Update: After some struggling, I found a clip on Youtube that really explained this process much better than I could.  If the link doesn't work, just search for achartengine.  I subsequently updated my tutorial to fall in line with what I saw on youtube

No comments:

Post a Comment