Getting Started with TreeMap for Studio ASP.NET Wijmo

Treemaps are an unique way of visualizing hierarchical data, they can be used to represent financial data, space usage or to visualize any hierarchical data. The ComponentOne TreeMap control displays hierarchical data as a set of nested rectangles where the area of each rectangle is proportional to its value. Let's see how to get started with Treemap for ASP.NET Wijmo.

Basics

The Treemap control shows data as nested rectangles, each top level rectangle is a "TreeMapItem", each level will have "Items" collection and then this collection can have N number of "TreeMapItem". To elaborate more on this let's consider an example of showing continent wise GDP data which can be further drilled down to a country level. Hence, each continent is the top level rectangle which will show the sum GDP of each country in that continent, and then each country in a continent is again a "TreeMapItem". The TreeMapItems can be created using ItemsCollection from the designer or in markup. Let's create a TreeMap for the above mentioned example for Continent wide GDP. 1. Drop a C1TreeMap into the designer. 2. Using the smart tag open the items collection. 3. Add a TreemapItem to the collection, set the "Label" to "NorthAmerica" and the value to 18625. 4. Click the items collection and add TreemapItem "United States" with value set to 16800. Add another TreemapItem and set the label to "Canada", and set the value to 1825. Then click "OK" 5. Similarly add other continent and country data using the TreemapItem Collection Editor. Here is the markup for the same.

<wijmo:C1TreeMap runat="server" ID="C1TreeMap1" MaxColor="#1A3380" MinColor="#EBF0FF"  
MinColorValue="0" Height="600" LabelFormatter="labelFormatter">  
<Items>  
<wijmo:TreeMapItem Label="North America" Value="18625">  
<Items>  
<wijmo:TreeMapItem Label="United States" Value="16800"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Canada" Value="1825"></wijmo:TreeMapItem>  
</Items>  
</wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Asia" Value="18934">  
<Items>  
<wijmo:TreeMapItem Label="China" Value="9240"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Japan" Value="4901"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="India" Value="1876"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="South Korea" Value="1304"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Indonesia" Value="868"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Saudi Arabia" Value="745"></wijmo:TreeMapItem>  
</Items>  
</wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Europe" Value="16685">  
<Items>  
<wijmo:TreeMapItem Label="Germany" Value="3634"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="France" Value="2734"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="United Kingdom" Value="2522"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Russia" Value="2096"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Italy" Value="2071"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Spain" Value="1358"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Turkey" Value="820"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Netherlands" Value="800"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Switzerland" Value="650"></wijmo:TreeMapItem>  
</Items>  
</wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="South America" Value="4554">  
<Items>  
<wijmo:TreeMapItem Label="Brazil" Value="2245"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Mexico" Value="1260"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Argentina" Value="611"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Venezuela" Value="438"></wijmo:TreeMapItem>  
</Items>  
</wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Australasia & Oceania" Value="1742">  
<Items>  
<wijmo:TreeMapItem Label="Australia" Value="1560"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="New Zealand" Value="182"></wijmo:TreeMapItem>  
</Items>  
</wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="Africa" Value="872">  
<Items>  
<wijmo:TreeMapItem Label="Nigeria" Value="522"></wijmo:TreeMapItem>  
<wijmo:TreeMapItem Label="South Africa" Value="350"></wijmo:TreeMapItem>  
</Items>  
</wijmo:TreeMapItem>  

A point to note is the setting of "MinColor" and "MaxColor" which is assigned to regions using a color range was done to depict high GDP areas in darker colors and then the shading become gradually lighter for regions with lesser GDP. You can drill down each continent by clicking on an individual country and then navigate upwards by pressing the right mouse button. Loading ExternalData The C1TreeMap control can be loaded with data at client-side. Imagine we have a OData service which returns hierarchical data like Northwind categories and products in each category. So we would need JavaScript that calls the service and then creates an array of data which has objects of category and each such object further has an array of product items. Here is the script to get the data:

var dataCount = 0,  
treemapData = [];  

$(function () {  
$.ajax({  
url: "http://services.odata.org/Northwind/Northwind.svc/Categories?$format=json&$expand=Products",  
crossOrigin: true,  
success: function (result) {  
$.each(result.value, function (idx, r) {  
var data = {  
name: r.CategoryName,  
count: 0,  
items: []  
};  

$.each(r.Products, function (i, p) {  
var count = p.UnitsInStock,  
d = {  
name: p.ProductName,  
count: count  
};  
data.items[i] = d;  
data.count += count;  
});  

treemapData.push(data);  
});  
createTreemap();  
}  
});  
});  

Here is the script to initialize the treemap client side and load data.

function createTreemap() {  
$('#<%=C1TreeMap1.ClientID%>').c1treemap({  
showTooltip: true,  
valueBinding: "count",  
labelBinding: "name",  
data: treemapData  
});  
}  

Here is the simple markup on the page for Treemap:

<wijmo:c1treemap runat="server" id="C1TreeMap1" Width="95%" Height="600px">  
</wijmo:c1treemap>  

That is all it takes to quickly configure and create rich hierarchical datamaps using the ComponentOne Treemap control. You can get started with Treemap and loads of other data visualization controls by downloading the Studio ASP.NET Wijmo.