JJ n.

4 settembre-ottobre 2007

Graci nelle applicazioni Java

di Federico Paparoni
In questo articolo utilizzeremo una famosa libreria open source per la realizzazione di graci: JFreeChart.

Federico Paparoni Si occupa prevalentemente di sviluppo sulle piattaforme JavaME e JavaEE. Gestisce il portale JavaStaff.com per la pubblicazione di notizie e articoli sul mondo Java.

pubblicato su WWW.INFOMEDIA.IT stampa digitale da Lulu Enterprises Inc. stores.lulu.com/infomedia

Infomedia
` Infomedia e limpresa editoriale che da quasi venti anni ha raccolto la voce dei programmatori, dei sistemisti, dei professionisti, degli studenti, dei ricercatori e dei professori dinformatica italiani. Sono pi` di 800 gli autori che hanno realizzato per le teu state Computer Programming, Dev, Login, Visual Basic Journal e Java Journal, molte migliaia di articoli tecnici, presentazioni di prodotti, tecnologie, protocolli, strumenti di lavoro, tecniche di sviluppo e semplici trucchi e stratagemmi. Oltre 6 milioni di copie distribuite, trentamila pagine stampate, fanno di questa impresa la pi` grande ed u inuente realt` delleditoria specializzata nel campo della a programmazione e della sistemistica. In tutti questi anni le riviste Infomedia hanno vissuto della passione di quanti vedono nella programmazione non solo la propria professione ma unattivit` vitale e un vero a divertimento. ` Nel 2009, Infomedia e cambiata radicalmente adottando ` un nuovo modello aziendale ed editoriale e si e organizzata attorno ad una idea di Impresa Sociale di Comunit` , a partecipata da programmatori e sistemisti, separando le attivit` di gestione dellinformazione gestite da un board a comunitario professionale e quelle di produzione gesti` te da una impresa strumentale. Questo assetto e in linea con le migliori esperienze internazionali e rende Infomedia ancora di pi` parte della Comunit` nazionale degli u a sviluppatori di software. ` Infomedia e media-partner di manifestazioni ed eventi in ambito informatico, collabora con molti dei pi` imporu tanti editori informatici italiani come partner editoriale e fornitore di servizi di localizzazione in italiano di testi in lingua inglese.

