Documentation DrasticCloud

DrasticCloud 1.3, by DrasticData.

Embedding DrasticCloud in your web page

We advise to use swfobject to include the DrasticCloud Flash component in your web page. To include DrasticCloud in your web page, call it from JavaScript width a width and height and the name of the container div. In addition, DrasticCloud needs a configuration file in xml and a data file which contains the data to be displayed in tab delimiter records. The default names being used by DrasticCloud are "DrasticCloud.xml" as the configuration file and "DrasticCloud.txt" as the data file. You can overrule these defaults (see later).

Here we show how to call DrasticCloud with width 300 and height 250 and default values for the rest: 

<html><head>
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
  var flashvars = {};
  var params = {};
  swfobject.embedSWF("DrasticCloud.swf", "cloud", "300", "250", "9.0.0", "expressInstall.swf", flashvars, params);
</script>
</head>
<body>
<div id="cloud">
  <a href="http://www.adobe.com/go/getflashplayer">
  <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
    alt="Get Adobe Flash player" /></a>
</div>
</body>

Background color

You can change the backgroundColor using the bgcolor parameter in the javascript of the calling web page as follows 

  var params = {
    bgcolor: "#FFFFFF"
  };

Configuration

By default DrasticCloud will look for a configuration file named "DrasticCloud.xml" and a data file "DrasticCloud.txt" in the map from where it was called. You can specify different files to use in the flashvars section of the calling code. 

  var flashvars = {
    configFile: "myCloud.xml",
    dataFile: "data/myDataFile.txt"
  };
Required configuration options: Optional configuration options:

Example configuration file:

<?xml version="1.0" encoding="utf-8" ?>
<Configuration>
	<dataColumn>2005</dataColumn>
	<dataColumn>2006</dataColumn>
	<dataColumn>2007</dataColumn>
	<dataColumn>2008</dataColumn>
	<displayColumn>name</displayColumn>
	<textColor>0x808080</textColor>
	<colorColumn>gender</colorColumn>
	<colorColumnValue value="0" color="0xED8F94" selectedColor="0xD91F28"></colorColumnValue>
	<colorColumnValue value="1" color="0x648DDB" selectedColor="0x2654A8"></colorColumnValue>
	<sortReverse>true</sortReverse>
	<onclick>displayname</onclick>
</Configuration>
Data file:

The dataFile contains records. Fields are tab delimited. The first line of the data file must contains the names of the columns. Columns contain numbers. A negative number means that it will not be displayed. An example data file is shown below. More extensive examples are included in the DrasticCloud release.

Example data file:

name gender 2006 2007 2008 2009
John	1	300	350	600	700
Jim	1	200	100	50	-1
Julie	0	200	400	500	350

Communication between browser and DrasticCloud Component

Execute JavaScript when a tag is selected

You can execute a javascript function when the user clicks on a tag using the onclick variable (see above). We give an example of its use: 

In the xml configuration file:
  <onclick>displayname</onclick>
  
In the calling html file:
  <script type="text/javascript">
    function displayname(s) {alert("you clicked on tag " + s);}
  </script>

Manipulating the cloud from the embedding Javascript

You can increase or decrease the slider from the embedding javascript by calling the "prev" or next" function. You can set the cloud to a specific datacolumn by calling the function "showColumn" with the string parameter of the column to show. All three functions will return true if the cloud was changed and false of the data column was not found or the slider was already at its limits. Example: 

<html><head>
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
    var flashvars = {
      configFile: "DrasticCloud.xml"
    };
    var params = {
      menu: "false",
      bgcolor: "#FFFFFF"
    };
    swfobject.embedSWF("DrasticCloud.swf", "cloud", "300", "250", "9.0.0", "expressInstall.swf", flashvars, params);
</script>
</head>
<body>
<div id="cloud">
  <a href="http://www.adobe.com/go/getflashplayer">
  <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
    alt="Get Adobe Flash player" /></a>
</div>
  <a href="javascript:{}" onclick="cloud.prev()">prev</a>
  <a href="javascript:{}" onclick="cloud.next()">next</a>
	
  <a href="javascript:{}" onclick="cloud.showColumn('2008')">set slider to 2008</a>
</div>
</body>
</html>