Working with General Visual Components > Components > TagCloud > Example of Creating the TagCloud Component

Example of Creating the TagCloud Component

To execute the example, the HTML page must contain links to the PP.js and PP.GraphicsBase.js, PP.TagCloud.js script files and PP.css styles file in the <body> tag of HTML page of the <div> element with the tagCloud identifier. In the onload event of the <body> tag it is necessary to add the call of the createTagCloud() function. Add tag cloud on the HTML page:

function createTagCloud() {
    // Data for creating a tag cloud
    data = new PP.DataSource({
        Title: "DataSource",
        AttributesNames: {
            color: "Color",
            size: "Size",
            value: "Value"
        },
        Series: {
            "Tag1": {
                color: {
                    Items: [10.0]
                },
                size: {
                    Items: [50]
                }
            },

            "Tag2": {
                color: {
                    Items: [20.0]
                },
                size: {
                    Items: [60]
                }
            },
            "Tag3": {
                color: {
                    Items: [30.0]
                },
                size: {
                    Items: [30]
                }
            },

            "Tag4": {
                color: {
                    Items: [40.0]
                },
                size: {
                    Items: [40]
                }
            }
        }
    });
    scales = new PP.ScaleBase({
        Id: "Scale0",
        Values: [10.0, 20.0, 30.0, 40.0, 50.0],
        Items: ["#FFFF462C", "#FFEBAF36", "#FFFFD900", "#FFB1CA40", "#FF6A8535"],
        EnableEquality: false,
        NoData: "#FFBFBFBF",
        TypeArguments: "Brush"

    });
    color = new PP.ColorVisual({
        ColorMapping: new PP.DataMapping({
            DataSource: null,
            DimAttributeId: "color",
            Type: "Scale",
            Index: 0,
            DataSource: data,
            Scale: scales
        })
    });
    size = new PP.SizeVisual({
        NumericMapping: new PP.DataMapping({
            DimAttributeId: "size",
            Type: "None",
            Index: 0,
            DataSource: data
        })

    });
    // Create a tag cloud
    tagCloud = new PP.Ui.TagCloud({
        // Set parent element
        ParentNode: document.getElementById("tagCloud"),
        // Set visualizers
        Visuals: { ColorVisual: color, SizeVisual: size },
        // Set tag cloud size
        Width: 500,
        Height: 300,
        // Set tags
        ItemsNames: { Tag1: "Tag 1", Tag2: "Tag 2", Tag3: "Tag 3", Tag4: "Tag 4" },
        // Set data source

        DataSources: [data],
        // Set whether tags move on mouse hold down
        IsDragControl: true,
        // Set zoom by mouse wheel
        IsWheelZoom: true,
        // Set element sorting
        SortItems: true
    });
    // Set cylindrical form of element dispersion
    tagCloud.setShape("Cylinder");
}

As a result, tag cloud is added on the page:

Display list of items headers which are in the tag cloud:

// Display items headers:
console.log("Items: ");
var items = tagCloud.getItemsNames();
for (i in items) {
    console.log(items[i]);
}

As a result the console displays headers of the tag cloud items:

Items:

Tag 1

Tag 2

Tag 3

Tag 4