Working with Bubble Tree > Components > BubbleTree > 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:
