Open In App

jQWidgets jqxTreeMap colorMode 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 colorMode property is used for setting or getting the rendering behavior of the sector of the specified jqxTreeMap. This property accepts three possible values that are illustrated below:

  • parent: This mode is used for a child sector inherits the color from its parent sector. Here color varies depending on the child’s value and the colorRange property.
  • autoColors: This mode is for automatic color generation depending on the baseColor, colorRange property, and the value.
  • rangeColors: For this mode, the user can set an array of color ranges. Here each color range is having properties such as min, max, and color.

Syntax:

  • For setting the colorMode property:

    $("#jqxTreeMap").jqxTreeMap({colorMode: 'autoColors'});  
  •  

  • For getting the colorMode property:

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

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>
<script type=”text/javascript” src=”scripts/gettheme.js”></script>

Example: The below example illustrates the jQWidgets jqxTreeMap colorMode property. In the below example, the value for the colorMode property has been set to ‘colorMode’.

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>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            jQWidgets jqxTreeMap colorMode Property
        </h3>
        <div id="Tree_Map"></div>
        <input type="button" style="margin: 28px;" 
               id="button_for_colorMode" 
               value="Value of the colorMode property"/>
        <div id="log"></div>
        <script type="text/javascript">
            $(document).ready(function () {
                var Data_of_TreeMap = [{
                    label: 'GeeksforGeeks',
                    value: 70,
                    color: '#ff0300'
                }, {
                    label: 'is a',
                    value: 10,
                    parent: 'GeeksforGeeks',
                    color: '#ff5400'
                }, {
                    label: 'Computer Science',
                    value: 30,
                    parent: 'GeeksforGeeks',
                    color: '#008000'
                }, {
                    label: 'Portal.',
                    value: 15,
                    parent: 'GeeksforGeeks',
                    color: '#7fbf00'
                }
                ];
                $('#Tree_Map').jqxTreeMap({
                    width: 390,
                    height: 200,
                    source: Data_of_TreeMap,
                    colorMode: "autoColors"
                });
                $("#button_for_colorMode").jqxButton({
                    width: 250
                });
                $("#button_for_colorMode").click(
                    function () {
                        var colorMode_Value = 
                            $('#Tree_Map').
                            jqxTreeMap('colorMode');
                        $("#log").html((
                          colorMode_Value));
                    });
            });
        </script>
    </center>
</body>
  
</html>


Output:

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



Last Updated : 05 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads