TagCloud.addItem

Syntax

addItem(value: String || Number || PP.Ui.TagCloudItem, sourceName: String, series: Object);

Parameters

value. Item being added.

sourceName. Data source name. If it is not specified then it is placed in the first list.

series. Identifier and data series for the source.

Description

The addItem method adds a new item to tag cloud.

Example

To execute the example, the page must contain the TagCloud component named tagCloud (see Example of Creating the TagCloud Component). The example must be placed in the <script> tag. Create new tag and set parameters to it, add handlers of following events to tag cloud: ItemMouseOut, ItemMouseOver:

// Add a handler of the event when cursor goes out of the active tag area
tagCloud.ItemMouseOut.add(function (sender, args) { console.log("Cursor goes out of the tag area") }, tagCloud);
// Add a handler of the event when cursor hovers over the tag
tagCloud.ItemMouseOver.add(function (sender, args) { console.log("Cursor hovers over the tag") }, tagCloud);
// Parameters for a new tag
var paramTag = {
    Tag5: {
        color: {
            Items: [50.0]
        },
        size: {
            Items: [45]
        }   
    }
}// Create a new tag
tag = new PP.Ui.TagCloudItem({
    // Set attribute that the tag is active
    Active: true,
    // Set tag header
    Caption: "Tag 5",
    // Set attribute that tag is visible
    IsPlaced: true
});
// Add tag in the cloud
tagCloud.addItem(tag, null, paramTag);
// Get tag from the cloud
tag = tagCloud.getItems()[4];
// Set new color of the tag
tag.setColor("#A020F0");
// Set new size
tag.setSize(60);
// Change item range form to spherical
tagCloud.setShape("Sphere");

As a result one more tag with new parameters is added in cloud:

Set attribute of animation stop on hovering the cursor over the active tag:

// Set attribute of animation stop on hovering the cursor over the active tag
tagCloud.setFreezeActive(true);

On hovering the mouse cursor over the active tag the tag movement animation is stopped. Active tag gets a tooltip:

The console displays a message that mouse cursor is hovered over the tag:

Cursor is hovered over the tag

Get transparency value of the active tag:

// Get active tag
var activeTag = tagCloud.getActiveItem();
// Get transparency value of the active tag
console.log("Transparency value of the active tag: " + activeTag.getOpacity());

As a result the console displays transparency value of the active tag:

Transparency value of the active tag: 1

When the cursor goes out of the active tag area, the console displays the message:

Cursor goes out of the tag area