Example of Creating the TreeMapBox Component

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

1. Add links to the following files: PP.css, PP.Express.css.

Also add links to the following JS files: PP.js, PP.Metabase.js, PP.Express.js, and resources.ru.js.

2.Then in the <head> tag add a script that creates a container with tree map and tree map setup wizard. The repository must contain express report with the 3539 key:

<script type="text/javascript">
var treeMapBox; // Tree map container
var propertyBar; // Properties panel
// Specify path to the root folder containing resources files
PP.resourceManager.setRootResourcesFolder("../resources/");
// Determines language settings for resources
PP.setCurrentCulture(PP.Cultures.ru)
function Ready() {
    var IMAGE_PATH = "../build/img/"; // Path to icons folder
    // Create repository connection
    var metabase = new PP.Mb.Metabase({
        PPServiceUrl: "PPService.axd?action=proxy",
        Id: "WAREHOUSE",
        UserCreds: {
            UserName: "user",
            Password: "password"
        }
    });
    // Open repository connection
    metabase.open();
    // Create a service for working with speedometer
    var eaxMdService = new PP.Exp.EaxMdService({
        Metabase: metabase
    });
    // Open document with the 3539 key
    var eaxAnalyzer = eaxMdService.open(3539);
    // Create a dialog box with data summary statistics
    var statisticsWindow = new PP.Exp.Ui.StatisticsWindow({
        Width: 400,
        Height: 500,
        Source: eaxAnalyzer, // Data source
        Caption: "Summary statistics"
    });
    // Create a tree map container
    treeMapBox = new PP.Exp.Ui.TreeMapBox({
        Source: eaxAnalyzer, // Data source
        Service: eaxMdService, // Service for working with data
        ParentNode: "TreeMapBox",
        StatisticsWindow: statisticsWindow,
        Width: 500,
        Height: 400,
        ImagePath: IMAGE_PATH // Path to icons folder
    });
    // Create properties panel
    propertyBar = new PP.Exp.Ui.EaxPropertyBar({
        ParentNode: "PropertyBar",
        Service: eaxMdService, // Service for working with data
        Source: eaxAnalyzer, // Data source
        Width: 300,
        Height: 400,
        ImagePath: IMAGE_PATH // Path to icons folder
    });
    // Display tree map wizard
    propertyBar.showTreeMapMaster();
    // Link wizard to tree map container
    propertyBar.getTreeMapMaster().setDataView(treeMapBox);
}
</script>

3. In the <body> tag place two blocks with the IDs PropertyBar and TreeMapBox. These blocks will store tree map container and tree map wizard:

<body onload="Ready()">
    <table>
        <tr>
            <td><div id="PropertyBar"></div></td>
            <td><div id="TreeMapBox"></div></td>
         </tr>
    </table>
</body>

After executing this example the HTML page contains the TreeMapBox and TreeMapMaster components: