# 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. Add a component to provide data and logic.
3. Add a TreeMap to the page and bind it to the data.
4. Add some CSS to customize the treemap's appearance.

HTML
<!DOCTYPE html> <html> <head> <!-- Supporting libraries --> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <!-- Configure SystemJS --> <script src="systemjs.config.js"></script> <!-- Bootstrap --> <link rel="stylesheet" type="text/css" href="bin/Devel/external/bootstrap/css/bootstrap.css" /> <!-- Wijmo --> <link href="bin/Devel/sources/styles/wijmo.css" rel="stylesheet" /> <!-- Configure and load application --> <link href="src/styles/app.css" rel="stylesheet" /> <!-- Load the root application module --> <script> System.import('./src/app'); </script> </head> <body> <!-- Add root application component --> <app-cmp></app-cmp> </body> </html> <!-- Root application component's template (app.html) -->; <wj-tree-map [itemsSource]="data" labelContent="{name}" [bindingName]="bindingName" binding="sales"> </wj-tree-map>
TS
import { Injectable } from '@angular/core'; // Common data service @Injectable() export class DataSvc { rand(): number { return Math.round(Math.random() * 100); }; 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']]; // data used to generate random items getData(): any[] { var data = []; this.categories.forEach(function (c, idx) { var sub = this.subCategories[idx]; sub.forEach(function (s) { data.push({ category: c, subCategory: s, sales: this.rand() }); }); }); return data; }; } --------------------Component----------------------- // Angular import * as wjcCore from 'wijmo/wijmo'; import * as wjcChart from 'wijmo/wijmo.chart'; import * as wjcInput from 'wijmo/wijmo.input'; import { Component, EventEmitter, Input, Inject, enableProdMode, ViewChild, NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjChartModule } from 'wijmo/wijmo.angular2.chart'; import { WjChartHierarchicalModule } from 'wijmo/wijmo.angular2.chart.hierarchical'; import { WjInputModule } from 'wijmo/wijmo.angular2.input'; import { TabsModule } from './components/AppTab'; import { DataSvc } from './services/DataSvc'; // The Explorer application root component. @Component({ selector: 'app-cmp', templateUrl: 'src/app.html' }) export class AppCmp { data; protected dataSvc: DataSvc; bindingName; constructor(@Inject(DataSvc) dataSvc: DataSvc) { // data for FlexChart this.dataSvc = dataSvc; this.data = this.dataSvc.getData(); this.bindingName = ['category', 'subCategory']; } } @NgModule({ imports: [WjInputModule, WjChartModule, WjChartHierarchicalModule, BrowserModule, FormsModule, TabsModule], declarations: [AppCmp], providers: [DataSvc], bootstrap: [AppCmp] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
CSS
/* 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; display:block; }

#### Result (live):

## Group Collection

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

HTML
<wj-tree-map [itemsSource]="groupData" labelContent="{name}" [bindingName]="bindingName" binding="sales"> </wj-tree-map>
TS
import { Injectable } from '@angular/core'; import * as wjcCore from 'wijmo/wijmo'; // Common data service @Injectable() export class DataSvc { rand(): number { return Math.round(Math.random() * 100); }; 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']]; // data used to generate random items getGroupCVData(): wjcCore.CollectionView { var data = [], len = 1000, catLen = this.categories.length, subCat, randomC, randomSC; for (var i = 0; i < len; i++) { randomC = Math.floor(Math.random() * catLen); subCat = this.subCategories[randomC]; randomSC = Math.floor(Math.random() * subCat.length); data.push({ category: this.categories[randomC], subCategory: subCat[randomSC], sales: this.rand() }); } var cv = new wjcCore.CollectionView(data); cv.groupDescriptions.push(new wjcCore.PropertyGroupDescription('category')); cv.groupDescriptions.push(new wjcCore.PropertyGroupDescription('subCategory')); return cv; }; } --------------------Component----------------------- export class AppCmp { groupData; protected dataSvc: DataSvc; //chart properties bindingName = ['category', 'subCategory']; constructor(@Inject(DataSvc) dataSvc: DataSvc) { // data for FlexChart this.dataSvc = dataSvc; this.groupData = this.dataSvc.getGroupCVData(); } }

#### Result (live):

## Type

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

HTML
<wj-tree-map #typeTM [type]="type" [itemsSource]="data" labelContent="{name}" [bindingName]="bindingName" binding="sales"> </wj-tree-map> <wj-menu #typeMenu header="Type" value="Squarified" (itemClicked)="typeChanged(typeMenu)"> <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>
TS
export class AppCmp { data; @ViewChild('typeTM') typeTM: wjcChartHierarchical.TreeMap; protected dataSvc: DataSvc; constructor(@Inject(DataSvc) dataSvc: DataSvc) { this.dataSvc = dataSvc; this.data = this.dataSvc.getData(); } typeChanged = (sender: wjcInput.Menu) => { if (!this.typeTM) { return; } this.typeTM.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.

HTML
<wj-tree-map #maxDepthTM [itemsSource]="maxDepthData" [maxDepth]="2" labelContent="{name}" bindingName="type" binding="sales" childItemsPath="items"> </wj-tree-map> <wj-input-number #inputMaxDepth (valueChanged)="maxDepthChanged(inputMaxDepth)" [value]="2" [min]="0" [max]="4" [step]="1"> </wj-input-number>
TS
export class AppCmp { maxDepthData; @ViewChild('maxDepthTM') maxDepthTM: wjcChartHierarchical.TreeMap; protected dataSvc: DataSvc; constructor(@Inject(DataSvc) dataSvc: DataSvc) { // data for FlexChart this.dataSvc = dataSvc; this.maxDepthData = this.dataSvc.getMaxDepthData(); } maxDepthChanged = (sender: wjcInput.InputNumber) => { if (sender.value < sender.min || sender.value > sender.max) { return; } if (!this.maxDepthTM) { return; } this.maxDepthTM.maxDepth = +sender.value; }; }

#### Result (live):

## Theming

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

HTML
<wj-tree-map class="custom-treemap" [itemsSource]="data" labelContent="{name}" [bindingName]="bindingName" binding="sales" [palette]="palette1"> </wj-tree-map> <wj-tree-map class="custom-treemap" [itemsSource]="data" labelContent="{name}" [bindingName]="bindingName" binding="sales" [palette]="palette2"> </wj-tree-map>
TS
export class AppCmp { data; protected dataSvc: DataSvc; palette1; palette2; bindingName; constructor(@Inject(DataSvc) dataSvc: DataSvc) { // data for FlexChart this.dataSvc = dataSvc; this.data = this.dataSvc.getData(); this.bindingName = ['category', 'subCategory']; this.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)' }]; this.palette2 = ['#88bde6', '#fbb258', '#90cd97', '#f6aac9', '#bfa554', '#bc99c7', '#eddd46', '#f07e6e', '#8c8c8c']; } }
CSS
.custom-treemap .wj-data-label { fill: #000; }

#### Result (live):