Example of TreeMapMaster and TreeMap Components Layout

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

1.In the HEAD tag add links to the following CSS files: PP.css, PP.Metabase.css, PP.Express.css,

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

Contents of the TreeMapData.js file

2. In the SCRIPT tag add code that creates the TreeMapMaster and TreeMap components:

<script language = "javascript" >
    // Variable which will store tree map instance
    var treeMap;
    // Variable which will store wizard instance
    var treeMapMaster;
    // Specify path to root folder with resources files
    PP.resourceManager.setRootResourcesFolder("build/resources/");
    // Determine language settings for resources
    PP.setCurrentCulture(PP.Cultures.ru)
    // Get DOM element of container which displays tree map
    var container = document.getElementById("treeMap");
    // Create a new chart instance
    treeMap = new PP.Ui.TreeMap(data);
    // Place chart in the <div> block
    treeMap.addToNode(container);
    // Set chart sizes
    treeMap.setWidth(480);
    treeMap.setHeight(480);
    //create a chart wizard
    treeMapMaster = new PP.Ui.TreeMapMaster({            
        ParentNode: "master", //DOM node which will contain tree wizard
                    Height: 500,
                    Width: 300,
                    ImagePath: "build/img/",
                    DataView: treeMap        
    });
</script>

3. In the BODY tag place the created components:

<table style="width: 500px; border: #CCCCCC 1px solid">
    <tr>
        <td valign="top" width="250" id="master"></td>
        <td valign="top" id="treeMap"></td>
    </tr>
</table>

After the example execution the page will contain the tree map and its setup wizard:

Seealso:

TreeMapMaster | TreeMap