¡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.
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.
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.
