Wijmo 5

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.position = wijmo.chart.PieLabelPosition.Center; chart.dataLabel.content = '{name}'; chart.endUpdate();

Result (live):

Type

The TreeMap chart control allow you to set type property to customize its layout and appearance:

<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 allow you to set maxDepth property to set the maximum number of node levels to show in the current view. Levels will be 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 allow you to set palette property to customize the appearance.

<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):