Limpaginazione automatica di questa rivista e realizzata al ` 100% con strumenti Open Source usando OpenOffice, Emacs, BHL, LaTeX, Gimp, Inkscape e i linguaggi Lisp, Python e BASH

For copyright information about the contents of Java Journal, please see the section Copyright at the end of each article if exists, otherwise ask authors. Infomedia contents is 2007 Infomedia and released as Creative Commons 2.5 BY-NC-ND. Turing Club content is 2007 Turing Club released as Creative Commons 2.5 BY-ND. Le informazioni di copyright sul contenuto di Java Journal sono riportate nella sezione Copyright alla ne di ciascun articolo o vanno richieste direttamente agli autori. Il contenuto Infomedia e 2007 Infomedia e rila` sciato con Licenza Creative Commons 2.5 BY-NC-ND. Il contenuto Turing Club e 2007 Turing Club e rilasciato ` con Licenza Creative Commons 2.5 BY-ND. Si applicano tutte le norme di tutela dei marchi e dei segni distintivi. ` E in ogni caso ammessa la riproduzione parziale o totale dei testi e delle immagini per scopo didattico purch e vengano integralmente citati gli autori e la completa identicazione della testata. Manoscritti e foto originali, anche se non pubblicati, non si restituiscono. Contenuto pubblicitario inferiore al 45%. La biograa dellautore riportata nellarticolo e sul sito www.infomedia.it e di norma quella disponibi` le nella stampa dellarticolo o aggiornata a cura dellautore stesso. Per aggiornarla scrivere a info@infomedia.it o farlo in autonomia allindirizzo http://mags.programmers.net/moduli/biograa

focus

JAVA Journal

Grafici nelle applicazioni Java

In questo articolo utilizzeremo una famosa libreria open source per la realizzazione di grafici: JFreeChart.
>> di Federico Paparoni (fpaparoni@javajournal.it)

a maggior parte delle applicazioni che dobbiamo realizzare ha a che fare con i dati. Di qualsiasi genere siano, sempre dati sono: tabelle di database, file da organizzare, contatti da gestire. In queste situazioni talvolta necessario visualizzare uno schema di questi dati, un report, una qualsivoglia statistica. In Java esistono diverse librerie che permettono ci, ma una fra tutte quella pi utilizzata, sia per la completezza sia per la lunga serie di funzionalit offerte: JFreeChart (http://www.jfree.org/ jfreechart/)

mite variabili predefinite. In una situazione reale, i dati per la creazione dei grafici verranno gestiti dinamicamente. La classe che rappresenta il grafico a torta DefaultPieDataset, che fa parte del package org.jfree.data.general. Si tratta di unimplementazione di default di PieDataset, uninterfaccia che specifica i metodi che qualsiasi implementazione (come appunto lo DefaultPieDataset) deve supportare per poter gestire grafici a torta allinterno di JFreeChart. Pertanto, per un primo grafico a torta non dobbiamo far altro che istanziare un oggetto DefaultPieDataset e definire alcuni valori:
DefaultPieDataset pieDataset = new DefaultPieDataset(); pieDataset.setValue(Java, new Integer(55)); pieDataset.setValue(PHP, new Integer(25)); pieDataset.setValue(C#, new Integer(15)); pieDataset.setValue(Ruby, new Integer(5));

JFreeChart JFreeChart una libreria open source realizzata inizialmente da David Gilbert e rilasciata sotto licenza LGPL (Lesser General Public License) che permette di utilizzarla in applicazioni commerciali. Questa libreria consente, essenzialmente, di realizzare nelle proprie applicazioni dei grafici che rappresentano i dati da trattare e che vogliamo rappresentare in forma grafica. Per approfondire questo tema, grazie a JFreeChart, andremo a provare tutte le funzionalit offerte da questa libreria. Purtroppo, pur essendo un progetto open source, c enorme scarsit di articoli sullargomento (anche perch la guida ufficiale di questo progetto a pagamento). Perci, in questo articolo andremo a scoprire gradualmente quali sono le funzionalit disponibili. Grafico a torta Per introdurre il funzionamento della libreria utilizziamo un classico grafico a torta. I dati su cui baseremo lesempio sono cablati nel codice sorgente, tra-

In questo modo, abbiamo definito un grafico a torta con quattro spicchi, specificando i valori da visualizzare per ogni spicchio. Un semplice programma di visualizzazione del grafico riportato nel Listato 1. Come si osserva nellesempio, viene prima creato loggetto DefaultPieDataset; successivamente, grazie alla classe ChartFactory, realizziamo il grafico vero e proprio, invocando il metodo statico createPieChart() la cui firma :
static JFreeChart createPieChart (java.lang.String title, // titolo del diagramma PieDataset dataset, // dataset da rappresentare (oppure null) boolean legend, // presenza della legenda?

48

n.4 - settembre/ottobre 2007

JAVA Journal

focus

FIGURA 1

Grafico a torta

boolean tooltips, // presenza di tooltip da mostrare? boolean urls) // generazione di URL?

del JFreeChart, abbiamo salvato questo grafico su un file, per poterlo poi visualizzare a schermo. Ci stato possibile attraverso la classe ChartUtilities:
try { ChartUtilities.saveChartAsJPEG(newFile (chart.jpg), chart, 500,300); } catch (IOException ex) { ex.printStackTrace(); } BufferedImage image = chart.createBufferedImage (500,300);

Se mandiamo in esecuzione il programma, otteniamo il risultato mostrato nella Figura 1. Ma vediamo come cambiando una semplice riga del programma possiamo variare la rappresentazione grafica dei dati. Come si evince dal Listato 1, il metodo utilizzato per realizzare un JFreeChart, createPieChart() di ChartFactory, prevede il passaggio di un parametro PieDataset. Scorrendo la documentazione Javadoc di JFreeChart vediamo che possiamo utilizzare la stessa rappresentazione dei dati per creare un grafico, sempre a torta, ma tridimensionale. Per farlo, basta invocare il metodo createPieChart3D (la cui firma identica al metodo gi visto):
JFreeChart chart=ChartFactory.createPieChart3D( PieDataSet Demo, pieDataset, true, false, false);

In questo modo abbiamo realizzato un grafico a torta tridimensionale (Figura 2). Il motivo per cui la libreria organizzata in questa maniera abbastanza comprensibile: possiamo fare, ad esempio, un parallelismo con il pattern MVC (Model View Controller). In questo caso, i dati da gestire sono rappresentati dallinterfaccia PieDataset (il Model). Nel momento in cui vogliamo visualizzare queste informazioni passiamo attraverso il ChartFactory che genera un JFreeChart (il View) che poi possiamo utilizzare. Nel Listato 1, dopo la creazione

FIGURA 2

Grafico a torta tridimensionale

n.4 - settembre/ottobre 2007

49

focus

JAVA Journal
/* * PieDatasetDemo.java */ import java.awt.*; import java.awt.image.*; import java.io.*; import javax.swing.*; import org.jfree.data.general.*; import org.jfree.chart.*; public class PieDatasetDemo extends JFrame { public PieDatasetDemo() { DefaultPieDataset pieDataset = new DefaultPieDataset(); pieDataset.setValue(Java, new Integer(55)); pieDataset.setValue(PHP, new Integer(25)); pieDataset.setValue(C#, new Integer(15)); pieDataset.setValue(Ruby, new Integer(5)); JFreeChart chart=ChartFactory.createPieChart (PieDataSet Demo,pie Dataset, rue,false,false); try { ChartUtilities. saveChartAsJPEG(new File(chart.jpg), chart,500,300); } catch (IOException ex) { ex.printStackTrace(); } BufferedImage image = chart.createBufferedImage(500,300); JLabel lblChart = new JLabel(); lblChart.setHorizontalAlignment(JLabel.CENTER); lblChart.setVertical-Alignment(JLabel.CENTER); lblChart.setIcon(new ImageIcon(image)); this.getContentPane().set-Layout(new BorderLayout()); this.getContentPane().add-(lblChart, BorderLayout.CENTER); this.setSize(600,400); this.setVisible(true); } public static void main(String[] args) throws Exception { PieDatasetDemo pieDatasetDemo = new PieDatasetDemo(); }

Istogramma Appreso il meccanismo di base di generazione dei grafici tramite JFreeChart, passiamo a un altro interessante esempio di utilizzo: andremo a creare un Dataset (che rappresenta i dati) e a mostrarli in un istogramma. La classe che permette di creare insiemi di dati per questo tipo di rappresentazione DefaultCategoryDataset, che implementa linterfaccia CategoryDataset. Utilizzando questa classe possiamo definire i dati che andranno rappresentati dallistogramma. Nel Listato 2 riportato un esempio di generazione di un grafico di questo tipo. Come nel caso dei diagrammi a torta, dobbiamo popolare il Dataset con dei valori. Il risultato dellesecuzione del programma mostrato in Figura 3. In questo caso, abbiamo voluto visualizzare landamento agli esami degli studenti Pippo e Pluto. Per ogni studente sono stati inseriti tre diversi valori (prima prova, seconda prova e orale). Queste informazioni sono state inserite nel Dataset, unitamente al voto ottenuto dagli studenti (il valore sullasse delle ordinate di ciascun istogramma)
dataset.addValue(6.0, series1, category1); dataset.addValue(9.0, series1, category2); dataset.addValue(7.0, series1, category3); dataset.addValue(8.0, series2, category1); dataset.addValue(7.0, series2, category2); dataset.addValue(8.0, series2, category3);

Per creare listogramma si ricorre al metodo createBarChart() di ChartFactory la cui firma :

LISTATO 1 Classe che crea e visualizza un PieDataSet Questo metodo di salvataggio dei grafici semplice e agevole, ma scomodo da utilizzare se vogliamo semplicemente visualizzare il grafico e non intendiamo salvarlo. Nei prossimi paragrafi vedremo come utilizzare ChartPanel, un pannello realizzato in JFreeChart che permette di inserire il grafico direttamente nellinterfaccia grafica senza il salvataggio su disco.

static JFreeChart createBarChart (java.lang.String title, java.lang.String categoryAxisLabel, // etichetta asse dominio java.lang.String valueAxisLabel, // etichetta asse valori CategoryDataset dataset, PlotOrientation orientation, // orientamento orizz/vert boolean legend, boolean tooltips, boolean urls)

50

n.4 - settembre/ottobre 2007

JAVA Journal

focus

FIGURA 3

Istogramma

Per cui, nel nostro caso scriveremo:

JFreeChart chart=ChartFactory.createBarChart (Istogramma, Esame, Voto, dataset, PlotOrientation.VERTICAL, true,true,false);

Il risultato di questo cambiamento visibile nella Figura 4.

Grafici dal database Come abbiamo detto precedentemente, JFreeChart offre una vasta gamma di servizi per la rappresentazione grafica dei dati. Un caso molto comune avere dei dati memorizzati in un database da visualizzare graficamente. Allinterno di JFreeChart troviamo un package che fa proprio al caso nostro: org.jfree.data.jdbc. In questo package sono stati definiti tre diversi Dataset, simili a quelli gi visti ma che riescono a caricare le informazioni dal database. Ci che avviene in queste classi molto semplice (cos come avremmo fatto se JFreeChart non offrisse questa funzionalit): a questi Dataset vengono passati come parametri una connessione JDBC e una query SQL. Il Dataset effettua la query sul DB e memorizza le informazioni restituite. Il passo successivo visualizzare questi dati, come abbiamo

Ed infine abbiamo utilizzato la classe ChartPanel per aggiungere il grafico direttamente nella nostra interfaccia
ChartPanel chartPanel = new ChartPanel(chart); chartPanel.setPreferredSize(new Dimension (500, 300)); setContentPane(chartPanel); setVisible(true);

Anche in questo caso abbiamo seguito gli stessi passi effettuati per il diagramma a torta: creazione del dataset, popolamento del dataset, creazione del JFreeChart attraverso ChartFactory e visualizzazione. Per visualizzare altri grafici, che possono essere generati a partire dal codice del Listato 2 senza effettuare troppi cambiamenti, basta modificare il metodo utilizzato per la generazione del JFreeChart. Ad esempio, andiamo a riscrivere il codice sostituendo linvocazione del metodo di ChartFactory con la seguente riga:
JFreeChart chart=ChartFactory.createBarChart3D (Istogramma 3D,Esame,Voto, dataset,PlotOrientation. HORIZONTAL, true,true,false);

Cos facendo, abbiamo modificato il grafico in un istogramma 3D e abbiamo modificato lorientamento selezionando il valore PlotOrientation.HORIZONTAL.

FIGURA 4 Istogramma tridimensionale orientato in orizzontale

n.4 - settembre/ottobre 2007

51

focus

JAVA Journal
LISTATO 2 Classe che crea e visualizza un CategoryDataSet
import import import import java.awt.*; java.awt.image.*; java.io.*; javax.swing.*;

JFreeChart e applicazioni Web

import org.jfree.data.category.*; import org.jfree.chart.*; import org.jfree.chart.plot.*; public class CategoryDemo extends JFrame { public CategoryDemo() { setSize(500,300); final String series1 = Pippo; final String series2 = Pluto; final String category1 = Prima prova; final String category2 = Seconda prova; final String category3 = Orale; final DefaultCategoryDataset dataset = new DefaultCategoryDataset(); dataset.addValue(6.0, series1, category1); dataset.addValue(9.0, series1, category2); dataset.addValue(7.0, series1, category3); dataset.addValue(8.0, series2, category1); dataset.addValue(7.0, series2, category2); dataset.addValue(8.0, series2, category3); JFreeChart chart=ChartFactory.createBarChart (Istogramma, Esame ,Voto, dataset,PlotOrientation.VERTICAL, true,true,false); final ChartPanel chartPanel = new ChartPanel(chart); chartPanel.setPreferredSize(new Dimension(500, 300)); setContentPane(chartPanel); setVisible(true);

Gli esempi visti finora riguardano sempre applicazioni desktop in cui utilizziamo JFreeChart. Per, lutilizzo di questa libreria si rivolge anche alle applicazioni Web, ed ora vedremo come inserire un grafico in una semplice applicazione Java Server. I grafici che abbiamo generato, per il momento, sono stati salvati su file (primo esempio con grafico a torta) o visualizzati attraverso un componente ad hoc (secondo esempio con listogramma). Vediamo quindi la prima parte della nostra applicazione Web, una JSP dove creiamo un diagramma a torta 2D:

public static void main(String[] args) throws Exception { CategoryDemo categoryDemo = new CategoryDemo(); }

<%@page contentType=text/ html%> <%@ page import=com. java staff.stats.* %> <%@ page import=java.util.* %> <%@ page import=org .jfree.data.general. DefaultPieDataset %> <%@ page import= org.jfree.chart.* %> <html> <head> <title>Demo Web</ title> </head> <body>

fatto precedentemente. Come risultato abbiamo un grafico dei dati con poche e semplici righe di codice:
Connection conn = DriverManager.getConnection (db, username, password); JFreeChart chart; String sql = select val1, val2 from table; JDBCXYDataset chartData = new JDBCXYDataset (conn, sql); xyData = (XYDataset) chartData; chart = ChartFactory.createXYLineCha (, , , xyData, PlotOrientation.HORIZONTAL,true, true, false);

<% DefaultPieDataset pieDataset = new DefaultPieDataset(); pieDataset.setValue(Java, new Integer(55)); pieDataset.setValue(PHP, new Integer(25)); pieDataset.setValue(C#, new Integer(15)); pieDataset.setValue(Ruby, new Integer(5)); JFreeChart chart = ChartFactory. createPieChart(Demo Web, pieDataset,true,false,false); application.setAttribute(chart,chart);

52

n.4 - settembre/ottobre 2007

JAVA Journal

focus

FIGURA 5

Grafico per la visualizzazione di un Gantt

%> <IMG src=ChartServlet> </body> </html>

Come si detto, loggetto JFreeChart viene recuperato dal contesto dellapplicazione. Viene quindi impostato il content type della risposta come image/png, e viene creata unimmagine e viene scritta nello stream di output.

In questa JSP abbiamo creato un grafico e abbiamo salvato loggetto JFreeChart nelloggetto implicito application (ovvero il Context della Web Application). In questa pagina, abbiamo demandato la creazione del grafico ad una Servlet, anche perch non avremmo potuto includere limmagine utilizzando solo questa JSP, perch il ContentType della pagina semplicemente HTML e, quindi, non avremmo potuto aggiungere un contenuto come unimmagine. La Servlet ChartServlet in questo caso dovr generare il grafico, prendendo loggetto JFreeChart dal contesto e stampando in output limmagine, come nel caso in cui viene salvata su file. Qui di seguito viene riportato il metodo doGet() di ChartServlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { JFreeChart chart = (JFreeChart)getServlet Context().getAttribute(chart); response.setContentType( image/png ); BufferedImage buf = chart.createBufferedImage (640, 400, null); PngEncoder encoder = new PngEncoder( buf, false, 0, 9 ); response.getOutputStream().write( encoder.pngEncode() ); }

Conclusioni JFreeChart unottima libreria per la generazione di grafici in Java. Navigando tra la documentazione Javadoc (lunica ufficialmente disponibile) possibile scovare piano piano molte caratteristiche interessanti per le nostre applicazioni. Esistono moltissime tipologie di grafico, modificabili fin nei minimi dettagli: possiamo cambiare colori, font, immagini di sfondo. Ad esempio, unaltra tipologia di grafico realizzabile attraverso questa libreria il Gantt, definito nel package org.jfree.data.gantt, come potete vedere in Figura 5 che visualizza uno degli esempi di JFreeChart. Chiaramente lutilizzo di questa libreria pu essere un notevole valore aggiunto per le nostre applicazioni.

Note Biografiche
Federico Paparoni si occupa prevalentemente di sviluppo sulle piattaforme JavaME e JavaEE. Gestisce il portale JavaStaff.com per la pubblicazione di notizie e articoli sul mondo Java.

n.4 - settembre/ottobre 2007

53