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.
HTML
<div id="introChart"></div>
JS
var introChart = new wijmo.chart.hierarchical.TreeMap('#introChart', { binding: 'sales', bindingName: ['category', 'subCategory'], itemsSource: getData(), dataLabel: { position: 'Center', content: '{name}' } });

Result (live):

Grouped CollectionView

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

HTML
<div id="groupCVChart"></div>
JS
var groupCVChart = new wijmo.chart.hierarchical.TreeMap('#groupCVChart', { binding: 'sales', bindingName: ['category', 'subCategory'], itemsSource: getGroupCVData(), dataLabel: { position: 'Center', content: '{name}' } });

Result (live):

Type

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

HTML
<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>
JS
var typeChart = new wijmo.chart.hierarchical.TreeMap('#typeChart', { binding: 'sales', bindingName: ['category', 'subCategory'], itemsSource: getData(), dataLabel: { position: 'Center', content: '{name}' } }); // change chart type var typeMenu = new wijmo.input.Menu('#typeMenu', { itemClicked: function (s, e) { typeChart.type = parseInt(s.selectedValue); updateMenuHeader(s, 'Type'); } }); updateMenuHeader(typeMenu, 'Type');

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.

HTML
<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>
JS
var maxDepthChart = new wijmo.chart.hierarchical.TreeMap('#maxDepthChart', { maxDepth: 2, binding: 'sales', bindingName: 'type', childItemsPath: 'items', itemsSource: getMaxDepthData(), dataLabel: { position: 'Center', content: '{name}' } }); // change chart's maxDepth property var maxDepth = new wijmo.input.InputNumber('#maxDepth', { min: 0, max: 4, step: 1, format: 'n0', valueChanged: function (s, e) { if (s.value >= s.min && s.value <= s.max) { maxDepthChart.maxDepth = s.value; } }, value: maxDepthChart.maxDepth });
CSS
.custom-treemap .wj-data-label { fill: white; font-weight: bold; font-style: italic; }

Result (live):

Theming

Use the palette property to customize the appearance of the TreeMap chart control.

HTML
<div id="themeChart1" class="custom-treemap"></div> <div id="themeChart2" class="custom-treemap"></div>
JS
var themeChart1 = new wijmo.chart.hierarchical.TreeMap('#themeChart1', { binding: 'sales', bindingName: ['category', 'subCategory'], itemsSource: getData(), dataLabel: { position: 'Center', content: '{name}' }, 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)' } ] }); var themeChart2 = new wijmo.chart.hierarchical.TreeMap('#themeChart2', { binding: 'sales', bindingName: ['category', 'subCategory'], itemsSource: getData(), dataLabel: { position: 'Center', content: '{name}' }, palette: [ '#88bde6', '#fbb258', '#90cd97', '#f6aac9', '#bfa554', '#bc99c7', '#eddd46', '#f07e6e', '#8c8c8c' ] });

Result (live):