Documentation

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:

<head>
    <script src="../../scripts/jquery-1.11.1.min.js"></script>
    <script src="../../jqwidgets/jqxcore.js"></script>
    <script src="../../jqwidgets/jqxtooltip.js"></script>
    <script src="../../jqwidgets/jqxtreemap.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>

The next step is to create a DIV tag within the body of the html document.

<div id="treemap"></div>

The last step is to initialize the widget by adding the following script to the html document:

$('#treemap').jqxTreeMap({
    width: 600,
    height: 600,
    source: data
});

To call a function(method), you need to pass the method name and parameters(if any) in the jqxTreeMap’s constructor.

<code>$("#treemap").jqxTreeMap('refresh');</code>

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

<code>$('#treemap').jqxTreeMap({width: 600});</code>

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

<code>var width = $('#treemap').jqxTreeMap('width');</code>

Basic Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The sample showcases the jqxTreeMap widget. 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.</title>
    <script src="../../scripts/jquery-1.11.1.min.js"></script>
    <script src="../../jqwidgets/jqxcore.js"></script>
    <script src="../../jqwidgets/jqxtooltip.js"></script>
    <script src="../../jqwidgets/jqxtreemap.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script>
        $(function () {
            var data = [
            {
                label: 'Drama',
                value: null,
                color: '#B3FAFF'
            },
            {
                label: 'Crime',
                value: null,
                color: '#95FF7A'
            },
            {
                label: 'Action',
                value: null,
                color: '#FFA3CE'
            },
            {
                label: 'Comedy',
                value: null,
                color: '#F1A3FF'
            },
            {
                label: 'The Shawshank Redemption',
                value: 15.4,
                parent: 'Drama',
                data: { description: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.", title: "The Shawshank Redemption (1994)" }
            },
            {
                label: 'Top Gun',
                value: 4,
                parent: 'Drama',
                data: { description: "As students at the Navy's elite fighter weapons school compete to be best in the class, one daring young flyer learns a few things from a civilian instructor that are not taught in the classroom.", title: "Top Gun (1986)" }
            },
            {
                label: 'The Master',
                value: 4.5,
                parent: 'Drama',
                data: { description: "A Naval veteran arrives home from war unsettled and uncertain of his future - until he is tantalized by The Cause and its charismatic leader.", title: "The Master (2012)" }
            },
            {
                label: 'Argo',
                value: 6.8,
                parent: 'Drama',
                data: { description: "A dramatization of the 1980 joint CIA-Canadian secret operation to extract six fugitive American diplomatic personnel out of revolutionary Iran.", title: "Argo (2012)" }
            },
            {
                label: 'Fight Club',
                value: 8.8,
                parent: 'Crime',
                data: { description: "An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more.", title: "Fight Club (1999)" }
            },
            {
                label: 'The Godfather',
                value: 11,
                parent: 'Crime',
                data: { description: "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.", title: "The Godfather (1972)" }
            },
            {
                label: 'The Dark Knight',
                value: 8.9,
                parent: 'Action',
                data: { description: "When Batman, Gordon and Harvey Dent launch an assault on the mob, they let the clown out of the box, the Joker, bent on turning Gotham on itself and bringing any heroes down to his level.", title: "The Dark Knight (2008)" }
            },
            {
                label: 'Pulp Fiction',
                value: 6.0,
                parent: 'Crime',
                data: { description: "The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.", title: "Pulp Fiction (1994)" }
            },
            {
                label: 'Forrest Gump',
                value: 8.7,
                parent: 'Drama',
                data: { description: "Forrest Gump, while not intelligent, has accidentally been present at many historic moments, but his true love, Jenny Curran, eludes him.", title: "Forrest Gump (1994)" }
            },
            {
                label: 'The Matrix',
                value: 8.7,
                parent: 'Action',
                data: { description: "A computer hacker learns from mysterious rebels about the true nature of his reality and his role in the war against its controllers.", title: "The Matrix (1999)" }
            },
            {
                label: '12 Angry Men',
                value: 7.9,
                parent: 'Drama',
                data: { description: "Twelve men must decide the fate of one when one juror objects to the jury's decision.", title: "12 Angry Men (TV 1997)" }
            },
            {
                label: 'Star Wars',
                value: 10.8,
                parent: 'Action',
                data: { description: "Luke Skywalker, a spirited farm boy, joins rebel forces to save Princess Leia from the evil Darth Vader, and the galaxy from the Empire's planet-destroying Death Star..", title: "Star Wars: Episode IV - A New Hope (1977)" }
            },
            {
                label: 'Inception',
                value: 9.8,
                parent: 'Action',
                data: { description: "A skilled extractor is offered a chance to regain his old life as payment for a task considered to be impossible.", title: "Inception (2010)" }
            },
            {
                label: 'Snatch.',
                value: 4.3,
                parent: 'Crime',
                data: { description: "Unscrupulous boxing promoters, violent bookmakers, a Russian gangster, incompetent amateur robbers, and supposedly Jewish jewelers fight to track down a priceless stolen diamond.", title: "Snatch (2000)" }
            },
            {
                label: 'Toy Story',
                value: 9.3,
                parent: 'Comedy',
                data: { description: "A cowboy doll is profoundly threatened and jealous when a new spaceman figure supplants him as top toy in a boy's room.", title: "Toy Story(2005)" }
            },
            {
                label: 'Skyfall',
                value: 7,
                parent: 'Crime',
                data: { description: "Bond's loyalty to M is tested when her past comes back to haunt her. Whilst MI6 comes under attack, 007 must track down and destroy the threat, no matter how personal the cost.", title: "Skyfall (2012)" }
            },
            {
                label: 'Parker',
                value: 5.6,
                parent: 'Crime',
                data: { description: "A thief with a unique code of professional ethics is double-crossed by his crew and left for dead. Assuming a new disguise and forming an unlikely alliance with a woman on the inside, he looks to hijack the score of the crew's latest heist.", title: "Parker (1994)" }
            },
            {
                label: 'District 9',
                value: 6.0,
                parent: 'Action',
                data: { description: "An extraterrestrial race forced to live in slum-like conditions on Earth suddenly finds a kindred spirit in a government agent who is exposed to their biotechnology.", title: "District 9 (2009)" }
            },
            {
                label: 'Stalag 17',
                value: 6.1,
                parent: 'Comedy',
                data: { description: "When two escaping American World War II prisoners are killed, the German POW camp barracks black marketeer, J.J. Sefton, is suspected of being an informer.", title: "Stalag 17 (1953)" }
            }
            ];
            $('#treemap').jqxTreeMap({
                width: 600,
                height: 600,
                source: data,
                colorRange: 50,
                renderCallbacks: {
                    '*': function (element, value) {
                        if (value.data) {
                            element.jqxTooltip({
                                content: '<div><div style="font-weight: bold; max-width: 200px; font-family: verdana; font-size: 13px;">' + value.data.title + '</div><div style="width: 200px; font-family: verdana; font-size: 12px;">' + value.data.description + '</div></div>',
                                position: 'mouse',
                                autoHideDelay: 6000
                            });
                        } else if (value.data === undefined) {
                            element.css({
                                backgroundColor: '#fff',
                                border: '1px solid #555'
                            });
                        }
                    }
                }
            });
        });
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body style="overflow: hidden;">
    <div id="treemap"></div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This sample demonstrates how to populate the jqxTreeMap from 'TSV' data.</title>
    <script src="../../scripts/jquery-1.11.1.min.js"></script>
    <script src="../../jqwidgets/jqxcore.js"></script>
    <script src="../../jqwidgets/jqxdata.js"></script>
    <script src="../../jqwidgets/jqxtooltip.js"></script>
    <script src="../../jqwidgets/jqxtreemap.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script>
        $(function () {
            var source =
             {
                 datatype: "tab",
                 datafields: [
                      { name: 'Year' },
                      { name: 'HPI' },
                      { name: 'BuildCost' },
                      { name: 'Population' },
                      { name: 'Rate' }
                  ],
                 url: '../sampledata/homeprices.txt'
             };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            $('#treemap').jqxTreeMap({
                width: '600',
                height: '500',
                source: dataAdapter,
                displayMember: 'Year',
                valueMember: 'Rate',
                colorMode: 'rangeColors',
                colorRanges: [
                    { min: 0.02, max: 0.03, color: '#ff0300' },
                    { min: 0.03, max: 0.04, color: '#fe2e00' },
                    { min: 0.04, max: 0.05, color: '#fe3900' },
                    { min: 0.05, max: 0.06, color: '#ff5400' },
                    { min: 0.06, max: 0.07, color: '#fe7500' },
                    { min: 0.07, max: 0.08, color: '#fe8200' },
                    { min: 0.08, max: 0.09, color: '#ffed00' },
                    { min: 0.09, max: 0.1, color: '#b8db00' },
                    { min: 0.1, max: 0.11, color: '#7fbf00' },
                    { min: 0.11, max: 0.12, color: '#50a600' },
                    { min: 0.12, max: 0.15, color: '#008000' }
                ],
                legendScaleCallback: function (v) {
                    return v;
                },
                renderCallbacks: {
                    '*': function (element, data) {
                        var content = '<div><div style="font-weight: bold; font-family: verdana; font-size: 13px;">Year: ' + data.record.Year + '</div>';
                        content += '<div style=" font-family: verdana; font-size: 12px;">HPI: ' + data.record.HPI + '</div>';
                        content += '<div style=" font-family: verdana; font-size: 12px;">Build Cost: ' + data.record.BuildCost + '</div>';
                        content += '<div style=" font-family: verdana; font-size: 12px;">Population: ' + data.record.Population + '</div>';
                        content += '<div style=" font-family: verdana; font-size: 12px;">Interest Rate: ' + data.record.Rate + '</div>';
                        content += '</div>';
                        element.jqxTooltip({
                            content: content,
                            position: 'mouse',
                            autoHideDelay: 6000
                        });
                    }
                },
                legendLabel: 'Interest Rate'
            });
        });
</script>
    <style>
        .jqx-treemap-legend {
            width: 300px;
            background: rgba(0, 0, 0, 0.4);
        }
        .jqx-treemap-legend-value {
            font-size: 9px;
        }
    </style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body style="overflow: hidden;">
    <div>
        <h3>U.S. Historical Home Prices (1950-2011)</h3>
    </div>
    <div id="treemap"></div>
</body>
</html>

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'                });            }        }    }});