Open In App

jQWidgets jqxTreeMap displayMember Property

Improve
Improve
Like Article
Like
Save
Share
Report

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTreeMap is used for showing the hierarchical data set of nested rectangles. Here each and every branch of the tree is represented as a rectangle, which is then tiled with smaller rectangles that represent sub-branches. Here the rectangle of the leaf node has an area proportional to a specified dimension on the data.

The displayMember property is used to set or return the displayMember of the stated jqxTreeMap. Moreover, this property defines an object property’s name to display. Where the name is confined in the collection stated by the ‘source’ property. It is of type String and its default value is ” “.

Syntax:

  • Set the displayMember property:
$("#jqxTreeMap").jqxTreeMap({ displayMember: 'label' });
  • Return the displayMember property:
var displayMember = $('#jqxTreeMap').jqxTreeMap('displayMember');

 

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtreemap.js”></script>

Example 1: The below example illustrates the jQWidgets jqxTreeMap displayMember property.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet"
        href="jqwidgets/styles/jqx.base.css"
        type="text/css"/>
    <script type="text/javascript"
            src="scripts/jquery.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxtooltip.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxtreemap.js">
    </script>
    <script type="text/javascript"
            src="scripts/gettheme.js">
    </script>
    <script type="text/javascript"
            src="scripts/jqx-all.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            jQWidgets jqxTreeMap displayMember property
        </h3>
        <div id="Tree_Map"></div>
        <input type="button" style="margin: 28px;"
               id="button_for_dm" value="click here" />
        <div id="log"></div>
        <script type="text/javascript">
  
            $(document).ready(function () {
                var Data_of_TreeMap = [{
                    label: 'GeeksforGeeks',
                    id: "1",
                    value: 70,
                    color: '#ff0300'
                }, {
                    label: 'is a',
                    id: "2",
                    value: 10,
                    parent: 'GeeksforGeeks',
                    color: '#ff5400'
                }, {
                    label: 'Computer Science',
                    id: "3",
                    value: 30,
                    parent: 'GeeksforGeeks',
                    color: '#008000'
                }, {
                    label: 'Portal.',
                    id: "4",
                    value: 15,
                    parent: 'GeeksforGeeks',
                    color: '#7fbf00'
                }
                ];
                var src =
                {
                    datatype: "json",
                    datafields: [
                        {
                            name: 'id'
                        },
                        {
                            name: 'parent'
                        },
                        {
                            name: 'label'
                        },
                        {
                            name: 'value'
                        }
                    ],
                    id: 'id',
                    localdata: Data_of_TreeMap
                };
                var da = new $.jqx.dataAdapter(src);
                $('#Tree_Map').jqxTreeMap({
                    width: 390,
                    height: 200,
                    source: Data_of_TreeMap,
                    displayMember: 'label'
                });
                $("#button_for_dm").jqxButton({
                    width: 300
                });
                $("#button_for_dm").click(
                    function () {
                        var dm =
                            $('#Tree_Map').jqxTreeMap('displayMember');
                        $("#log").html(dm);
                    });
            });
        </script>
    </center>
</body>
  
</html>


Output:

 

Example 2: The following is another example of jQWidgets jqxTreeMap displayMember property.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet"
        href="jqwidgets/styles/jqx.base.css"
        type="text/css"/>
    <script type="text/javascript"
            src="scripts/jquery.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxtooltip.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxtreemap.js">
    </script>
      
    <script type="text/javascript"
            src="scripts/jqx-all.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            jQWidgets jqxTreeMap displayMember property
        </h3>
        <div id="Tree_Map"></div>
        <input type="button" style="margin: 28px;" 
               id="button_for_dm" value="click here" />
        <div id="log"></div>
        <script type="text/javascript">
  
            $(document).ready(function () {
                var Data_of_TreeMap = [{
                    label: 'GeeksforGeeks',
                    id: "1",
                    value: 70,
                    color: '#ff0300'
                }, {
                    label: 'is a',
                    id: "2",
                    value: 10,
                    parent: 'GeeksforGeeks',
                    color: '#ff5400'
                }, {
                    label: 'Computer Science',
                    id: "3",
                    value: 30,
                    parent: 'GeeksforGeeks',
                    color: '#008000'
                }, {
                    label: 'Portal.',
                    id: "4",
                    value: 15,
                    parent: 'GeeksforGeeks',
                    color: '#7fbf00'
                }
                ];
                var src =
                {
                    datatype: "json",
                    datafields: [
                        {
                            name: 'id'
                        },
                        {
                            name: 'parent'
                        },
                        {
                            name: 'label'
                        },
                        {
                            name: 'value'
                        }
                    ],
                    id: 'id',
                    localdata: Data_of_TreeMap
                };
                var da = new $.jqx.dataAdapter(src);
                $('#Tree_Map').jqxTreeMap({
                    width: 390,
                    height: 200,
                    source: Data_of_TreeMap,
                    displayMember: 'label'
                });
                $("#button_for_dm").jqxButton({
                    width: 300
                });
                $("#button_for_dm").click(
                    function () {
                        var dm =
                            $('#Tree_Map').jqxTreeMap('displayMember');
                        if (dm === null) {
                            $('#log').text("Null!");
                        }
                        else {
                            $('#log').text("Not null!");
                        }
                    });
            });
        </script>
    </center>
</body>
  
</html>


Output:

 

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreemap/jquery-treemap-api.htm?search=



Last Updated : 16 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads