Gráficos MPAndroidChart

=Gráficas con MPAndroidChart= Las gráficas con el MPAndroidChart, son bastantes personalizables, ya que es una poderosa herramienta para las vistas de gráficos en Android. Permite ademas, arrastrar,escalado y animaciones de los gráficos, que pueden ser de varios tipos, dependiendo de las necesidades y los tipos de datos, dominios que el usuario maneja.

Como Empezar a usar?
Para instalar la herramienta en un proyecto, simplemente es seguir los pasos que tiene la Wiki del Repositorio de Github.

Versiones
Hay que tener en cuenta que se debe trabajar con la ultima versión liberada, de la lista de versiones que maneja el proyecto.

Implementación de la funcionalidad
Como verán en la documentación del proyecto es necesario al principio tener un layout con el Chart que queramos implementar. Por ejemplo:

 

En este caso es claro que estamos hablando de un Chart, tipo BarChart, que seria un gráfico tipo Barras. Ahora bien, dentro de la actividad que controla dicho el layout activity_barchart.xml, que es BarChartActivity.java tenemos las siguientes funciones,

public void dataChartInsertion(List dataObjects, BarChart chart)

Que lo que hace es, aparte de introducir los datos que provienen del argumento dataObjects, le da cierta forma a los mismos. Por ejemplo, maneja los colores de cada barra, del texto, y si el usuario lo necesitare, agrupar los datos en conjuntos. En cierta forma, aparte de introducir los datos le da cierto formato a los mismos en el Chart.

private void setFormatAxis(BarChart mbarChart)

Como dice el nombre de la función, lo que hace es darle un formato personal, a los ejes de los gráficos, y de ser requerido, ponerle alguna que otra etiqueta a los datos.

Luego de haber visto más o menos lo que estas funciones auxiliares hacen, al crear el activity, se hace los siguiente con los puntos que se quieran colocar en el grafico.

//Points to be in the graph... List data = new ArrayList<>; data.add(new FloatDataPair(0,150f)); data.add(new FloatDataPair(1,130f)); data.add(new FloatDataPair(2,200f)); data.add(new FloatDataPair(3,300f)); data.add(new FloatDataPair(4,473f));

// The Chart whe are gonna use... BarChart barChart = findViewById(R.id.bar_chart); //Configs... Description desc = new Description; desc.setText(getString(R.string.chart_description)); desc.setTextColor(R.color.white); barChart.setDescription(desc); barChart.setBackgroundColor(getResources.getColor(R.color.white)); barChart.setDrawGridBackground(false); barChart.setMarker(new MyMarkView(this,R.layout.marker_tryout)); barChart.setScaleEnabled(true); barChart.animateXY(2000,2000);

//More configs to Axis representation... setFormatAxis(barChart);

// insertion of the entries ...       dataChartInsertion(data, barChart); // data introduccio & styling,others...

Aquí se agregan los puntos, descripción, se configura el background, el marcador y ademas se lo configura como una animación en ambos ejes.

Duplas de datos 
Se implemento un tipo de dato, para manejar la representación de los puntos en las gráficas, que están definidos en el paquete datacharts, definido en FloatDataPair.java. Permite una libertad de manejar los datos, tanto flotantes o enteros.

Documentación propia del Proyecto
El proyecto, cuenta con su propia guía donde uno puede consultar lo que necesite, esta todo bastante bien separado por tema, lo cual permite con mayor facilidad encontrar los tópicos necesarios para el usuario.

Tipos de Gráficos
La variedad de los tipos de gráficos que se pueden implementar en un proyecto, con este tipo de librería es enorme, aparte de permitir la combinación de ambos tipos. Para tener un gráficos que sean más entendible, y puedan hablar por si mismos, muchas veces es necesario agregarle ciertos extras que permitan estas mejoras.

Vistas de Marcadores
Estos permiten mostrar datos y/o iconos, cada vez que una persona selecciona un punto del gráfico, o alguna de las barras.

El proyecto, deja implementado, dos tipos de marcadores, para poder desplegar mayor cantidad de datos de un punto en especifico. Dentro del paquete mark están los dos, que son MyDialogMarkView.java y MyMarkView.java, el ultimo siendo de un uso más general. Veremos la implementación de este ultimo,

El tipo de dato MarkView, necesita un layout donde se puede mostrar justamente el marcador. Este se pasa al constructor una vez que necesitemos de un marcador en el gráfico.

public MyMarkView(Context context, int layoutResource) { super(context, layoutResource); // find your layout components textContent = (TextView) findViewById(R.id.markerContent); iconDraw = (ImageView)findViewById(R.id.markerImage); }

Luego se sobrescriben dos funciones que nos ayudan a actualizar el contenido del marcador segun sea el punto o entrada que estemos seleccionando.

@Override public void refreshContent(Entry e, Highlight highlight) { textContent.setText("" + e.getY + e.getX); iconDraw.setImageResource(R.drawable.bubble); // this will perform necessary layouting super.refreshContent(e, highlight); }

Y por ultimo, aparte del contenido del marcador, es necesario que la posicion de la vista sea la correcta;

private MPPointF mOffset;

@Override public MPPointF getOffset {

if(mOffset == null) { // center the marker horizontally and vertically mOffset = new MPPointF(-(getWidth / 2), -getHeight); }

return mOffset; }

Extra: Acceso al repositorio del proyecto MPAndroidChart
Dejamos el acceso al proyecto.