Example of Creating the TreeMap Component

To execute this example, create an HTML page and perform the following operations:

1. Add a link to CSS file named PP.css.

Also add links to the following JS files: PP.js, PP.GraphicsBase.js, PP.TreeMap.js, and TreeMapData.js.

The TreeMapData.js file determines the variable named "data" that contains settings required to create the PP.Ui.TreeMap component.

Contents of the TreeMapData.js file

2. Add a sprite named tl_imagelist.png at the URL build/Img.

3. In the <body>  tag place a block with the ID "treeMap" that will store the created chart:

<div id="treeMap" style="border: #CCCCCC 1px solid; padding: 5px; margin: 5px; height: 480px;
    width: 640px;">
</div>

4. Next in the <body> tag add a script that creates a chart:

<script language="javascript">
    // Variable, in which chart instance will be stored
    var treeMap;
    // Specify path to the root folder containing resources files
    PP.resourceManager.setRootResourcesFolder("../resources/");
    // Determine language settings for resources
    PP.setCurrentCulture(PP.Cultures.ru)
    // Get DOM item of container, in which a tree is rendered 
    var container = document.getElementById("treeMap");
    // Create a new instance of tree map
    treeMap = new PP.Ui.TreeMap(data);
    // Place the tree map in the <div> block
    treeMap.addToNode(container);
    // Set chart size
    treeMap.setWidth(640);
    treeMap.setHeight(480);
</script>

After the example execution the PP.Ui.TreeMap component is placed on the HTML page:

See also:

TreeMap