Getting Started

jqxTreeMap displays hierarchical data as a set of 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 on the data.

Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the javascript files and css dependencies to your project. The jqxTreeMap widget requires the following files:

The next step is to create a DIV tag within the body of the html document.
The last step is to initialize the widget by adding the following script to the html document:
To call a function(method), you need to pass the method name and parameters(if any) in the jqxTreeMap’s constructor.

$("#treemap").jqxTreeMap('refresh');

To set a property, you can you the following syntax:

$('#treemap').jqxTreeMap({width: 600});

To get a property, you can you the following syntax:

var width = $('#treemap').jqxTreeMap('width');

Basic Sample

The result of the above code is:

For information about the used jqxTreeMap APIs, please take a look at: jqxTreeMap API

Using jqxTreeMap with the jqxDataAdapter plug-in

You can populate the jqxTreeMap widget with data loaded through the jqxDataAdapter plug-in. That allows you to load data from any data source like "JSON", "XML", "TSV", "CSV" or "ARRAY".

Binding to JSON

The result of the above code is:

Rendering

There are three different types of rendering supported by jqxTreeMap. You can switch them by setting the "colorMode" property.
•parent - in that mode a child sector inherits the color from its parent sector. Depending on the child value and the "colorRange" property the color varies. You may also set the "color" property of each item in the jqxTreeMap.
•autoColors - in that mode the developer sets a "baseColor" and "colorRange"(The value is expected to be from 0 to 255 and determines the range in which the base colors can vary). The color of each sector is auto-generated by using the "baseColor" and the sector's value.
•rangeColors - in that mode the developer sets an array of color ranges. Each color range has the properties "min", "max" and "color". When a sector is being rendered, it gets its color from the color ranges array depending on the sector's value.

To customize the rendering of any sector in the jqxTreeMap you may use the "renderCallbacks" function. To define a callback function for all sectors, use the "*" : function(sectorHtmlElement, sectorData) syntax. To define a callback function for a specific element, use its label value instead of "*".

            
$('#treemap').jqxTreeMap({
    renderCallbacks: {
        '*': function (sectorHtmlElement, sectorData) {
            if (sectorData.data) {
                sectorHtmlElement.jqxTooltip({
                    content: "content",
                    position: 'mouse',
                    autoHideDelay: 6000,
                    theme: theme
                });
            } else if (sectorData.data === undefined) {
                sectorHtmlElement.css({
                    backgroundColor: '#fff',
                    border: '1px solid #aaa'
                });
            }
        }
    }
});