Introduzione

Introduzione

La possibilità sintetizzare in forma grafica le informazioni gestite da un sistema informativo è una caratteristica oggi molto apprezzata a completamento delle funzionalità di un'applicazione web.

Dalla versione 7.1, Instant Developer offre un sistema semplice, ma potente, per visualizzare grafici all'interno in videate o report per mostrare dati calcolati tramite query DB o IMDB.

Prima di iniziare a lavorare con i grafici è necessario configurare l'ambiente di lavoro scaricando i file necessari; la procedura è descritta nell'articolo Motori Grafici seguente.

Creazione di un grafico

I grafici possono essere inseriti all'interno delle videate così come si inseriscono i pannelli o gli alberi.

Il primo passo della sua configurazione consiste nell'impostazione delle sue Proprietà (come per ogni altro oggetto di Instant Developer per vedere le sue proprietà basta fare doppio click su di esso).

Nell'editor delle videate comparirà un'immagine rappresentante il tipo di grafico scelto e nella struttura ad albero del progetto verrà aggiunto il relativo oggetto. A questo punto è necessario definire la query DB o IMDB che fornisce i dati da graficare e impostare le proprietà dell'oggetto grafico. Infine è possibile personalizzare la configurazione del grafico utilizzando il visual code ed i metodi messi a disposizione dalla Libreria Grafico.

Esempio di configurazione personalizzata nell'evento di Load della Videata

Proprietà

Vediamo ora quali proprietà si possono configurare in un grafico.

• Nome: questa proprietà indica il nome del grafico.
• Descrizione: questa proprietà rappresenta il titolo del grafico.
• Tipo di grafico: questa lista rappresenta i possibili tipi di grafico.
• Colonne nel grafico: in questa proprietà viene indicato il numero di serie presenti nel grafico. Da questo valore dipende il numero e la tipologia delle colonne della master query del grafico.
• Posizione legenda: in questa lista è possibile scegliere se mostrare la legenda del grafico e la sua posizione.
• Titolo asse X: titolo dell'asse X, se lasciato vuoto l'asse non avrà alcun titolo.
• Titolo asse Y: titolo dell'asse Y, se lasciato vuoto l'asse non avrà alcun titolo.
• Stile visuale: è lo stile visuale da utilizzare per il grafico; per maggiori informazioni vedere l'articolo Anatomia di un grafico.
• Attivo: permette di definire se il grafico è cliccabile o meno.
• Mostra griglia X: permette di definire se la griglia relativa all'asse X è visibile o meno.
• Mostra griglia Y: permette di definire se la griglia relativa all'asse Y è visibile o meno.
• Mostra asse X: permette di definire se l'asse X è visibile o meno.
• Mostra asse Y: permette di definire se l'asse Y è visibile o meno.

Grafici nei report

E' possibile inserire un grafico anche all'interno di una box di un report per poter stampare i dati di interesse in forma grafica.

Come esempio, ipotizziamo di avere una tabella che contiene i dati di vendita di un'azienda suddivisi per aree. L'elenco delle aree di vendita sarà presente nella relativa tabella anagrafica.

Vogliamo creare un report che stampi i dati di tutte le aree e per ogni area crei un grafico che ci mostri il venduto per anno.

Per prima cosa creiamo una nuova videata per il report, videata che chiameremo Vendite. Creiamo anche un nuovo libro all'interno della videata, al cui interno creeremo un report chiamato anche questo Vendite che contenga una sezione chiamata Dettaglio, fino ad ottenere questa struttura:

Nella query del report Vendite selezioniamo tutti i dati contenuti della tabella Aree, dati che provvederemo a stampare nel report. Creiamo quindi all'interno del dettaglio le box relative i dati delle aree e aggiungiamo una box che conterrà il grafico. Per inserire il grafico è possibile usare il comando Aggiungi Grafico del menù contestuale della box.

Ora dobbiamo definire la query del grafico in modo da selezionare sull'asse X gli anni e sull'asse Y le vendite dell'anno. Aggiungiamo anche una clausola where per selezionare solo le vendite dell'area a cui si riferisce il dettaglio: in questo modo il grafico sarà differente per ogni sezione.

A questo punto apriamo le proprietà del grafico e selezioniamo un grafico a barre 3D, impostando anche i nomi degli assi. E' possibile effettuare anche impostazioni dipendenti dalla sezione implementando l'evento di BeforeFormatting della sezione. Ad esempio proviamo ad aggiungere al titolo del grafico il nome dell'area a cui si riferisce.

Il risultato finale è il seguente: un book con tante sezioni quante le aree dell'azienda e per ogni area un grafico che mostra l'evoluzione del venduto negli ultimi anni.

Librerie ed estensione

L'oggetto grafico può utilizzare diversi tipi di motori grafici per visualizzare i dati nella forma richiesta, in particolare può utilizzare la libreria open source JFreeChart 1.0.9 oppure la libreria FusionChart V3, ottenibile in demo dal sito del produttore .

L'oggetto grafico mette a disposizione una libreria con decine di metodi tramite cui personalizzarne il comportamento. Ad esempio è possibile decidere quale motore grafico deve essere utilizzato: se non specificato altrimenti viene scelto JFreeChart; per cambiare motore basta utilizzare il metodo SetLibrary, solitamente nell'evento di Load della videata. Le librerie selezionabili sono JFreeChart o FusionChart, all'interno della lista valori LibraryTypes, ma è anche possibile interfacciare altri tipi di motori grafici.

La libreria del grafico permette di modificarne gli aspetti più comuni, inoltre è portabile fra i vari tipi di motori grafici. Per ottenere un ulteriore livello di personalizzazione è anche possibile accedere all'oggetto JFreeChart interno per utilizzare direttamente i suoi metodi di libreria.