Android (VI): Creación de gráficas estadísticas con Android Plot

¡Dos meses después de publicar el último tutorial vuelvo a la carga con un nuevo capítulo de esta emocionante aventura de ayudas para programar en Android! Desde que publiqué mi aplicación Train Yourself en el market de Android - enlace al market - , hace casi un mes (y hoy precisamente puedo decir muy contento que he superado las 1000 descargas) me han preguntado ya varias personas sobre cómo hice las gráficas estadísticas en la aplicación y todas ellas les dirigí a una página bastante completa y a la vez sencilla: Android Plot, y ahora intentaré hacer un breve resumen sobre cómo se usan.

WEB OFICIAL ANDROID PLOT PARA DESCARGAR LA LIBRERÍA

Con Android Plot en concreto puedes realizar montones de gráficas distintas, pero aquí sólo me encargaré de indicaros brevemente cómo utilizarla para hacer tareas simples, ya que yo personalmente no he necesitado nada más.

1. Instalación de la librería en el proyecto

Una vez descargadas las librerías, debemos incluirlas en la carpeta LIB del proyecto, que es la que contiene las librerías externas al SDK de Android. Si la carpeta no existe podemos crearla sin ningún problema. Una vez añadidos los archivos, refrescamos la carpeta raíz del proyecto para que sean visibles desde Eclipse, y entonces debemos indicar que dichos archivos son librerías que deben usarse con el proyecto: Hacemos clic derecho a cada una de ellas y las importamos tal y como se muestra en la imagen.

Ver imagen más grande

2. Incluir el elemento (view) de la gráfica estadística en el layout en el que queremos mostrarla

Una vez añadida la librería ya podemos hacer uso de sus elementos sin que no de fallos el compilador. El siguiente paso es añadir al layout que deseemos el elemento VIEW llamado com.androidplot.xy.XYPlot correspondiente a la gráfica, que será el que se mostrará en pantalla. Se pueden añadir junto a él otros elementos como botones o algún TextView que se usen a modo de título.

<?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="100px"
    android:layout_marginTop="10px"
    android:layout_marginLeft="10px"
    android:layout_marginRight="10px"
    title="A Simple XYPlot Example"/>
</LinearLayout

3. Introducir los datos desde el Activity que usa el layout 

Por último, una vez añadida la gráfica a la vista de diseño sólo nos quedaría indicarle qué datos se quieren mostrar. El código que se muestra a continuación (copiado literalmente desde la página original y comentado en español) nos muestra cómo indicar a la gráfica qué datos tiene que mostrar.

package com.example;
 
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import com.androidplot.xy.SimpleXYSeries;
import com.androidplot.series.XYSeries;
import com.androidplot.xy.*;
 
import java.text.DecimalFormat;
import java.util.Arrays;
 
public class MyActivity extends Activity
{
 
    private XYPlot mySimpleXYPlot;
 
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        // Inicializamos el objeto XYPlot búscandolo desde el layout:
        mySimpleXYPlot = (XYPlot) findViewById(R.id.mySimpleXYPlot);
 
        // Creamos dos arrays de prueba. En el caso real debemos reemplazar

        // estos datos por los que realmente queremos mostrar

        Number[] series1Numbers = {1, 8, 5, 2, 7, 4};
        Number[] series2Numbers = {4, 6, 3, 8, 2, 10};
 
        // Añadimos Línea Número UNO:
        XYSeries series1 = new SimpleXYSeries(
                Arrays.asList(series1Numbers),  // Array de datos
                SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, // Sólo valores verticales
                "Series1"); // Nombre de la primera serie
 
        // Repetimos para la segunda serie
        XYSeries series2 = new SimpleXYSeries(Arrays.asList(series2Numbers
), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series2");
 
        // Modificamos los colores de la primera serie
        LineAndPointFormatter series1Format = new LineAndPointFormatter(
                Color.rgb(0, 200, 0),                   // Color de la línea
                Color.rgb(0, 100, 0),                   // Color del punto
                Color.rgb(150, 190, 150));              // Relleno
 
        // Una vez definida la serie (datos y estilo), la añadimos al panel
        mySimpleXYPlot.addSeries(series1, series1Format);
 
        // Repetimos para la segunda serie
        mySimpleXYPlot.addSeries(series2, new LineAndPointFormatter
(Color.rgb(0, 0, 200), Color.rgb(0, 0, 100), Color.rgb(150, 150, 190)));
 
    }
}

Una vez terminado de añadir todo el código, sólo nos queda ejecutar nuestra aplicación y comprobar el resultado.

OTRAS ENTRADAS SOBRE ANDROID EN ESTE BLOG