BubbleTree.Alignment

Use JSON or the setAlignment method to set the property value, and the getAlignment method to get the property value.

Example

To execute this example, the page must contain the BubbleTree component named bubbleTree (see Example of Creating the BubbleTree Component). Set minimum size of chart bubble and chart orientation, next refresh the chart. Get coordinates of chart center, color value, set for no data bubbles, size of free area in the chart, legend position, size scale type, name of component settings property. Determine if the point with specified coordinates is outside component borders:

// Set minimum size for chart bubble
bubbleTree.setBubbleMinSize(20);
// Set chart orientation
bubbleTree.setAlignment(PP.Ui.BubbleTreeAlignment.Right);
// Refresh the chart
bubbleTree.refresh();
// Get chart orientation values
var align = bubbleTree.getAlign();
console.log("Chart orientation values:  X:" + align.X + " Y:" + align.Y);
// Get coordinates of the chart center
var center = bubbleTree.getCenter();
console.log("Coordinates of chart center:  X:" + center.X + " Y:" + center.Y);
// Get settings for color panel in wizard settings format
var colorOptions = bubbleTree.getColorOptions();
// Show value of the color set when no data is available
var ndc = colorOptions[8].Value;
console.log("Color set when no data is available: R:" + ndc.getR() + " G:" + ndc.getG() + " B:" + ndc.getB());
// Get chart free area that houses different items 
var freeArea = bubbleTree.getFreeArea();
console.log("Sizes of chart free area: " + freeArea.getWidth() + "x" + freeArea.getHeight())
// Get settings for legend panel in wizard settings format
var legendOptions = bubbleTree.getLegendOptions();
// Show legend position
console.log("Legend position: " + legendOptions[0].Value);
// Get settings for size panel in wizard settings format
var sizeOptions = bubbleTree.getSizeOptions();
// Show size scale type
console.log("Size scale type: " + sizeOptions[0].Value)
// Get component settings in wizard settings format
var state = bubbleTree.getState();
// Show name of component settings property
console.log("Name of component settings property: " + state.getPropertyName());
// Determine if the point with specified coordinates is outside of component borders
var point = {
    X: 50,
    Y: 100
};
var res1 = "The point (" + point.X + "," + point.Y + ") is within the component borders"
var res2 = "The point (" + point.X + "," + point.Y + ") is outside of component borders"
console.log(bubbleTree.isPointOut(point.X, point.Y) ? res2 : res1)

After the example execution new orientation is set for the chart, and minimum size of chart bubbles is changed:

Also the browser console shows coordinates of chart center, color value, set for bubbles containing no data, size of chart free area, legend position, size scale type, name of component settings property, and the result of determining point position:

BubbleTree.Alignment

Syntax

Description

Comments

Example