In This Topic
Tree maps display hierarchical (tree-structured) data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified value versus the total aggregated value of all leaf nodes. Tree maps allow you to easily see patterns that would be difficult to spot in other ways, such as if a certain color is particularly relevant. A second advantage of tree maps is that, by construction, they make efficient use of space. As a result, they can legibly display thousands of items on the screen simultaneously.
Creating a TreeMap Chart
You create a treemap chart by creating an instance of the NTreeMapChart class. There are two ways to achieve this - using a predefined chart type of doing it manually. The following code snippets show how each of those approaches works:
Creating a TreeMap Chart Using a Predefined Chart Type
| C# |
Copy Code
|
|
chartView.Surface.CreatePredefinedChart(ENPredefinedChartType.TreeMap);
NTreeMapChart treeMap = (NTreeMapChart)chartView.Surface.Charts[0];
|
Creating a TreeMap Chart from Code
| C# |
Copy Code
|
|
// create a dock panel
NDockPanel dockPanel = new NDockPanel();
chartView.Surface.Content = dockPanel;
// create a docked label
NLabel label = new NLabel();
label.Text = "TreeMap";
NDockLayout.SetDockArea(label, ENDockArea.Top);
dockPanel.AddChild(label);
// create a new legend
NLegend legend = new NLegend();
NDockLayout.SetDockArea(legend, ENDockArea.Right);
dockPanel.AddChild(legend);
// create a new funnel chart
NTreeMapChart treeMap = new NTreeMapChart();
NDockLayout.SetDockArea(treeMap, ENDockArea.Center);
dockPanel.AddChild(treeMap);
|
Passing Data
The data in the tree map is organized as a tree hierarchy. The tree hierarchy is created by adding instances of the NGroupTreeMapNode and NValueTreeMapNode classes that represent a collection of nodes and leaf (value) node respectively. The following code shows how to create the simple tree map:
| C# |
Copy Code
|
|
// add some group and value nodes
NGroupTreeMapNode rootTreeMapNode = new NGroupTreeMapNode();
treeMap.RootTreeMapNode = rootTreeMapNode;
NGroupTreeMapNode technologyNode = new NGroupTreeMapNode("Technology");
technologyNode.Margins = new NMargins(2);
technologyNode.Border = NBorder.CreateFilledBorder(NColor.Black);
technologyNode.BorderThickness = new NMargins(2);
rootTreeMapNode.ChildNodes.Add(technologyNode);
technologyNode.ChildNodes.Add(new NValueTreeMapNode(656.4, -1.16, "Software Programming", new NColorFill(NColor.FromRGB(129, 200, 0))));
technologyNode.ChildNodes.Add(new NValueTreeMapNode(619.9, 1.22, "Semiconductors", new NColorFill(NColor.FromRGB(255, 204, 0))));
technologyNode.ChildNodes.Add(new NValueTreeMapNode(535.9, -0.1, "Communications Equipment", new NColorFill(NColor.FromRGB(241, 85, 0))));
technologyNode.ChildNodes.Add(new NValueTreeMapNode(277.1, 0.06, "Computer Hardware", new NColorFill(NColor.FromRGB(126, 0, 255))));
NGroupTreeMapNode healthcareNode = new NGroupTreeMapNode("Healthcare");
healthcareNode.Margins = new NMargins(2);
healthcareNode.Border = NBorder.CreateFilledBorder(NColor.Black);
healthcareNode.BorderThickness = new NMargins(2);
rootTreeMapNode.ChildNodes.Add(healthcareNode);
healthcareNode.ChildNodes.Add(new NValueTreeMapNode(446, -0.45, "Major Drugs", new NColorFill(NColor.FromRGB(129, 200, 0))));
healthcareNode.ChildNodes.Add(new NValueTreeMapNode(593.3, -1.77, "Biotechnology Drugs", new NColorFill(NColor.FromRGB(255, 204, 0))));
healthcareNode.ChildNodes.Add(new NValueTreeMapNode(325.4, -0.67, "Medical Equipment Supplies", new NColorFill(NColor.FromRGB(241, 85, 0))));
|
TreeMap Node Filling
Each tree map node has a property called BackgroundFillStyle that allows you to assign explicit fill to the node. If you do not assign a fill the node the tree map will automatically assign one using the following rules:
1. If this is a value node then it will get the first available palette object from the ancestor chain of group nodes and assign a color that represents the value node's change value on that palette.
2. If this is a group node then it does not assign a fill.
To illustrate how this works consider that we don't specify explicit color to the nodes and assign a palette to the root node
| C# |
Copy Code
|
|
//...
technologyNode.ChildNodes.Add(new NValueTreeMapNode(656.4, -1.16, "Software Programming"));
technologyNode.ChildNodes.Add(new NValueTreeMapNode(619.9, 1.22, "Semiconductors"));
technologyNode.ChildNodes.Add(new NValueTreeMapNode(535.9, -0.1, "Communications Equipment"));
//...
NThreeColorPalette palette = new NThreeColorPalette();
palette.BeginColor = NColor.Red;
palette.OriginColor = NColor.White;
palette.OriginValue = 0;
palette.EndColor = NColor.Green;
rootTreeMapNode.Palette = palette;
|
Then the tree map will automatically compute a color for the node based on the palette properties assigned to the root tree map node. The nodes with bigger positive change get colored in more intense shades of green, whereas the nodes with more negative change get colored in more intense shades of red. The palette settings are controlled from the palette object associated with the node parent group node. The following code shows how to create a custom palette:
| C# |
Copy Code
|
|
NColorValuePalette palette = new NColorValuePalette();
palette.ColorValuePairs = new NDomArray<NColorValuePair>(new NColorValuePair[] {
new NColorValuePair(-2, NColor.Blue),
new NColorValuePair(0, NColor.White),
new NColorValuePair(2, NColor.Green) });
rootTreeMapNode.Palette = palette;
|
TreeMap Node Text
The NTreeMapNode (base class for NGroupTreeMapNode and NValueTreeMapNode) has a property called Format that defines the text that appears inside the tree map node rectangle. By default this property is set to "<label> <change_percent>" for value nodes and "<label>" for group nodes, meaning that value nodes by default will display the node label followed by the formatted change value and group nodes will display the node label only. The following table shows the different formatting commands you can use in the Format property:
| Format Command |
Description |
| label |
Applies to both value and group nodes. Replaces the command with the value of the Label property associated with the node. |
| change |
Applies to value nodes only. Replaces the command with the formatted value of the Change property associated with the node. |
| change_percent |
Applies to value nodes only. Replaces the command with the formatted percentage value of the Change property associated with the node. |
| min_value |
Applies to group nodes only. Replaces the command with the formatted minimum value of its child nodes. |
| max_value |
Applies to group nodes only. Replaces the command with the formatted maximum values of its child nodes. |
| total_value |
Applies to group nodes only. Replaces the command with the formatted total sum of its child nodes values. |
| min_change |
Applies to group nodes only. Replaces the command with the formatted minimum change value of its child nodes. |
| max_change |
Applies to group nodes only. Replaces the command with the formatted maximum change value of its child nodes. |
| min_change_percent |
Applies to group nodes only. Replaces the command with the formatted minimum percentage change value of its child nodes. |
| max_change_percent |
Applies to group nodes only. Replaces the command with the formatted maximum percentage change of its child nodes. |
The following example shows how to apply a custom format to the technology group and change the way change values are formatted to triple decimal precision:
| C# |
Copy Code
|
|
technologyNode.Format = "<label> change from <min_change> to <max_change>";
technologyNode.ValueFormatter = new NNumericValueFormatter("0.000");
|
The text visualization properties of the tree map nodes such as font, style, font size etc. are controlled from the le LabelTextStyle property of the node
TreeMap Node Legend
Each group tree map node can output information about itself or its descendants on a legend. This is controlled from the LegendView property of the group tree map node. The following code shows how to create a tree map with associated legend:
| C# |
Copy Code
|
|
// create a dock panel
NDockPanel dockPanel = new NDockPanel();
chartView.Surface.Content = dockPanel;
// create a docked label
NLabel label = new NLabel();
label.Text = "TreeMap";
NDockLayout.SetDockArea(label, ENDockArea.Top);
dockPanel.AddChild(label);
// create a new legend
NLegend legend = new NLegend();
NDockLayout.SetDockArea(legend, ENDockArea.Right);
dockPanel.AddChild(legend);
// create a new funnel chart
NTreeMapChart treeMap = new NTreeMapChart();
NDockLayout.SetDockArea(treeMap, ENDockArea.Center);
dockPanel.AddChild(treeMap);
// link the tree map to the legend
treeMap.Legend = legend;
// create a root node with associated legend view
NGroupTreeMapNode rootTreeMapNode = new NGroupTreeMapNode();
NGroupTreeMapNodeLegendView legendView = new NGroupTreeMapNodeLegendView();
rootTreeMapNode.LegendView = legendView;
treeMap.RootTreeMapNode = rootTreeMapNode;
|
The NGroupTreeMapLegendView object is similar to the series legend view object with the exception of the Mode property which accepts values from the ENTreeMapNodeLegendMode enum:
| ENTreeMapNodeLegendMode |
Description |
| None |
The node is not represented on the legend |
| Group |
The node is represented on the legend by one entry |
| ValueNodes |
The group node adds its child nodes to the legend |
| GroupAndChildNodes |
Both group and value nodes are exported to the legend |
| Palette |
The group node adds a palette to the legend |
TreeMap Node Box
Each tree node has properties called Margins, Padding, BorderThickness and Border that control the box generated by the node. The Margins property controls the left, top, right and bottom spacing applied to the box before the border is drawn. The Padding property controls the left, top, right and bottom spacing of the box content area from the border (stroke). The following code snippets show how to apply margins, border and padding:
| C# |
Copy Code
|
|
treeMapNode.Margins = new NMargins(2);
treeMapNode.Border = NBorder.CreateFilledBorder(NColor.Black);
treeMapNode.BorderThickness = new NMargins(2);
treeMapNode.Padding = new NMargins(1);
|
TreeMap Node Label Fit Modes
The tree map node has a property called LabelFitModes that controls how the label inside the box is fitted inside the node content area. The following table lists the options of the ENTreeMapNodeLabelFitMode enum:
| ENTreeMapNodeLabelFitMode |
Description |
| Hide |
Automatically hides the label if its size exceeds the size of node. Always succeeds. |
| Wrap |
Wraps the label if its size exceeds the size of the node. Always succeeds. |
| Trim |
Trims the label if its size exceeds the size of the node. Always succeeds. |
| AutoScale |
Automatically scales the label so that it fits the bounds of the node. Will succeed if the computed scale factor is bigger than MinAutoScale. |
You can specify one of or more label fit modes as shown in the following example:
| C# |
Copy Code
|
|
treeMapNode.LabelFitModes = new NDomArray<ENTreeMapNodeLabelFitMode>(new ENTreeMapNodeLabelFitMode[] { ENTreeMapNodeLabelFitMode.AutoScale, ENTreeMapNodeLabelFitMode.Hide });
treeMapNode.MinAutoScale = 0.5;
|
The above code will instruct the node to auto scale labels that don't fit. If the computed auto scaling factor is below 0.5 (e.g. the font size needed to display the label drops more than a half) the label will be hidden.