Grafici con Mappe Geografiche

Posted by Alessia, Roberta, Saverio ed Antonella | Posted in | Posted on 15:00

Quando occorre analizzare dati statistici su base territoriale, si può ottere un impatto visivo molto efficace con l'uso questa tipologia di grafici, che visualizzano delle cartine geografiche con regioni evidenziate in colori diversi in relazione ai numeri rilevati per il fenomeno allo studio.
Un esempio banale è l'andamento delle vendite (o del PIL, o della Spesa Sanitaria) nelle varie regioni di una nazione. Le regioni con valori più alti hanno un colore più intenso sulla base di una scala dinamica riportata (se desiderato) in basso.

Diamo un'occhiata agli esempi.


Map Chart dell'Europa


Questa mappa dell'Europa è un esempio della versione più semplice di questi grafici: è presente una sola misura e non è attiva alcuna altra opzione.

Con un click sull'immagine si attiva una demo live con la possibilità di modificare i parametri in modo dinamico.





Mappa dell'Italia


La Map Chart sono un'opzione addizionale dei Flash Chart (descritti in questo post): vengono attivati impostando il paragrafo graphtype="map" ed indicando quale mappa si voglia utilizzare (altrimenti compare l'Italia).

In questo caso vengono previste tre misure e la scala con i range di valori previsti ed i colori corrispondenti. La scala può essere variata trascinando gli indicatori triangolari: in questo modo vengono modificati in modo corrispondente i colori della mappa.

Come per i grafici commerciali, i colori possono essere personalizzati. All'interno della Demo tutte le caratteristiche possono essere variate in modo dinamico-

Potete facilmente fare una prova con un click sulla figura.



Mappa della Germania


Ovviamente tutte le cifre devono essere correlate all'area geografica di riferimento, pari al nome delle regioni. Nel caso dell'Italia, i nomi delle Regioni (Lombardia, Toscana ecc.),

Questi grafici possono essere trasformati, dinamicamente, in tutte le altre tipologie (barre, aree, torte ecc).

Ovviamente, quando si modifica la nazione (da Italia a Francia, ad esempio) occorre anche modificare i nomi delle regioni.
In caso contrario il sistema presuppone che non esistano dati per le regioni da visualizzare.

Tutto questo può essere sperimentato con un click sull'immagine (demo).



Mappa della Francia


Come potete vedere, ogni regione viene contraddistinta dal colore corrispondente alla ordine percentuale calcolati sulla sulla base dell'intervallo tra valore minimo e massimo.

