Information Design

Information Design Blog www.information-design.it

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>