Organizational Hierarchy

You can use the wijtreemap widget to display hierarchical data by dividing a region into sub regions. This scenario describes an organizational structure with three hierarchy levels. The first level represents the names of three companies, the second level displays departments in a particular organization, and the third level describes operations carried out in each department.

The area of the treemap is divided according to employee count in each department.

Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

References	Copy Code
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> <script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20183.140", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script>

References

Copy Code

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!--RequireJs-->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20183.140",
        paths: {
            "jquery": "jquery-1.11.1.min",
            "jquery-ui": "jquery-ui-1.11.0.custom.min",
            "jquery.ui": "jquery-ui",
            "jquery.mousewheel": "jquery.mousewheel.min",
            "globalize": "globalize.min"
        }
    });
</script>

Add the following markup within the <body> tags to create the widget. The <div> element creates the widget, sets its height and width, and adds required check boxes for label and title.

Markup	Copy Code
<div> <h3 style="text-align:center">Department-wise Employee Count</h3> <br /> <input type="checkbox" id="showTitle" value="showTitle" checked="checked" /><label for="showTitle">show title</label> <input type="checkbox" id="showLabel" value="showLabel" checked="checked" /><label for="showLabel">show label</label> <div id="treemap" style="width: 800px; height: 400px;"></div> </div>

Markup

Copy Code

<div>
<h3 style="text-align:center">Department-wise Employee Count</h3>          
<br />
<input type="checkbox" id="showTitle" value="showTitle" checked="checked" /><label for="showTitle">show title</label>
<input type="checkbox" id="showLabel" value="showLabel" checked="checked" /><label for="showLabel">show label</label>
<div id="treemap" style="width: 800px; height: 400px;"></div>    
</div>

Within the <head> tags, below the references, add the following script to initialize the widget and add data to be displayed on the treemap.

Script	Copy Code
<div> <h3 style="text-align:center">Department-wise Employee Count</h3> <br /> <input type="checkbox" id="showTitle" value="showTitle" checked="checked" /><label for="showTitle">show title</label> <input type="checkbox" id="showLabel" value="showLabel" checked="checked" /><label for="showLabel">show label</label> <div id="treemap" style="width: 800px; height: 400px;"></div> </div>

Script

Copy Code

<div>
<h3 style="text-align:center">Department-wise Employee Count</h3>          
<br />
<input type="checkbox" id="showTitle" value="showTitle" checked="checked" /><label for="showTitle">show title</label>
<input type="checkbox" id="showLabel" value="showLabel" checked="checked" /><label for="showLabel">show label</label>
<div id="treemap" style="width: 800px; height: 400px;"></div>    
</div>

Reference

wijtreemap