jQuery Treemap Setup

Home >Shield UI Documentation >TreeMap >JavaScript >jQuery Treemap Setup

The TreeMap widget allows you to represent a tree-like structure into a table view .
In order to properly render it on the page, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an DIV element for which to initialize the TreeMap functionality.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>Shield UI TreeMap Demo</title>
<meta charset="utf-8" />


<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

<div id="treemap" />

<script type="text/javascript">
    jQuery(function ($) {
        $('#treemap').shieldTreeMap({
              cls: "treemap",
              tooltip: {
                    enabled: true,
                    template: "{title}: {value} km/h"
               },
               dataSource: {
                    data: [
                        {
                            "title": "Fastest Cars in the World",
                            "value": 1301,
                            "items": [
                                {
                                    "title": "Hennessey Venom GT",
                                    "value": 435
                                },
                                {
                                    "title": "Vector Avtech WX8 Hypercar",
                                    "value": 435
                                },
                                {
                                    "title": "Bugatti Veyron 16.4 Super Sport",
                                    "value": 431
                                }
                            ]
                        }
                    ]
                }
          });
    });
</script>

<style>
      .treemap {
         max-width: 600px;
         height: 500px;
      }
</style>

</body>
</html>

To see an example of the control in action, along with all the required code, please refer to the following example.