jQWidgets jqxTreeMap legendScaleCallback 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. 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 legendScaleCallback property is used to set or return a callback function in order to style the values shown in the legend of the displayed jqxTreeMap. It is of type Object and its default value is “null”.

Syntax:

Set the legendScaleCallback property:

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

Return the legendScaleCallback property:

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

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 legendScaleCallback 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 legendScaleCallback  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, 
                    colorMode: 'rangeColors', 
                    legendScaleCallback: function (lsc) { 
                        lsc = lsc.toFixed(2); 
                        return lsc; 
                    }, 
                }); 
            }); 
        </script> 
    </center> 
</body> 
</html>

Output:

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