Example of Creating the BubbleTree 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.BubbleTree.js, and BubbleTreeData.js.

The BubbleTreeData.js file determines the variable named "data" that stores settings required to create PP.Ui.BubbleTree component.

Contents of the BubbleTreeData.js file

2. In the <body>  tag place a block with the treeMap ID that will store the creates bubble tree:

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

3. Next in the <body> tag add a scenario that creates a chart:

<script language = "javascript" >
    // Variable that will store chart instance
    var bubbleTree;
    // Specify path to root folder that contains resource files
    PP.resourceManager.setRootResourcesFolder("resources/");
    // Set resources culture
    PP.setCurrentCulture(PP.Cultures.ru)
    // Get container DOM element where the bubble tree should be drawn
    var container = document.getElementById("bubbleTree");
    // Create a new instance of chart
    bubbleTree = new PP.Ui.BubbleTree(data);
    // Position the chart in <div>
    bubbleTree.addToNode(container);
    // Set chart size
    bubbleTree.setWidth(640);
    bubbleTree.setHeight(480);
</script>

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

See also:

BubbleTree