jQWidgets jqxTreeMap renderCallbacks Property

Last Updated : 25 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. Here 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 renderCallbacks property is used to set or return the callback function in order to personalize the execution of any segment of the stated jqxTreeMap. Moreover, in order to customize every sector of the tree map, apply

“*” : function(sectorHtmlElement, sectorData). And, for defining a callback function of an individual element, utilize the value of its label in place of “*”. It is of type object and its default value is “null”.

Syntax:

Set the renderCallbacks property:

$("#jqxTreeMap").jqxTreeMap({ renderCallbacks: null });

Return the renderCallbacks property:

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

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 renderCallbacks 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 renderCallbacks property 
        </h3> 
        <div id="Tree_Map"></div> 
        <script type="text/javascript"> 
  
            $(document).ready(function () { 
                var d = [{ 
                    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: d 
                }; 
                var da = new $.jqx.dataAdapter(src); 
                $('#Tree_Map').jqxTreeMap({ 
                    width: 390, 
                    height: 200, 
                    source: d, 
                    displayMember: 'label', 
                    valueMember: 'value', 
                    renderCallbacks: { 
                        '*': function (e, d) { 
                            e.css({ 
                                color: '#rrrrrr' 
                            }); 
                            e.html('<span class="jqx-treemap-label">' 
                                + d.label + ', ' + d.color + '</span>'); 
                            return 1; 
                        } 
                    } 
                }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>

Output:

Example 2: The following is another example of jQWidgets jqxTreeMap renderCallbacks 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 renderCallbacks property 
        </h3> 
        <div id="Tree_Map"></div> 
        <input type="button" style="margin: 28px;" 
               id="button_for_rc" value="click here" /> 
        <div id="log"></div> 
        <script type="text/javascript"> 
  
            $(document).ready(function () { 
                var d = [{ 
                    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: d 
                }; 
                var da = new $.jqx.dataAdapter(src); 
                $('#Tree_Map').jqxTreeMap({ 
                    width: 390, 
                    height: 200, 
                    source: d, 
                    renderCallbacks: [1] 
                }); 
                $("#button_for_rc").jqxButton({ 
                    width: 300 
                }); 
                $("#button_for_rc").click( 
                    function () { 
                        var rc = 
                            $('#Tree_Map').jqxTreeMap('renderCallbacks'); 
                        $("#log").text(rc); 
                    } 
                ); 
            }); 
        </script> 
    </center> 
</body>