# TreeMap 101

This page shows how to get started with Wijmo's TreeMap control.

## Getting Started

Here are the steps for getting started with the TreeMap control in JavaScript applications:

1. Add references to AngularJS, Wijmo, and Wijmo's AngularJS directives.
2. Include the Wijmo directives in the app module:
   `var app = angular.module('app', ['wj']);`
3. Add a controller to provide data and logic.
4. Add a TreeMap to the page and bind it to the data.
5. Add an appropriate CSS to customize the treemap's appearance.

<html> <head> <link rel="stylesheet" href="css/bootstrap.css"/> <link rel="stylesheet" href="css/wijmo.css"/> <link href="css/app.css" rel="stylesheet"/> <script src="scripts/angular.js"></script> <script src="scripts/wijmo.js"></script> <script src="scripts/wijmo.chart.js"></script> <script src="scripts/wijmo.chart.hierarchical.js"></script> <script src="scripts/wijmo.angular.js"></script> <script src="scripts/app.js"></script> </head> <body ng-app="app" ng-controller="appCtrl"> <!-- this is the treemap --> <wj-tree-map items-source="data" label-content="{name}" binding-name="bindingName" binding="sales"> </wj-tree-map> </body> </html>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { function rand() { return Math.round(Math.random() * 100); } // generate some random data var categories = ['Beverages', 'Condiments', 'Confections', 'Dairy Products', 'Grains/Cereals', 'Meat/Poultry', 'Produce', 'Seafood'], subCategories = [['Soft drinks', 'Coffees', 'Teas', 'Beers', 'Ales'], ['Sweet and Savory sauces', 'Relishes', 'Spreads', 'Seasonings'], ['Desserts', 'Candies', 'Sweet breads'], ['Chesses'], ['Breads', 'Crackers', 'Pasta', 'Cereal'], ['Prepared meats'], ['Dried fruit', 'Bean curd'], ['Seaweed', 'Fish']]; function getData() { var data = []; categories.forEach(function (c, idx) { var sub = subCategories[idx]; sub.forEach(function (s) { data.push({ category: c, subCategory: s, sales: rand() }); }); }); return data; } // add data array to scope $scope.data = getData(); });
/* set default chart style */ .wj-treemap { height: 400px; background-color: white; box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75); padding: 8px; margin-bottom: 12px; }

#### Result (live):

## Group Collection

The sample shows how to use the TreeMap chart with grouped CollectionView.

<wj-tree-map items-source="groupData" label-content="{name}" binding-name="bindingName" binding="sales"> </wj-tree-map>
function rand() { return Math.round(Math.random() * 100); } // generate some random data var categories = ['Beverages', 'Condiments', 'Confections', 'Dairy Products', 'Grains/Cereals', 'Meat/Poultry', 'Produce', 'Seafood'], subCategories = [['Soft drinks', 'Coffees', 'Teas', 'Beers', 'Ales'], ['Sweet and Savory sauces', 'Relishes', 'Spreads', 'Seasonings'], ['Desserts', 'Candies', 'Sweet breads'], ['Chesses'], ['Breads', 'Crackers', 'Pasta', 'Cereal'], ['Prepared meats'], ['Dried fruit', 'Bean curd'], ['Seaweed', 'Fish']]; function getGroupCVData() { var data = [], len = 1000, catLen = categories.length, subCat, randomC, randomSC; for (var i = 0; i < len; i++) { randomC = Math.floor(Math.random() * catLen); subCat = subCategories[randomC]; randomSC = Math.floor(Math.random() * subCat.length); data.push({ category: categories[randomC], subCategory: subCat[randomSC], sales: rand() }); } var cv = new wijmo.collections.CollectionView(data); cv.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('category')); cv.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('subCategory')); return cv; } // add data array to scope $scope.groupData = getGroupCVData();

#### Result (live):

## Type

The TreeMap chart control allows you to customize its layout and appearance by using the type property.

<wj-tree-map control="typeTM" items-source="data" label-content="{name}" binding-name="bindingName" binding="sales"> </wj-tree-map> <wj-menu header=Type: <b>Squarified</b>" item-clicked="typeChanged(s, e)"> <wj-menu-item value="'Squarified'">Squarified</wj-menu-item> <wj-menu-item value="'Horizontal'">Horizontal</wj-menu-item> <wj-menu-item value="'Vertical'">Vertical</wj-menu-item> </wj-menu>
$scope.data = getData(); $scope.bindingName = ['category', 'subCategory']; $scope.typeChanged = function (sender) { $scope.typeTM.type = wijmo.chart.hierarchical.TreeMapType[sender.selectedValue] sender.header = 'Type: ' + sender.selectedValue + ''; };

#### Result (live):

Squarified Horizontal Vertical

## Max Depth

The TreeMap chart control allows you to set the maximum number of node levels to show in the current view by using the maxDepth property. Levels are flattened into the current plane.

<wj-tree-map control="maxDepthTM" max-depth="maxDepth" items-source="maxDepthData" label-content="{name}" binding-name="'type'" binding="sales" child-items-path="'items'"> </wj-tree-map> <wj-input-number control="inputMaxDepth" value="maxDepth" min="0" max="4" step="1"> </wj-input-number>
$scope.maxDepthData = getMaxDepthData(); $scope.inputMaxDepth = null; $scope.maxDepthTM = null; $scope.maxDepth = 2; $scope.$watch('maxDepth', function () { var maxDepth = $scope.inputMaxDepth, val = $scope.maxDepth; if (maxDepth != null) { if (val < maxDepth.min || val > maxDepth.max) { return; } $scope.maxDepthTM.maxDepth = val; } });

#### Result (live):

## Theming

The TreeMap chart control allows you to customize the appearance by using the palette property.

<wj-tree-map class="custom-treemap" items-source="data" label-content="{name}" binding-name="bindingName" binding="sales" palette="palette1"> </wj-tree-map> <wj-tree-map class="custom-treemap" items-source="data" label-content="{name}" binding-name="bindingName" binding="sales" palette="palette2"> </wj-tree-map>
$scope.data = getData(); $scope.bindingName = ['category', 'subCategory']; $scope.palette1 = [{ titleColor: '#00277d', maxColor: 'rgba(0,39,125,0.7)', minColor: 'rgba(168,187,230,0.7)' }, { titleColor: '#7d1f00', maxColor: 'rgba(125,21,0,0.7)', minColor: 'rgba(230,183,168,0.7)' }, { titleColor: '#007d27', maxColor: 'rgba(0,125,39,0.7)', minColor: 'rgba(168,230,188,0.7)' }, { titleColor: '#7d003c', maxColor: 'rgba(125,0,60,0.7)', minColor: 'rgba(230,168,198,0.7)' }, { titleColor: '#7d4300', maxColor: 'rgba(125,67,0,0.7)', minColor: 'rgba(230,201,168,0.7)' }, { titleColor: '#51007d', maxColor: 'rgba(81,0,125,0.7)', minColor: 'rgba(209,170,230,0.7)' }, { titleColor: '#7d7400', maxColor: 'rgba(125,116,0,0.7)', minColor: 'rgba(230,226,168,0.7)' }, { titleColor: '#970000', maxColor: 'rgba(151,0,0,0.7)', minColor: 'rgba(230,169,169,0.7)' }]; $scope.palette2 = ['#88bde6', '#fbb258', '#90cd97', '#f6aac9', '#bfa554', '#bc99c7', '#eddd46', '#f07e6e', '#8c8c8c'];
.custom-treemap .wj-data-label { fill: #000; }

#### Result (live):