Getting Started with jqxTagCloud in 5 Minutes

A Tag cloud is known as “weight cloud” or “weighted list”. It is the visual representation of popular keywords with some weight on it. The weight represents the popularity, importance, and recurrence of the tag on the page. These are used by a search engine to find the relevant articles, videos, and posts on the website. It is customizable and enhances creativity in the posts.

There are three types of tag clouds in applications.

1) Frequency: It represents the number of times the tag has been applied to a single item. Size represents the number of items it has been applied or voted for.

2) Significance: The size can be used to represent the significance of words; it compares document frequencies to expected distributions.

3) Categorization: Tags categorizes the content items, in a cloud. They represent the number of content items in that category.

Tags are created using inline HTML elements. They can be in random or alphabetical order or can be sorted according to weight.

Cloud Tag Populated using JSON

Why jQWidgets?

jQWidget represents a JavaScript UI framework for building professional web applications. The framework provides fundamental capabilities like support for widget extension, inheritance, internal event handling, routing, etc. It has several themes, styling’s and is easily customizable. It works on a wide range of devices and has optimized performance.

The jQWidget framework has a flexible and customizable UI component for tagging, jqxTagCloud. It is very easy to step up in an application, has customizable features and can be styled according to the values or weights given in the data.

This article will illustrate on setting up a basic HTML file with jQwidget component jqxTagCloud. Later we will see the setting for styles and appearances for tags. At the end of this article, we will have a glimpse of the supporting features.

Installation:

You can install jQWidget framework using Browser, npm or NuGet. Below are the steps to demonstrate using npm.

The framework will be installed in the working directory, node_modules\jqwidgets-framework. All the SDK files are located in this directory. To know more info of jQWidgets npm package run:

Getting Started with jqxTagCloud

This is a flexible UI component that displays user-generated tags. These keywords can have their own URL, which navigated to the collections of items mapping to relevant tags. Appearance can be easily controlled, items to be displayed can be chosen in the cloud, items can have particular weight and size, also sorting of tags is possible using alphabetical orders.

Every UI widget from jQwidgets needs its javaScript files to be included.

Step1:

1. Create an HTML file and add below links to your project. The jqxTagCloud requires the following files.

­­Step2:

Create a DIV element using jqxTagCloud within the body of HTML document.

Step3:

Initialize the widget by adding the below script to HTML document. Add a valid source to tag.

Simple jQuery syntax is used to bind an event of a UI widget. Below is the example of item click event used in “jqxTagCloud”.

Below is the output of this basic example created using jQWidget tag cloud component.

Displaying Tags using weights:

Usually, tags are defined using weights which represent the font size of the tag. Below is the example illustrating the use of weight as the visual representation for the tags.

Here the data entity has populated an array consisting of “countryName” and “technologyRating”. Technology rating defines the rating/weights for each item.

You can see the country names are displayed according to their ratings. Eg: Japan has a high rating and Brasil has the lowest.

Styling & Appearance:

As styling is an important factor to display tags. In this section, we will focus on different styling features.

1. Setting min and max font size depending on values/weights. In this example, the peaks are scaled by their height and text to brown.

Font size depends upon the values set in data. Color setting is the same for all tags.

2. Setting the tag colors and transitioning colors using weight. In this example min color and max, color is set which will transition according to the values.

MinColor and maxColor vary according to values set for each tag.

3. Alteration of text cases, from “none” to “uppercase”. We can set the case for tags.

4. Pairing with the theme bases CSS files. We can use separate themes which enables us to create styles similar to widget layouts like margin, padding, border-width, position, colors, and background.

5. Supporting cloud theme: We can have separate themes set for individual tags.

Supporting features:

JSON format which is lightweight and usually used to store and transport data is supported by jqxTagCloud. We can set the JSON datatype and the URL to set the JSON data.

We can also, sort and filter the tags are also supported with ascending and descending order.

Summary

jQWidget is slowly growing popularity in web developers. It has this easily customizable UI component jqxTagCloud which sets the tag in article and posts. In this article, we have seen a basic example of creating a tag using jqxTagCloud component. We can easily style each and every tag with fonts, colors according to weights.