addElement(elem: PP.Ui.PlacedControlBase);
elem. Add a visualizer.
The addElement method adds a visualizer to container.
To execute the example, the HTML page must contain the BubbleChart component named bubbleChart (see Example of Creating the BubbleChart Component).
Add a container of visualizers where add a legend of the bubble chart and set container offsets. Change transparency of the container item. In the development environment console display also following parameters of the container:
Sizes of items container.
Container alignments.
Container general sizes.
Attribute which determines whether container will automatically decrease workspace.
Number of items in the container.
// Create a container of visualizers
var settings = {
HorizontalAlignment: PP.HorizontalAlignment.Center,
VerticalAlignment: PP.VerticalAlignment.Bottom
}
var container = new PP.Ui.DataVisualizerContainer(settings);
// Get bubble chart legend
var legend = bubbleChart.getLegendById("1_BubbleChart71");
// Add the legend in the container
container.addElement(legend);
// Set container offsets
container.setLeft(100);
container.setTop(350);
// Display visualizer container sizes
console.log("Item container width: " + container.getWidth());
console.log("Item container height: " + container.getHeight());
// Display vertical and horizontal alignment types of the container
console.log("Vertical alignment of item container: " + container.getVerticalAlignment());
console.log("Horizontal alignment of item container: " + container.getHorizontalAlignment());
// Display general sizes of item container
console.log("General width of item container: " + container.getRealWidth());
console.log("General height of item container: " + container.getRealHeight());
// Display the attribute that the container does not decrease its workspace
console.log("Attribute determining whether the container will automatically decrease the workspace: " + container.getIsOverlap());
// Display number of items in the container
console.log("Number of items in the container: " + container.getLength());
// Change container item transparency
container.getElements()[0].setOpacity(0.5);
As a result of executing the example, position and transparency value of the bubble chart legend is changed:
The development environment console also displays visualizer container parameters:
Item container width: 166
Item container height: 65
Item container vertical alignment: Bottom
Item container horizontal alignment: Center
Item container general width: 166
Item container general height: 65
Attribute which determines whether container will automatically decrease workspace: false
Number of items in the container: 1