jQWidgets jqxTreeMap valueMember Property

Last Updated : 16 Jan, 2023

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. Each and every branch of the tree is represented as a rectangle, which is then tiled with smaller rectangles that represent sub-branches. The rectangle of the leaf node has an area proportional to a specified dimension on the data.

The valueMember property is used to set or return the valueMember of the stated jqxTreeMap. Moreover, this property defines an object property’s name in order to set it like a ‘value‘ of the stated sectors of the treemap. 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 valueMember property:

$("#jqxTreeMap").jqxTreeMap({ valueMember: 'value' });

Return the valueMember property:

var valueMember = $('#jqxTreeMap').jqxTreeMap('valueMember');

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 valueMember 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 valueMember property 
        </h3> 
        <div id="Tree_Map"></div> 
        <input type="button" style="margin: 28px;"
               id="button_for_vm" 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', 
                    valueMember: 'value' 
                }); 
                $("#button_for_vm").jqxButton({ 
                    width: 300 
                }); 
                $("#button_for_vm").click( 
                    function () { 
                        var vm = 
                            $('#Tree_Map').jqxTreeMap('valueMember'); 
                        $("#log").html(vm); 
                    }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>

Output:

Example 2: The following is another example of jQWidgets jqxTreeMap valueMember 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 valueMember property 
        </h3> 
        <div id="Tree_Map"></div> 
        <input type="button" style="margin: 28px;"
               id="button_for_vm" 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', 
                    valueMember: 'value' 
                }); 
                $("#button_for_vm").jqxButton({ 
                    width: 300 
                }); 
                $("#button_for_vm").click( 
                    function () { 
                        var vm = 
                            $('#Tree_Map').jqxTreeMap('valueMember'); 
                        if (vm === null) { 
                            $('#log').text("Null!"); 
                        } 
                        else { 
                            $('#log').text("Not null!"); 
                        } 
                    }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>