Radix Juice: Charts

Here you can find the instructions for building the Flash Charts described in our previous post.

Download and Test

First of all, download here the Plotgen Working Demo.
Then unzip it into a Web Folder. Important!! Flash requires a folder pointed out by a Web/Application Server for security reasons.
Last, from your browser call the URL of PLOTGEN.htnl or index.html and check that all is working properly.
If not, check Flash plugin (it must be version 9 or above).

How it works

Prepare, in your HTML Page, a DIV element (html container) where the Chart will appear
Write an XML Document containing Chart Data and Metadata (check the living demo for instructions)
Call the javascript function loadSWF passing the name of the SWF object (PLOTGEN), the ID of the (html container) and the XML document Text
That's all. All the code you may need (and more) is in the plot.js file.
The example shows how to have multiple occurrences of the same SWF object customized in different ways.

The html Container

You can position the chart into any html container (span, div...); you have to declare the container dimensions (width and height), like in the following code:

<div id="myDiv" style="width:200px;height:200px;"></div>

SWF file loading

The function loadSWF performs the loading. Here is the code:

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) {}
 }

Well, the code for building the param and embed elements is mostly given from Adobe as it is for this kind of operations.
The only issues you have to notice are:

swf_id is the path/URL of the SWF object. In out case PLOTGEN (you can omit the extension).
cont_id is the id of the html object in which the Chart will appear (in our case myDiv)
num_in if the number of the Chart in the page
parms_in are the additional parameters that will be transmitted to the Flash object: in our case the XML file with customization
Notice this: param name="flashvars" value="bridgeName=flex'+num_in: it is needed to give the right communication path at each Flash object

This code puts and activate the Flash Object into our DIV.

Chart Customization

PLOTGEN.swf is a single Flash Object but it can show different Chart Types, like in our example.
The bast way to learn the commands is to follow the Live Demo. Here we explain how to change with javascript the Chart appearance:

If it is the first time the Plot is generated, the function loadSWF is called; the XML is passed into the md parameter (into parm_in)
otherwise, the md parameters is directly communicated to the Flash Object by means of the function freshJS
The communication between javascript and Flash is managed with FABridge; you have to study that only if you are going to develop in flex
All this logic is in the following function (called plot)

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';

Chart and Palette Defaults

We don't need to communicate each time all the parameters. We have a special XML Document that supplies default data and color palettes. Its name is pointed by the urlDefault attribute into the Customization XML (urlDefault ="plotdefault.xml").

Here is the XML Document we used into the Demo. If you don't dislike the result, you can just ignore it.

<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>