TreeMap

Overview

TreeMap chart. Supports indefinite branching and colorizing for very complex and deeply nested charts.

Creating the TreeMap Component

The TreeMap extends the Ardisia ChartBase class and can be added to any container that implements IVisualElementContainer.

Using the TreeMap Component

The basic principle is that everything the TreeMap displays is a leaf or a branch. Branches are groups that hold other branches and leafs, E.G. they have children, and leafs have no children.

Nodes have a "weight", a numerical value that is determined from the "weightField" on the data or via a "weightFunction". The TreeMap will automatically calculate the total weight of all the nodes, and the smallest/largest weight can be retrieved via the "lowestWeight" and "greatestWeight" properties. A node's weight is used to determine its size and placement on the TreeMap.

Other relevant properties, like the label and color, are also determined by fields on the data, or via callback functions.

DataProvider

The TreeMap only accepts a dataProvider that implements the ICollection interface and must have a single root node. Should also be of a format that is understood by the DefaultDataDescriptor class. See the Flex docs for the Tree class and the DefaultDataDescriptor for additional information.

The data format is similar to the data structure of Tree data.

The TreeMap will automatically calculate the total weight of all the nodes, and the smallest/largest weight can be retrieved via the "lowestWeight" and "greatestWeight" properties.

Item Renderers

The item renderer is the same for both branch and leaf nodes.

TreeMaps can have huge numbers of renderers. To improve performance, focus on the itemRenderers. Reduce nested containers, filters, and text layout.

DataTip(s)

By default, a dataTip will display when the user hovers over data nodes in the chart. Uses the Ardisia DataTip class by default. See the "dataTipFactoryPart" skin part to customize the tip.

Tooltips can be passed TextFlow objects for a highly customized appearance.

The dataTip will persist for a time set by the "dataTipHideDelay" after users mouse out of data nodes.

Data tips can be customized via the "dataTipFormatFunction" by passing a TextFlow or a raw String.

Color

The color to use for leaf nodes is set either by the "colorField" directly on the data or via a "colorFormatFunction" callback that returns the color based on the node data.

If no color is provided directly, a default color scheme will be used.

Legend

The Ardisia Legend does not support the TreeMap.

Labels

Use the "labelField" or "labelFunction" to retrieve the text to display in nodes.

Weight

Use the "weightField" or "weightFunction" to retrieve the the node weight.

Selecting Branches

By default, selecting a branch does nothing. To enable zooming in, listen for TreeMapEvent.ITEM_MOUSE_DOWN and set the TreeMap's dataProvider to the raw nodeData.

var event:TreeMapEvent = event as TreeMapEvent;
switch (event.type)
{
	case TreeMapEvent.ITEM_MOUSE_DOWN:
		var renderer:ITreeMapItemRenderer = event.renderer;
		treemap.dataProvider = new ArrayCollection([renderer.data]);

		break;
}

Layout

Uses the squarified layout scheme. See http://www.win.tue.nl/~vanwijk/stm.pdf for an explanation of how the squarified layout works.

Set the gap betwee nodes via the "gap" property.

Branch Header Height

The height of the header for the branch nodes is set directly in the item renderer class via the measuredHeight.

Selected Custom Events

ITEM_MOUSE_DOWN
ardisia.components.treeMap.events.TreeMapEvent
Dispatched when a renderer is moused down.

ITEM_CLICK
ardisia.components.treeMap.events.TreeMapEvent
Dispatched when a renderer is clicked.

ITEM_ROLL_OVER
ardisia.components.treeMap.events.TreeMapEvent
Dispatched when a renderer is rolled over.

ITEM_ROLL_OUT
ardisia.components.treeMap.events.TreeMapEvent
Dispatched when a renderer is rolled out.

CHANGE
ardisia.components.treeMap.events.TreeMapEvent
Dispatched when the selectedItem changes via user interaction.

Themes & Skinning

Skins and default item renderers are provided for the Spark theme.

Example

See the TreeMap demo application for example code.

Back To Top