DataVisualizerContainer.addElement

Syntax

addElement(elem: PP.Ui.PlacedControlBase);

Parameters

elem. Add a visualizer.

Description

The addElement method adds a visualizer to container.

Example

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:

// 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

DataVisualizerContainer