Nella demo (click sull'immagine) potete verificare che:
  • i dati vengono forniti mediante documenti XML
  • i valori statistici di riferimento vengono riassunti in una finestrella (tooltip) che viene mostrata quando il mouse passa sopra ad ogni regione




Mappa della Gran Bretagna


La mappa UK è l'ultima inserita di default all'interno dell'oggetto Flash. In realtà puà essere aggiunto qualsiasi numero di mappe addizionali. Abbiamo limitato la scelta alle principali (europee) per mantenere al minimo la grandezza dell'oggetto Flash.

Attualmente gli shapefile (tipologia di mappe che possono essere importate) per ogni tipo di mappa può essere reperito con facilità, ed al livello di dettaglio desiderato.
La fonte che abbiamo utilizzato noi è questa.




Utilizzo e setup delle Chart


Queste Chart possono essere utilizzate con facilità in qualsiasi pagina web.
Le istruzioni sono esattamente le stesse giù fornite per i grafici commerciali e sono reperibili qui.

 

Come interrogare LDAP fingendo che sia una tabella

Posted by Alessia, Roberta, Saverio ed Antonella | Posted in , , | Posted on 09:06

Questo post è per te se lavori con il db Oracle e se hai desiderato, almeno una volta, di gestire dati Ldap come se fossero tabelle relazionali (o quasi).

Qui puoi scaricare un piccolo package PL/SQL con la logica che consente di accedere ad una Directory LDAP, interrogarla mediante una query ed, infine, ottenere come risultato una tabella.

Invece di noiose spiegazioni, mettiamolo subito all'opera:

  • Scaricate e decomprimete il package; va installato in qualsiasi schema di database. Non ha particolari prerequisiti. L'unico diritto richiesto è di accesso (execute grant) al package DBMS_LDAP.
  • Provate, per prima, una query semplice:
  • select c1 from table(TL.ask('&(cn=SMITH*)',null,'C=IT'
    , 'certificati.postecert.it', 'mail,cn,uid,sn' ));
    
  • Se tutto è a posto, potete tentare interrogazioni più complesse:

SELECT tl.f (c1, 1) mail, tl.f (c1, 2) cn, tl.f (c1, 3) u_id, tl.f (c1, 4) sn
  FROM TABLE (tl.ask ('&(cn=SMITH*)',   -- Query Conditions
                      NULL,             -- Unique ID Condition
                      'C=IT',           -- Base dn
                      'certificati.postecert.it', -- Ldap Address
                      'mail,cn,uid,sn'  -- Attributes
                     )
             );

SELECT tl.f (c1, 1) mail, tl.f (c1, 2) nomeresp, tl.f (c1, 3) cognomeresp,
       tl.f (c1, 4) description, tl.f (c1, 5) mails
  FROM TABLE (tl.ask ('&(CognomeResp=Blas*)',  -- Query Conditions
                      NULL,                    -- Unique ID Condition
                      'c=it',                  -- Base dn 
                      'indicepa.gov.it',       -- Ldap Address 
       -- Attributes (fields)
                      'mail,NomeResp,CognomeResp,description,mailS'                      )
             );

Se pensate che sia una cosa utile e volete qualche dettaglio tecnico in più (che abbiamo evitato per non annoiare troppo), chiedetecelo e noi cercheremo di provvedere.

Buon divertimento!

Ricezione della posta con Java

Posted by Alessia, Roberta, Saverio ed Antonella | Posted in , | Posted on 08:32

Software Designer e programmatori non fanno molto uso della ricezione automatica della posta in arrivo.
E’ un peccato, perché la gestione automatica delle mail in ingresso offre impotanti vantaggi applicativi.
Proveremo a spiegare perché con l’aiuto di due semplici esempi.

Gestione delle risposte ad inviti/sondaggi


Supponiamo di spedire una mail ad un gruppo di persone per invitarli ad un evento, fare un sondaggio o qualsiasi altra cosa.
Dopo la spedizione, le risposte potranno essere gestite mediante:

  • una Form in una Internet Application (oneroso per l'utente),
  • una persona fisica che riceve, registra e risponde
  • una semplice replica alla mail

In quest'ultimo caso, non occorre avere una Internet Application né risorse umane impegnate.


Document Management


In un Document Management System, l’attività più noiosa per gli utenti è quella dell’upload dei documenti nel sistema. Questa attività può essere fatta gestire automaticamente dal sistema, inviando i documenti in una opportuna mailbox.


Come scrivere una classe per la gestione della posta in ingresso


Vedremo ora come gestire il recupero della posta con Java.

Libreria utilizzata


Per prima cosa occorre scaricare il package (javax.mail), di cui utilizzeremo le seguenti classi:

  • javax.mail.Session: rappresenta una session di lavoro in cui ci si interfaccia al server di posta.
  • javax.mail.Store: è la classe che rappresenta la radice in cui sono raggruppate le varie cartelle.
  • javax.mail.Folder: è la classe che rappresenta le cartelle che contengono i messaggi.
  • javax.mail.Message: è la classe che rappresenta i singoli messaggi.

Il codice passo passo


Per prima cosa occorre ottenere un oggetto Session:
Properties props = new Properties(); 
Session session = Session.getDefaultInstance(props, null); 

e connetterci allo Store attraverso il metodo getStore():

Store store = session.getStore(“pop3”);

Dall'oggetto Store, ci connettiamo al server attraverso tre parametri: host, username e password:

String host = "mypop.it";
String username = "myusername";
String password = "mypassword";
store.connect(host, username, password);

Una volta ottenuta la connessione possiamo accedere alla cartella contenente i messaggi in arrivo.

Se stiamo utilizzando un server POP, la cartella si chiamerà INBOX.
In caso di server IMAP invece, la cartella potrà chiamarsi INBOX o con qualsiasi altro nome sia stato impostato. Supponendo dunque che la cartella si chiami INBOX, possiamo connetterci ad essa attraverso il metodo getFolder() dell'oggetto store e poi aprire il folder con il metodo open():


Folder folder = store.getFolder("INBOX");     
folder.open(Folder.READ_WRITE); 

Possiamo utilizzare il metodo getMessage() per leggere un singolo messaggio , oppure, come nell'esempio seguente, utilizzare il metodo getMessages() per prendere tutti i messaggi:

Message[] messages = folder.getMessages(); 

A questo punto, per esempio, possiamo salvare tutti i messaggi in una directory:

for (int i = 0; i < messages.length; i++){
File mymail = new File(“C:/dir_email/nome_email.eml”);
OutputStream out=new FileOutputStream(mymail);              
mess[i].writeTo(out); 
mess[i].setFlag(Flags.Flag.DELETED,true); /*impostare flag=true per cancellare il file */
}
Infine, chidere folder e connessione:
folder.close(true); 
store.close(); 


Esempio completo

Un esempio completo può essere visionato qui: ServiceMail.java.

Istruzioni passo passo per costruire le Chart Flash

Posted by Alessia, Roberta, Saverio ed Antonella | Posted in , , , | Posted on 14:09

Ecco le istruzioni per realizzare le Chart in Flash illustrate nel nostro post precedente.

Download e Test


  • Prima di tutto effettua qui il download della Demo.
  • Quindi decomprimila dentro una Cartella Web. Attenzione! Flash richiede, per motivi di sicurezza, un folder indirizzato da un Web/Application Server.
  • Da ultimo, richiama dal Browser l'URL PLOTGEN.html oppure index.html e controlla che tutto funzioni correttamente.
    In caso di problemi, controlla, per prima cosa, se hai il plugin di Flash (deve essere almeno alla versione 9).

Come Creare un proprio Grafico


  • Prepara, nella tua pagina HTML, un elemento DIV html al cui interno apparirà la Chart.
  • Prepara un documento XML Document contenente i Dati ed i Metadati (tutte le istruzioni, ed il modo per provarle, le trovi all'interno della demo)
  • Richiama la funzione javascript loadSWF passandole come parametri il nome dell'oggetto SWF (PLOTGEN), l'ID del DIV contenutore ed il testo del documento XML
  • E' tutto. Tutto il codice (e qualcosa in più) che può servire si trova in plot.js file.
  • L'esempio mostra anche come avere più occorrenze dello stesso oggetto Flash nella stessa pagina ma personalizzato in modo differente. Non è detto che vi serva.


L'oggetto DIV contenitore


Come abbiamo visto è sufficente indicare l'oggetto all'interno del quale va posizionato il grafico. E' necessario che l'oggetto abbia dimensioni esplicite (width and height), come nel codice seguente:
<div id="myDiv" style="width:200px;height:200px;"></div>


Caricamento del file SWF


La funzione loadSWF effettua il caricamento. Ecco il codice:
function loadSWF(swf_id, cont_id,num_in, parms_in) {
  if (!num_in) num_in=0;
  try {
   if (swf_id.indexOf(".")>0) swf_id.substring(0,swf_id.indexOf("."));
   var cont=I$(cont_id); if (!cont) {alert("No cont "+cont_id); return;}
   var wdt=parseInt(cont.offsetWidth); var hdt=parseInt(cont.offsetHeight);
   if (wdt<100) wdt=screen.availWidth;
   if (hdt<100) hdt=400;
   var flashvars = {};
   var params = {menu: "true", quality:"high", play: "false", wmode : "transparent"};
   var attributes = {};
   var X='<object  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="'+cont_id+'_swf" width="100%" height="100%" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">';
   X+='<param name="movie" value="'+swf_id+'.swf" />';
   X+='<param name="wmode" value="transparent"  />';
   X+='<param name="flashvars" value="bridgeName=flex'+num_in;
   if (parms_in!=null && parms_in.length>0) X+='&'+parms_in;
   X+='"/>';
   X+='<param name="quality" value="high" />';
   X+='<param name="allowScriptAccess" value="sameDomain" />';
   X+='<embed src="'+swf_id+'.swf" quality="high" flashvars="bridgeName=flex'+num_in;
   if (parms_in!=null && parms_in.length>0) X+='&'+parms_in;
   X+='" ';
   X+='width="100%" height="400px" name="'+swf_id+'" align="middle" ';
   X+='play="true" loop="false" quality="high" wmode="transparent" allowScriptAccess="sameDomain" ';
   X+='type="application/x-shockwave-flash" ';
   X+='pluginspage="http://www.adobe.com/go/getflashplayer">';
   X+='</embed></object>';
   cont.innerHTML=X;
   cont.setAttribute("hasObj",1);
  }
  catch (exception) {}
 }

La maggior parte del codice descritto viene fornito (cosi com'è) da Adobe per questo tipo di operazioni.
Gli unici elementi degni di nota sono:
  • swf_id è il path/URL dell'oggetto SWF. Nel nostro caso PLOTGEN (si può omettere l'estensione del file ).
  • cont_id è l'id dell'oggetto html contenitore (nel nostro caso myDiv)
  • num_in è il numero della Chart nella pagina
  • parms_in contiene i parametri additional che verranno trasmessi all'oggetto Flash: nel nostro caso il file XML con la personalizzazione
  • Questo valore param name="flashvars" value="bridgeName=flex'+num_inpermette di indicare il corretto caale di comunicazione per ogni grafico, quando nella pagina esistono più Chart-
Questo codice costrusce ed attiva l'oggetto Flash nel DIV indicato.

Personalizzazione delle Chart


PLOTGEN.swf è un unico file Flash ma puà visualizzare differenti tipi di grafici, come mostrato nell'esempio.
Per imparare i pochi comandi da utilizzare il modo migliore è di seguire la Demo, dove viene mostrato come cambiare l'aspetto dei Grafici con il javascript.

  • Nel caso che sia la prima volta che la Chart viene generata, viene chiamata funzione loadSWF; l'XML viene passato all'interno del parametro md (nella variabile parm_in)
  • altrimenti, i parametri vengono direttamente comunicati all'oggetto Flash attraverso la funzione freshJS
  • La comunicazione tra javascript e Flash viene gestita dall'oggetto FABridge; questo aspetto va approfondito solo nel caso si voglia sviluppare in Flash
  • Tutto il codice che serve è contenuto nella funzione plot seguente:

function plot(MDin,num_in) { var parms=null;
 var swf_id='PLOTGEN';
 if (!num_in) num_in=0;
 if (MDin) {var re=/\</g; MDin=MDin.replace(re,"[");
  var re=/\>/g; MDin=MDin.replace(re,"]");
  var re=/\"/g; MDin=MDin.replace(re,"^");
  parms='md='+MDin;
  try {
   if ( !flexApps[num_in]) {var myfunct= new Function("return FABridge.flex"+num_in+".root();");
   flexApps[num_in]= myfunct(); }
   flexApps[num_in].freshJS(MDin);
  }
  catch (exception)
  { loadSWF(swf_id, "swf"+num_in, num_in, parms);} 
 }
 else loadSWF(swf_id, "swf"+num_in, num_in, null);
 }

  • Following is the code for building the MD parameter:
var sa='';
  sa+='<plot>\n';
  sa+='<md graphtype="col" palette="azzurro" urlDefault="plotdefault.xml"\n';
  sa+=' mis3="Physicians/1000"  mis2="Hospital Beds/1000" mis1="Smokers/100" \n';
  sa+=' dim1="Countries"\n';
  sa+=' WallsColors="#00,#999999" WallsAphas="0.1,0.6" WallsAngle="90" \n';
  sa+=' fillColors="#dddddd,#aaaaaa" fillAlphas=".5,.5" labelColorX="#444" labelColorY="#444" />\n';
  sa+=' <dim1>\n';
  sa+='  <d key="Austria" mis3="3.4"  mis2="8.8" mis1="36.3" />\n';
  sa+='  <d key="France"  mis3="3.37" mis2="8.4" mis1="27.0" />\n';
  sa+='  <d key="Germany" mis3="3.4"  mis2="9.2" mis1="24.3" />\n';
  sa+='  <d key="Italy"   mis3="4.2"  mis2="4.9" mis1="24.2" />\n';
  sa+='  <d key="Japan"   mis3="2.0"  mis2="16.4" mis1="30.3" />\n';
  sa+='  <d key="Spain"   mis3="3.2"  mis2="4.1" mis1="28.1" />\n';
  sa+='  <d key="UK"      mis3="2.2"  mis2="4.1" mis1="26.0" />\n';
  sa+='  <d key="USA"     mis3="2.2"  mis2="3.6" mis1="17.5" />\n';
  sa+=' </dim1>\n';
  sa+='</plot>\n';


Default per Chart e Palette di Colori


Non c'è bisogno di comunicare ogni volta tutti i parametri. Ovviamente è possibile definire dei valori default, mediante un documento XML, che viene puntato con l'attributo urlDefault nei parametri di configurazione del singolo grafico. Questo vuol dire che è possibile avere più gruppi di parametri di default in base alle necessità.

Di seguito potete trovare il documento XML utilizzato nella Demo. Se il risultato (come lo vedete) lo considerate accettabile, potete ignorare il tutto e non farvi problemi.

<plotdefault>
<md graphtype="clusterpie" curPalette="Skyblu" alpha="0.9" fillColors="#dddddd,#444444" fillAlphas="0.5,0.5" showlegend="y" labelColor="#444" 
WallsColors="#111,#eee" WallsAphas="0.9,0.1" />
<palettes>
 <p key="orange" values="#F9B832,#D53825,#AA1C09,#F99831,#D36800" />
 <p key="redviolet" values="#E92011,#AB0A29,#7D155F,#3F1595,#2B2BBD" />  
 <p key="azzurro" values="#107FC9,#0E4EAD,#0B108C,#0C0F66,#07093D" /> 
 <p key="blu" values="#5081B5,#36689E,#22558C,#0D3D70,#022245" /> 
 <p key="PD" values="#3E9865,#300901,#7E1A1C,#3F835D,#530709" /> 
 <p key="blu" values="#003E5F,#025D8C,#107FC9,#23B0DB,#1693A5" /> 
 <p key="petrolio" values="#000018,#001830,#003048,#187860,#F0A830" /> 
 <p key="zucchero" values="#07629B,#215A7D,#38525E,#574A49,#6F4221" /> 
 <p key="reddish" values="#B83422,#DA5D3E,#D49B93,#C46D33,#996E31" /> 
 <p key="terra" values="#4D2922,#713327,#9A402E,#AF4C38,#C55B49" /> 
 <p key="ocra" values="#EFAC41,#DE8531,#B32900,#6C1305,#330A04" /> 
 <p key="ciliegia" values="#D11C1C,#9E0B0B,#5E0505,#E76969,#DF3E3E" /> 
 <p key="militare" values="#EDE3A1,#EDB83B,#ED7F3B,#ED5311,#ED3013" /> 
 <p key="rosso" values="#F9D4C2,#AF3236,#7E1A1C,#530709,#300901" /> 
 <p key="viola" values="#9E0B03,#BA2222,#C4423B,#936AB0,#714C8C" /> 
 <p key="gialloblu" values="#DA9F16,#D8D830,#909030,#186078,#184878" /> 
 <p key="verde" values="#219652,#146629,#093B15,#05260E,#021206" /> 
 <p key="verdechiaro" values="#BEFF9E,#73CC59,#4D994D,#266640,#003333" /> 
 <p key="grigio" values="#90BECE,#79ACB0,#6C9E9D,#5D8B8B ,#4D716F" /> 
 <p key="grigioblu" values="#90BECE,#79ACB0,#5D8B8B ,#4D716F,#022245" /> 
 <p key="grigioverde" values="#C5BE88,#AC966F,#3E664B,#204B41,#274432" />
</palettes>
</plotdefault>

Grafici in Flash avanzati...ma facili facili

Posted by Alessia, Roberta, Saverio ed Antonella | Posted in , , , | Posted on 12:30

Stai cercando uno strumento di grande impatto per la visualizzazione grafica dei dati in Web ma che non ti faccia impazzire?
Visto che i risultati migliori (ILOG Elixir e Axiis, dal nostro punto di vista) richiedevano l'uso di strumenti non proprio banali da utilizzare, gli abbiamo costruito intorno una interfaccia molto semplice.
Per utilizzarla è sufficiente la conoscenza di un po' di javascript.
Date un'occhiata. Se vi piacciono e vi interessa approfondire, basta un click per raggiungere una demo/tutorial dinamica e funzionante.

Column Chart


L'attributo "graphtype" va posto uguale col or colstacked or coloverlaid (1°, 2° and 3° esempio). Nella demo, trascinando il mouse sul grafico puoi cambiarne la posizione e l'orientamento.













Bar Chart


L'attributo "graphtype" è bar. Nella demo potete cambiare tutte le impostazioni. I set di colori si selezionano mediante il parametro denominate palette.
Anche le palette possono essere personalizzate oppure aggiunte ed anche modificate dinamicamente.





Cluster Bar Chart


E' la prima Chart Axiis, l'attributo "graphtype" è clusterbar. abbiamo utilizzato la palette originale, perchè riteniamo sia molto bella.






Area Chart


L'attributo "graphtype" è area. La definizione dei dati è generalizzata secondo la nomenclatura tipica della BI: Dimensioni (Clienti, Prodotti..) e Misure (Fatturato, quantità, percentuali ...).






Pie Chart


L'attributo "graphtype" è pie. L'oggetto Flash è di circa 500K e ci mette pochi secondi a caricare, ma solo per la prima volta ed per il primo oggetto visualizzato. Successivamente, poichè l'oggetto è sempre lo stesso (anche se cambiano colori, dati e tipologia) e poichè viene memorizzato nella cache, il caricamento è molto veloce.





Cluster Pie Chart


L'attributo "graphtype" è clusterpie. Praticamente di tratta di un grafico a torta con un raggruppamento delle misure. Può risultare utile (per esempio, per i risulti elettorali [puke]).