Ejemplo sencillo con JFreeChart : Area, Bar y Line

De ChuWiki
Saltar a: navegación, buscar

¿Qué necesitamos para trabajar con JFreeChart?

Para trabajar con JFreeChart necesitamos descargarnos la librería de JFreeChart y JCommon. Si lo hacemos desde la página del enlace, la descarga de JFreeChart ya incluye JCommon, por lo que no necesitamos bajárnosla por separado. Desempaquetamos el zip y sólo necesitamos añadir en el proyecto de nuestro IDE favorito los jar jfreechart-1.0.12.jar y jcommon-1.0.15.jar (o las versiones que hayamos bajado). Estos jar están en el subdirectorio lib que obtenemos al desempaquetar el zip de JFreeChart.

Puedes ver el código completo del ejemplo en EjemploJFreeCategoryDataset.java y otros ejemplos en chuidiang-ejemplos JFreechart

Rellenamos el modelo de datos

Cada uno de los posibles gráficos que podemos obtener con JFreeChart, necesita unos datos que son los que se pintarán en dicho gráfico. Estos datos normalmente no se pasan directamente al gráfico, sino que se pasan a una clase encargada de almacenarlos, que se suele conocer como modelo de datos (o dataset en el lenguaje de JFreeChart). En JFreeChart hay disponibles muchos posibles modelos de datos o datasets, según el tipo de gráfico que queramos pintar. En este ejemplo vamos a centrarnos en CategoryDataset, que nos permitirá pintar gráficos de barras (BarChart), de áreas (AreaChart), de líneas (LineChart) y de tarta múltiple (MultiplePieChart). Al final puedes ver una imagen con cada uno de estos tipos de gráficos.

CategoryDataset es sólo una interface, por lo que debemos usar alguna clase concreta que la implemente. Podemos hacernos nosotros nuestra propia clase, o podemos usar alguna de las muchas que nos ofrece JFreeChart. Para este ejemplo usaremos una de las última, DefaultCategoryDataset.

Para el ejemplo, haremos un gráfico en el que se comparan las visitas de dos sitios web (www.sitio1.com y www.sitio2.com). Así que instanciamos la clase DefaultCategoryDataset y le vamos metiendo los datos de las visitas

    /** Sitio web 1 */
    private static final String SITIO_2 = "www.sitio1.com";

    /** Sitio web 2 */
    private static final String SITIO_1 = "www.sitio2.com";

    ...

    // Creamos y rellenamos el modelo de datos
    DefaultCategoryDataset dataset = new DefaultCategoryDataset();

    // Visitas del sitio web 1
    dataset.setValue(100, SITIO_1, "Lunes");
    dataset.setValue(120, SITIO_1, "Martes");
    dataset.setValue(110, SITIO_1, "Miércoles");
    dataset.setValue(103, SITIO_1, "Jueves");
    dataset.setValue(106, SITIO_1, "Viernes");

    // Visitas del sitio web 2
    dataset.setValue(60, SITIO_2, "Lunes");
    dataset.setValue(62, SITIO_2, "Martes");
    dataset.setValue(61, SITIO_2, "Miércoles");
    dataset.setValue(63, SITIO_2, "Jueves");
    dataset.setValue(66, SITIO_2, "Viernes");

Hemos usado el método setValue() al que se le pasan tres parámetros:

  • El número de visitas. El valor indicará la longitud de las barras en el gráfico de barras.
  • El nombre del sitio web. Cada nombre distinto que pongamos, dará lugar a un color distinto en la barra. En nuestro caso, al haber dos sitios web, tendremos barras de dos colores.
  • El nombre del día del que se miden las visitas. Cada nombre distinto dará lugar a una nueva barra.


Creamos el gráfico

Una vez que tenemos los datos metidos en el modelo de datos, para obtener el gráfico con unas opciones por defecto, podemos llamar a la clase ChartFactory. En nuestro ejemplo lo haremos así

JFreeChart chart = ChartFactory.createBarChart3D("Visitas", "día",
   "Número visitas", dataset, PlotOrientation.VERTICAL, true,
   true, false);

Los parámetros que hemos pasado son:

  • Título del gráfico, "Visitas" en nuestro ejemplo.
  • Etiqueta para el eje horizontal, "día" en nuestro caso, que vamos a pintar las barras en vertical y cada barra es un día de la semana.
  • Etiqueta para el eje vertical, "número de visitas" en nuestro caso, en el que la longitud de la barra es el número de visitas.
  • El modelo de datos dataset.
  • Si queremos las barras en vertical, PlotOrientation.VERTICAL en nuestro ejemplo, o si las queremos en horizontal.
  • Un boolean que indica si queremos una etiqueta con el nombre de los sitos web en la parte inferior del gráfico, de forma que podamos ver cada color de las barras a qué sitio web corresponde. En el ejemplo hemos puesto true.
  • Un boolean que indica si queremos tooltip en las barras, de forma que al poner el ratón sobre ellas, aparezca una pequeña etiqueta indicando el valor. Hemos puesto true en el ejemplo.
  • Un boolean si queremos que se generen urls. Este flag se utiliza si vamos a generar el gráfico para una página web y queremos que en el gráfico haya urls. En nuestro ejemplo hemos puesto false.


Ponemos el gráfico en una ventana

Si queremos mostrar el gráfico en una ventana Swing (un JFrame o similar), debemos crear un ChartPanel a partir del Chart anterior y meterlo en la ventana. El código puede ser así

// Creación del panel con el gráfico
ChartPanel panel = new ChartPanel(chart);

JFrame ventana = new JFrame("El grafico");
ventana.getContentPane().add(panel);
ventana.pack();
ventana.setVisible(true);
ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Salvar el gráfico en un fichero jpg

Independientemente de si lo ponemos o no en una ventana, podemos salvar el gráfico en un fichero jpg o png. Esto es útil si queremos, por ejemplo, generar en JSP una página web con el gráfico, ya que desde JSP bastará salvar el gráfico en un fichero jpg y luego en la página web poner el tag <img src=.... correspondiente.

Para salvar el gráfico usaremos la clase ChartUtilities, y en concreto los métodos saveChartAsJPG() o saveChartAsPNG()

ChartUtilities.saveChartAsJPEG(new File("grafico.jpg"), chart, 500, 300);

Algunos gráficos de ejemplo

A continuación tienes las imagenes salvadas a partir de los datos de este ejemplo.

AreaChart AreaChartchart.jpg

BarChart3D BarChart3Dchart.jpg

BarChart BarChartchart.jpg

LineChart LineChartchart.jpg

LineChart3D LineChart3Dchart.jpg

MultiplePieChart MultiplePieChartchart.jpg

MultiplePieChart3D MultiplePieChart3Dchart.jpg