How to use ASP.NET MVC TreeMap control

TreeMaps, which displays hierarchical data as a set of nested rectangles where the area of each rectangle is proportional to its value, can be used to represent financial data, space usage, or to visualize any hierarchical data. Here's a quick guide to using the ComponentOne ASP.NET MVC TreeMap control.

The Basics of ASP.NET MVC TreeMap

The TreeMap control shows data as nested rectangles, and each sub-branch is shown as a smaller rectangle. Let's consider an example of displaying store sales by category, which can be further drilled down to an item. Each category is a top-level rectangle that shows the sales of each category, and each item in a category is another TreeMap Item.

Binding a TreeMap

Here, the treemap binds to the sales collection of the model. We set its binding-name property to “Category,” and set the child-items-path (the property for the sub-items) to the “Items” property of the model.

We'll also set the tooltip to show the sales amount:

<c1-tree-map id="@demoSettingsModel.ControlId" 
             binding="Sales" binding-name="Category" 
             child-items-path="Items">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-chart-tooltip content="<b>{name}</b><br />{value:c}"></c1-flex-chart-tooltip>
    <c1-flex-chart-datalabel position="Center" content="{name}"></c1-flex-chart-datalabel>
</c1-tree-map>

The amount of sales determines the size of the rectangle. For example, category “Camera” has the most sales, so it's the biggest rectangle. Cell Phones, on the other, has the smallest rectangle. This helps to analyze sales performance of each category relative to each other.

Color correlation in a TreeMap control

With TreeMap, it's possible to analyze to variables with size and color. In the above example, if we drill down through a category, the TreeMap arranges the sub items correlated with color to show profitable items and relatively less profitable items in a category.

Set the max-depth property to allow drill down in a TreeMap:

<c1-tree-map id="@demoSettingsModel.ControlId" 
             binding="Sales" binding-name="Category" 
             child-items-path="Items"
             max-depth="2">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-chart-tooltip content="<b>{name}</b><br />{value:c}"></c1-flex-chart-tooltip>
    <c1-flex-chart-datalabel position="Center" content="{name}"></c1-flex-chart-datalabel>
</c1-tree-map>

In this example, when we drill down through the Camera category, we find that Video is more profitable, so it's in dark blue. As profitability decreases, the color lightens:

TreeMap chart control supports appearance customization by using the palette attribute. A list of colors can be set to the treeMap's palette attribute, or you can declare individual treemap-item-styles with title-color, max-color and min-color.

TreeMap is a very useful chart for analyzing data extremes on a limited visual surface. To learn more, refer to the documentation or see the control in action.

Try the ComponentOne Studio Enterprise 30-day trial