Getting Started with JQuery TagCloud widget

This section explains briefly about how to create a TagCloud in your application with JavaScript. The TagCloud can be easily configured to the div element in which the tags are placed. The following screenshot illustrates the functionality of a TagCloud widget with a list of the topmost search engines.

Getting-Started_img1

Create TagCloud widget

Create an HTML file and add the following template to the HTML file.

  • html
  • <!DOCTYPE html>
    <html>
       <head>
          <!-- Style sheet for default theme (flat azure) -->
          <link href="http://cdn.syncfusion.com/18.3.0.35/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet"/>
          <!--Scripts-->
          <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
          <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
          <script src="http://cdn.syncfusion.com/18.3.0.35/js/web/ej.web.all.min.js"></script>
          <!--Add custom scripts here -->
       </head>
       <body>
          <!--Add necessary HTML elements-->
          <!--Apply Scripts-->
       </body>
    </html>

    Add necessary HTML elements.

  • html
  • <div id="tagcloud"></div>

    Add the following code example before </body> tag to add list of items to the TagCloud and initialize the TagCloud widget using dataSource and titleText properties.

  • javascript
  • $("document").ready(function (event) {
             var websiteCollection = [
                 { text: "Yahoo!", url: "http://search.yahoo.com/", frequency: 20 },
                 { text: "DuckDuckGo", url: "https://duckduckgo.com/", frequency: 5 },
                 { text: "Bing", url: "http://www.bing.com/", frequency: 23 },
                 { text: "Blekko", url: "http://blekko.com/", frequency: 4 },  
                 { text: "Alhea", url: "http://www.alhea.com/", frequency: 3 },
                 { text: "MyWebSearch", url: "http://home.mywebsearch.com/index.jhtml", frequency: 10 },
                 { text: "InfoSpace", url: "http://infospace.com/", frequency: 8 },
                 { text: "Google", url: "https://www.google.co.in/", frequency: 24 },
                 { text: "DogPile", url: "http://www.dogpile.com/", frequency: 4 },
        
                 { text: "Wow", url: "http://www.wow.com/", frequency: 14 },
                 { text: "Info", url: "http://www.info.com/", frequency: 6 },
                 { text: "WebCrawler", url: "http://www.webcrawler.com/", frequency: 12 },
                 { text: "ContenKo", url: "http://www.contenko.com/", frequency: 3 },
                 { text: "Aol Search", url: "http://search.aol.com", frequency: 16 },
            ];
            $("#tagcloud").ejTagCloud({
                dataSource: websiteCollection,
                titleText: "Tech Sites"
            });
        });

    The following screenshot displays the output of the above code example.

    Getting-Started_img2

    Set Min and Max Font Size

    In the above code example, the frequency properties are used to set the min and max font size to the TagCloud list item.

  • javascript
  • $("document").ready(function (event) {
             var websiteCollection = [
                 { text: "Yahoo!", url: "http://search.yahoo.com/", frequency: 20 },
                 { text: "DuckDuckGo", url: "https://duckduckgo.com/", frequency: 5 },
                 { text: "Bing", url: "http://www.bing.com/", frequency: 23 },
                 { text: "Blekko", url: "http://blekko.com/", frequency: 4 },  
                 { text: "Alhea", url: "http://www.alhea.com/", frequency: 3 },
                 { text: "MyWebSearch", url: "http://home.mywebsearch.com/index.jhtml", frequency: 10 },
                 { text: "InfoSpace", url: "http://infospace.com/", frequency: 8 },
                 { text: "Google", url: "https://www.google.co.in/", frequency: 24 },
                 { text: "DogPile", url: "http://www.dogpile.com/", frequency: 4 },
        
                 { text: "Wow", url: "http://www.wow.com/", frequency: 14 },
                 { text: "Info", url: "http://www.info.com/", frequency: 6 },
                 { text: "WebCrawler", url: "http://www.webcrawler.com/", frequency: 12 },
                 { text: "ContenKo", url: "http://www.contenko.com/", frequency: 3 },
                 { text: "Aol Search", url: "http://search.aol.com", frequency: 16 },
            ];
            $("#tagcloud").ejTagCloud({         
                dataSource: websiteCollection,
                titleText: "Tech Sites"
            });
        });

    In the above code, the min font size is 3 and max font size is 24.

    Set event to perform an operation

    Here, you can set the TagCloud events such as create, mouseover, mouseout, click.

  • javascript
  • $("document").ready(function (event) {
                  var websiteCollection = [
                     { text: "Yahoo!", url: "http://search.yahoo.com/", frequency: 20 },
                     { text: "DuckDuckGo", url: "https://duckduckgo.com/", frequency: 5 },
                     { text: "Bing", url: "http://www.bing.com/", frequency: 23 },
                     { text: "Blekko", url: "http://blekko.com/", frequency: 4 },  
                     { text: "Alhea", url: "http://www.alhea.com/", frequency: 3 },
                     { text: "MyWebSearch", url: "http://home.mywebsearch.com/index.jhtml", frequency: 10 },
                     { text: "InfoSpace", url: "http://infospace.com/", frequency: 8 },
                     { text: "Google", url: "https://www.google.co.in/", frequency: 24 },
                     { text: "DogPile", url: "http://www.dogpile.com/", frequency: 4 },
            
                     { text: "Wow", url: "http://www.wow.com/", frequency: 14 },
                     { text: "Info", url: "http://www.info.com/", frequency: 6 },
                     { text: "WebCrawler", url: "http://www.webcrawler.com/", frequency: 12 },
                     { text: "ContenKo", url: "http://www.contenko.com/", frequency: 3 },
                     { text: "Aol Search", url: "http://search.aol.com", frequency: 16 },
                ];
                $("#tagcloud").ejTagCloud({
                    dataSource: websiteCollection,
                    titleText: "Tech Sites",
                    create: "create",
                    mouseover: "mouseover",
                    mouseout: "mouseout",
                    click: "click",
                    width: "auto"
                });
        });
        function create(args) {
            alert();
        }
        function mouseover(args) {
            alert();
        }
        function mouseout(args) {
            alert();
        }
        function click(args) {
            alert();
        }

    In the above code example, the alert() function is used to show the events that happened.