Custom Elements

Show Demo List

Theme:

Demo
View Source
API Reference

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element ShowHideTags</title>    <meta name='description' content='In this demo is demonstrated how to show/hide tags in TagCloud Custom Element.' />    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script type="text/javascript">        var data =            [                { countryName: "Australia", technologyRating: 35 },                { countryName: "United States", technologyRating: 60 },                { countryName: "Germany", technologyRating: 55 },                { countryName: "Brasil", technologyRating: 20 },                { countryName: "United Kingdom", technologyRating: 50 },                { countryName: "Japan", technologyRating: 80 }            ];        var source =            {                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            };        var dataAdapter = new jqx.dataAdapter(source, {});             JQXElements.settings['tagCloudSettings'] =            {                source: dataAdapter,                displayMember: 'countryName',                valueMember: 'technologyRating'            };        window.onload = function() {            var myTagCloud = document.querySelector('jqx-tag-cloud');            var myButtons = document.querySelectorAll('jqx-button');            myButtons[0].addEventListener('click', _ => {                var records = myTagCloud.getTagsList();                var hiddenTagsList = myTagCloud.getHiddenTagsList();                for (var i = 0; i < records.length; i++) {                    if (hiddenTagsList.indexOf(records[i].index) == -1) {                        myTagCloud.hideItem(records[i].index);                        return;                    }                }            });            myButtons[1].addEventListener('click', _ => {                var hiddenTagsList = myTagCloud.getHiddenTagsList();                if (hiddenTagsList[0] !== undefined) {                    var tagId = hiddenTagsList[0];                    myTagCloud.showItem(tagId);                }            });        };    </script></head><body>    <div class="example-description">        Tag Cloud Custom Element Show/Hide Tags.    </div>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>    <br />    <br />    <jqx-button>Hide Item</jqx-button>    <jqx-button>Show Item</jqx-button></body></html>

alterTextCase string 'none'

Sets or gets the alterTextCase property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating", alterTextCase:"titleCase"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

disabled boolean false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating",disabled:true        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

displayLimit number null

Sets or gets the displayLimit property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating",displayLimit:3        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

displayMember string 'label'

Sets or gets the displayMember property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

displayValue boolean false

Sets or gets the displayValue property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating",displayValue:true        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

fontSizeUnit string 'px'

Sets or gets the fontSizeUnit property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating", fontSizeUnit:"em"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

height number null

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating",height:50        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

maxColor string null

Sets or gets the maxColor property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating", maxColor:"darkgreen"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

maxFontSize number 24

Sets or gets the maxFontSize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating",maxFontSize:5        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

maxValueToDisplay number 0

Sets or gets the maxValueToDisplay property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating",maxValueToDisplay:50        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

minColor string null

Sets or gets the minColor property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating", minColor:"lime"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

minFontSize number 10

Sets or gets the minFontSize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating",minFontSize:1        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

minValueToDisplay number 0

Sets or gets the minValueToDisplay property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating",minValueToDisplay:30        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

rtl boolean false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating",rtl:true        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

sortBy string 'none'

Sets or gets the sortBy property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating", sortBy:"label"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

sortOrder string 'ascending'

Sets or gets the sortOrder property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating", sortOrder:"descending"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

source object {}

Sets or gets the source property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

tagRenderer function null

Sets or gets the tagRenderer property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating", tagRenderer:"tagRenderer"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

takeTopWeightedItems boolean false

Sets or gets the takeTopWeightedItems property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating",takeTopWeightedItems:true        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

textColor string null

Sets or gets the textColor property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating", textColor:"red"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

urlBase string ''

Sets or gets the urlBase property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating", urlBase:"http://jqwidgets.com/"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

urlMember string 'url'

Sets or gets the urlMember property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating", urlMember:"tagHref"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

valueMember string 'value'

Sets or gets the valueMember property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

width number null

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating"        }    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

bindingComplete Event

Code examples

Bind to the bindingComplete event of jqxTagCloud.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating"        }	window.onload = function() {		document.querySelector("jqx-tag-cloud").addEventListener("bindingComplete", function(event) {			// Your code here.		});	};    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

itemClick Event

Code examples

Bind to the itemClick event of jqxTagCloud.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			 source:adapter, displayMember:"countryName", valueMember:"technologyRating"        }	window.onload = function() {		document.querySelector("jqx-tag-cloud").addEventListener("itemClick", function(event) {			// Your code here.		});	};    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

destroy Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tag-cloud").destroy();								}    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

findTagIndex Method

Parameter	Type	Description
tag	string

Return Value
Number

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tag-cloud").findTagIndex('USA');								}    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

getHiddenTagsList Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			        }	window.onload = function() {		var result = document.querySelector("jqx-tag-cloud").getHiddenTagsList();								}    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

getRenderedTags Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			        }	window.onload = function() {		var result = document.querySelector("jqx-tag-cloud").getRenderedTags();								}    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

getTagsList Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			        }	window.onload = function() {		var result = document.querySelector("jqx-tag-cloud").getTagsList();								}    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

hideItem Method

Parameter	Type	Description
index	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tag-cloud").hideItem(1);								}    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

insertAt Method

Parameter	Type	Description
index	number
item	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tag-cloud").insertAt(1,'USA');								}    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

removeAt Method

Parameter	Type	Description
index	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tag-cloud").removeAt(1);								}    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

updateAt Method

Parameter	Type	Description
index	number
item	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tag-cloud").updateAt(1,'USA');								}    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

showItem Method

Parameter	Type	Description
index	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Tag Cloud Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var data = [             { countryName: "Australia", technologyRating: 35 },             { countryName: "United States", technologyRating: 60 },             { countryName: "Germany", technologyRating: 55 },             { countryName: "Brasil", technologyRating: 20 },             { countryName: "United Kingdom", technologyRating: 50 },             { countryName: "Japan", technologyRating: 80 }        ];       var adapter = new jqx.dataAdapter({                localdata: data,                datatype: "array",                datafields: [                    { name: 'countryName' },                    { name: 'technologyRating' }                ]            });        JQXElements.settings["tagCloudSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tag-cloud").showItem(1);								}    </script></head><body>    <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud></body></html>

Custom Elements

Custom Elements

Properties

Events

Code examples

Code examples

Methods