Wijmo

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 Wijmo.
  2. Add markup to serve as the Wijmo control's host.
  3. Initialize the Wijmo control(s) via JavaScript.
  4. (Optional) Add some CSS to customize the control's appearance.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link href="css/app.css" rel="stylesheet" type="text/css" /> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/wijmo.chart.js" type="text/javascript"></script> <script src="scripts/wijmo.chart.hierarchical.js" type="text/javascript"></script> </head> <body> <!-- TreeMap --> <div id="introChart"></div> </body> </html>
// create controls var chart = new wijmo.chart.hierarchical.TreeMap('#introChart'); 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']], rand = function () { return Math.round(Math.random() * 100) }, getData = function() { var self = this, data = []; categories.forEach(function(c, idx) { var sub = self.subCategories[idx]; sub.forEach(function(s) { data.push({ category: c, subCategory: s, sales: self.rand() }); }); }); return data; }; // initialize TreeMap's properties chart.beginUpdate(); chart.binding = 'sales'; chart.bindingName = ['category', 'subCategory']; chart.itemsSource = getData(); chart.dataLabel.position = wijmo.chart.LabelPosition.Center; chart.dataLabel.content = '{name}'; chart.endUpdate();

Result (live):

Group Collection

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

<div id="groupCVChart"></div>
// create controls var chart = new wijmo.chart.hierarchical.TreeMap('#groupCVChart'); 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']], rand = function () { return Math.round(Math.random() * 100) }, getGroupCVData = function() { 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; }; // initialize TreeMap's properties chart.beginUpdate(); chart.binding = 'sales'; chart.bindingName = ['category', 'subCategory']; chart.itemsSource = getGroupCVData(); chart.dataLabel.content = '{name}'; chart.endUpdate();

Result (live):

Type

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

<div id="typeChart"></div> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-12"> <select id="typeMenu"> <option value="0" selected="selected">Squarified</option> <option value="1">Horizontal</option> <option value="2">Vertical</option> </select> </div> </div> </div>
// create TreeMap and Menus var chart = new wijmo.chart.hierarchical.TreeMap('#typeChart'), typeMenu = new wijmo.input.Menu('#typeMenu'); // initialize TreeMap's properties chart.beginUpdate(); chart.binding = 'sales'; chart.bindingName = ['category', 'subCategory']; chart.itemsSource = app.getData(); chart.dataLabel.position = wijmo.chart.LabelPosition.Center; chart.dataLabel.content = '{name}'; chart.endUpdate(); // update the menus' headers typeMenu.selectedIndexChanged.addHandler(function () { if (typeMenu.selectedValue) { // update TreeMap's type chart.type = parseInt(typeMenu.selectedValue); // update menu header updateMenuHeader(typeMenu, 'Type'); } }); updateMenuHeader(typeMenu, 'Type'); // helper function for Menu headers function updateMenuHeader(menu, prefix) { menu.header = '' + prefix + ': ' + menu.text; }

Result (live):

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.

<div id="maxDepthChart"></div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Max Depth</label> <div class="col-md-9"> <input id="maxDepth" type="text" /> </div> </div> </div>
// create controls var chart = new wijmo.chart.hierarchical.TreeMap('#maxDepthChart'), maxDepth = new wijmo.input.InputNumber('#maxDepth'); // initialize TreeMap's properties chart.beginUpdate(); chart.maxDepth = 2; chart.binding = 'sales'; chart.bindingName = 'type'; chart.childItemsPath = 'items'; chart.itemsSource = app.getMaxDepthData(); chart.dataLabel.position = wijmo.chart.LabelPosition.Center; chart.dataLabel.content = '{name}'; chart.endUpdate(); // maxDepth - initialize InputNumber's properties maxDepth.min = 0; maxDepth.max = 4; maxDepth.step = 1; maxDepth.format = 'n'; maxDepth.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } chart.maxDepth = sender.value; }); maxDepth.value = 2;

Result (live):

Theming

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

<div id="themeChart1" class="custom-treemap"></div> <div id="themeChart2" class="custom-treemap"></div>
// create controls var chart1 = new wijmo.chart.hierarchical.TreeMap('#themeChart1'); var chart2 = new wijmo.chart.hierarchical.TreeMap('#themeChart2'); // initialize TreeMap's properties chart1.beginUpdate(); chart1.binding = 'sales'; chart1.bindingName = ['category', 'subCategory']; chart1.itemsSource = app.getData(); chart1.dataLabel.position = wijmo.chart.LabelPosition.Center; chart1.dataLabel.content = '{name}'; chart1.palette = [{ 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)' }]; chart1.endUpdate(); chart2.beginUpdate(); chart2.binding = 'sales'; chart2.bindingName = ['category', 'subCategory']; chart2.itemsSource = app.getData(); chart2.dataLabel.position = wijmo.chart.LabelPosition.Center; chart2.dataLabel.content = '{name}'; chart2.palette = ['#88bde6', '#fbb258', '#90cd97', '#f6aac9', '#bfa554', '#bc99c7', '#eddd46', '#f07e6e', '#8c8c8c']; chart2.endUpdate();
.custom-treemap .wj-data-label { fill: #000; }

Result (live):