Crear gráficas con series con JFreeChart.
0. Índice de contenidos.
- 1. Introducción.
- 2. Entorno.
- 3. Diseñando la gráfica.
- 4. Construyendo la gráfica.
- 5. Ejecutando el ejemplo.
- 6. Referencias.
- 7. Conclusiones.
1. Introducción
Como vimos en otro tutorial es muy sencillo exportar datos a una hoja de cálculo mediante Apache POI. Sin embargo, las hojas de cálculo no son la única solución para la exportación de datos. En determinados casos puede ser muy interesante plasmar toda esa información en una gráfica.
En este tutorial vamos a ver cómo generar gráficas con series de datos con ayuda de la librería JFreeChart. Para ello vamos a aprovechar los datos del ejemplo que utilizamos en el tutorial anteriormente mencionado.
2. Entorno.
El tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil MacBook Pro 15′ (2.2 Ghz Intel Core I7, 4GB DDR3).
- Sistema Operativo: Mac OS Snow Leopard 10.6.7
- Entorno de desarrollo: Eclipse 3.7 Indigo.
- JFreeChart 1.0.13.
3. Diseñando la gráfica.
Como hemos dicho anteriormente, nos vamos a basar en datos de pilotos que dan vueltas de entrenamiento a un circuito para generar este ejemplo. Las características que tendrá nuestra gráfica serán las siguientes:
- Cada serie (de tiempos por vuelta de un piloto) se representará de forma lineal.
- El eje Y de la gráfica mostrará los tiempos en segundos en un rango de 120 a 135. El número de segundos del eje se visualizará de dos en dos (120, 122, 124…).
- El eje X de la gráfica mostrará el número de vueltas, de la vuelta 1 a la vuelta 5.
- Cada punto de la gráfica debe de mostrarse con un círculo (evidentemente los círculos serán unidos por la línea que representará la serie).
- Los colores de las series deben ser distintos, así como las líneas de la gráfica que hacen de guía (líneas discontinuas que salen en el fondo de la gráfica).
- En el pie de la gráfica debe figurar una leyenda con los nombres de los pilotos.
4. Construyendo la gráfica.
Pues bien, aquí tenemos la clase que nos generará la gráfica:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
import java.awt.Color; import java.io.File; import org.jfree.chart.ChartFactory; import org.jfree.chart.ChartUtilities; import org.jfree.chart.JFreeChart; import org.jfree.chart.axis.NumberAxis; import org.jfree.chart.axis.NumberTickUnit; import org.jfree.chart.plot.PlotOrientation; import org.jfree.chart.plot.XYPlot; import org.jfree.chart.renderer.xy.XYLineAndShapeRenderer; import org.jfree.data.xy.XYSeries; import org.jfree.data.xy.XYSeriesCollection; public class PruebaJFreeChart { private static Color COLOR_SERIE_1 = new Color(255, 128, 64); private static Color COLOR_SERIE_2 = new Color(28, 84, 140); private static Color COLOR_RECUADROS_GRAFICA = new Color(31, 87, 4); private static Color COLOR_FONDO_GRAFICA = Color.white; public JFreeChart crearGrafica(XYSeriesCollection dataset) { final JFreeChart chart = ChartFactory.createXYLineChart("Tiempos de entrenamientos", "Vuelta", "Tiempo (segundos)", dataset, PlotOrientation.VERTICAL, true, // uso de leyenda false, // uso de tooltips false // uso de urls ); // color de fondo de la gráfica chart.setBackgroundPaint(COLOR_FONDO_GRAFICA); final XYPlot plot = (XYPlot) chart.getPlot(); configurarPlot(plot); final NumberAxis domainAxis = (NumberAxis)plot.getDomainAxis(); configurarDomainAxis(domainAxis); final NumberAxis rangeAxis = (NumberAxis)plot.getRangeAxis(); configurarRangeAxis(rangeAxis); final XYLineAndShapeRenderer renderer = (XYLineAndShapeRenderer)plot.getRenderer(); configurarRendered(renderer); return chart; } // configuramos el contenido del gráfico (damos un color a las líneas que sirven de guía) private void configurarPlot (XYPlot plot) { plot.setDomainGridlinePaint(COLOR_RECUADROS_GRAFICA); plot.setRangeGridlinePaint(COLOR_RECUADROS_GRAFICA); } // configuramos el eje X de la gráfica (se muestran números enteros y de uno en uno) private void configurarDomainAxis (NumberAxis domainAxis) { domainAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits()); domainAxis.setTickUnit(new NumberTickUnit(1)); } // configuramos el eje y de la gráfica (números enteros de dos en dos y rango entre 120 y 135) private void configurarRangeAxis (NumberAxis rangeAxis) { rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits()); rangeAxis.setTickUnit(new NumberTickUnit(2)); rangeAxis.setRange(120, 135); } // configuramos las líneas de las series (añadimos un círculo en los puntos y asignamos el color de cada serie) private void configurarRendered (XYLineAndShapeRenderer renderer) { renderer.setSeriesShapesVisible(0, true); renderer.setSeriesShapesVisible(1, true); renderer.setSeriesPaint(0, COLOR_SERIE_1); renderer.setSeriesPaint(1, COLOR_SERIE_2); } } |
Bien, como vemos el método ChartFactory.createXYLineChart nos creará una gráfica de series representadas por líneas.
El método configurarPlot se ocupa de establecer el color de las líneas de fondo de la gráfica que hacen de guía. Son las líneas discontinuas verticales y horizontales que aparecen en el fondo de la gráfica.
El método configurarDomainAxis actua sobre el eje X, el eje del número de vueltas, y hace que se muestren números enteros y de uno en uno.
El método configurarRangeAxis actua sobre el eje Y, el de los tiempos, y hace que se muestren los tiempos comprendidos en el rango de 120 a 135 pero mostrando un número si, un número no.
El método configurarRndered hace que en cada punto (relación tiempo – vuelta de una serie) se muestre un círculo y que cada serie sea de un color.
5. Ejecutando el ejemplo.
Por último, nos queda cargar los datos de los pilotos (usaremos los del otro tutorial) y generar la gráfica en un fichero.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
public static final int ANCHO_GRAFICA = 400; public static final int ALTO_GRAFICA = 300; public static void main(String args[]) { final XYSeries serie1 = new XYSeries("Fernando Alonso"); serie1.add(1, 131.78); serie1.add(2, 129.95); serie1.add(3, 128.16); serie1.add(4, 125.91); serie1.add(5, 130.44); final XYSeries serie2 = new XYSeries("Jaime Alguersuari"); serie2.add(1, 133.16); serie2.add(2, 132.32); serie2.add(3, 129.86); serie2.add(4, 128.02); serie2.add(5, 132.45); final XYSeriesCollection collection = new XYSeriesCollection(); collection.addSeries(serie1); collection.addSeries(serie2); try { final PruebaJFreeChart prueba = new PruebaJFreeChart(); final JFreeChart grafica = prueba.crearGrafica(collection); ChartUtilities.saveChartAsPNG(new File("tiempos-entrenamientos.png"), grafica, ANCHO_GRAFICA, ALTO_GRAFICA); } catch (Exception e) { e.printStackTrace(); } } |
Observemos que añadimos los tiempos de cada piloto en una serie llamada XYSeries. A esta serie únicamente le indicamos el nombre, que se corresponderá con el nombre del piloto, y el tiempo por vuelta. Ej: en la serie 1 hemos indicado que en la vuelta 1 el tiempo fue de 131.78 segundos, en la vuelta 2 fue de 129.95, etc…
Añadimos las gráficas a un dataset de tipo XYSeriesCollection y se lo pasamos al método crearGrafica.
Por último, con el método saveChartAsPNG de la clase ChartUtilities generamos una imagen en formato png, con el alto y ancho que queramos y que que dará como resultado una imagen llamada tiempos-entrenamiento.png. La gráfica resultante es la siguiente:
6. Referencias.
7. Conclusiones.
En este tutorial hemos visto lo sencillo que es generar gráficas de series lineales con ayuda de la librería JFreeChart.
Nótese que esta librería es capaz de generar una gran cantidad de tipos de gráficas que pueden verse en la demo de su página web.
Espero que este tutorial os haya sido de ayuda. Un saludo.
Miguel Arlandy
Excelente tutorial para empezar para aprender. Tengo una duda y aun no puedo resolverlo. Debo hacer el mismo grafico que diste como ejemplo, en la linea azul en los puntos, por ejemplo en la coordenada 129,80;3 quiero poner una etiqueta, un string como \\\»Aprobado\\\», tenes idea como debo hacerlo
Yo quisiera saber si hay una forma de colocar texto en lugar de los números del eje de las x en la parte de abajo en lugar de que sea 1 2 3 4 5 que sea texto como platos cucharas vasos etc
quisiera saber si en vez de colocar numeros habria forma de utilizar un archivo con extension txt
serie2.add(1, 133.16);
serie2.add(«txt here», 132.32);
serie2.add(«txt here», 129.86);
serie2.add(«txt here», 128.02);
serie2.add(«txt here», 132.45);