Demo - TreeMap

A sample of wijmo TreeMap for LearnWijmo project

by lianbogo

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://prerelease.componentone.com/wijmo5/latest/styles/wijmo.min.css">
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.input.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.chart.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.chart.hierarchical.min.js"></script>
<div class="container">

  <h1>
    TreeMap
  </h1>

  <p>
    TreeMap is a control for displaying hierarchical data using nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified dimension of the data. Often the leaf nodes are colored to show a separate dimension of the data.</p>
  <p>
    To create TreeMap control, set the
    <b>binding</b> property to the name of the property that
    contains the value, set the <b>bindingName</b> property to the name of the property that contans the data item and set the <b>childItemsPath</b> property to the property used to generate child items in hierarchical data is needed.</p>
  <p>
    You can adjust the maximum number of levels to show in the current view using 
    the <b>maxDepth</b> property:</p>

  <label for="maxDepth">Max Depth: </label>
  <div id="maxDepth"></div><br>
  <ol id="breadCrumbs" class="breadcrumb"></ol>
  <div id="treemap"></div>

</div>

CSS

.wj-control {
  margin-bottom: 3px;
}
#breadCrumbs {
  padding: 5px 10px 5px;
  margin-bottom: 0;
}
.wj-flexchart {
  margin-top: -30px;
  padding-top: 30px;
}

JavaScript

onload = function() {
	var breadCrumbs = [];
  var currentItem;
  
  function rollUp(num) {
  	//rollup treemap *num times.
    for(var i = 0; i < num; i++) {
    	treemap._rollUp();
    }
  }
  
  function createBreadCrumbs() {
  	breadCrumbs = [];
  	resetBreadCrumbs(currentItem);
    breadCrumbs.reverse();
    appendBreadCrumbs();
  }
  
  function appendBreadCrumbs() {
  	var ol = document.querySelector('#breadCrumbs');
    ol.innerHTML = '';
    var len = breadCrumbs.length;
    breadCrumbs.forEach(function(label, idx) {
      ol.appendChild(apendBreadCrumb(label, idx !== len - 1, len - idx - 1));
    });
  }
  
  function apendBreadCrumb(label, isAnchor, param) {
  	var li = document.createElement('li');
    if(isAnchor) {
    	li.className = 'breakcrumb-item';
      var a = document.createElement('a');
      a.href='javascript:void(0)';
      a.innerHTML = label;
      a.addEventListener('click', function(evt) {
      	rollUp(param);
      });
      li.appendChild(a);
    } else {
    	li.className = 'breakcrumb-item active';
      li.innerHTML = label;
    }
    return li;
  }
  
  function resetBreadCrumbs(item) {
  	if(item) {
    	breadCrumbs.push(item.label);
      resetBreadCrumbs(item.parent);
    } else {
    	breadCrumbs.push('Root');
    }
  }
  
	// create the treemap
  var treemap = new wijmo.chart.hierarchical.TreeMap('#treemap', {
  	itemsSource: getData(),
    maxDepth: 2,
    bindingName: 'type',
    binding: 'sales',
    childItemsPath: 'items',
    dataLabel: {
    	content: '{name}'
		},
    rendered: function () {
    	if(treemap) {
        if(currentItem === treemap._currentItem) {
        	return;
        }
        currentItem = treemap._currentItem;
        createBreadCrumbs();
      }
    }
  });
  createBreadCrumbs();
  
  // adjust parameters
  var theMaxDepth = new wijmo.input.InputNumber('#maxDepth', {
  	min: 0,
    max: 4,
    step: 1,
    value: treemap.maxDepth,
    valueChanged: function(s, e) {
			treemap.maxDepth =...