Getting Started

TreeMap is used to represent a large hierarchical collection of quantitative data. The hierarchical structure is revealed by the nesting level and location of each rectangle and convenient drill-down capabilities are used to effectively navigate through the hierarchy. The area and color of each rectangle are used to represent any other quantitative properties.

TreeMap can be integrated easily in any MXML application. The user only needs to:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	xmlns:treemap="fr.kapit.components.treemap.*">
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var myDataProvider:ArrayCollection = new ArrayCollection([ 
    			{itemLabel:"Item 1", itemArea:500, itemColor:203, itemTooltip:"Tooltip 1"},  
    			{itemLabel:"Item 2", itemArea:400, itemColor:382, itemTooltip:"Tooltip 2"},  
    			{itemLabel:"Item 3", itemArea:100, itemColor:560, itemTooltip:"Tooltip 3"}, 
			]);
		]]>
	</mx:Script>

	<treemap:TreeMap id="myTreeMap"
		dataProvider={myDataProvider}
		labelField="itemLabel"
		areaField="itemArea" 
		colorField="itemColor" 
		toolTipField="itemTooltip"
		width="100%" height="80%"/>
		
        <treemap:TreeMapLegend treeMap="{myTreeMap}" width="100%" height="20%" />
</mx:Application>