Word Cloud is a technique where we analyze a string to find words inside the string and the number of appearances of the word. Word Cloud displays words in different styles according to the word density in the string. Common format is that words with most number of occurrences are displayed with a higher font size and words with least number of occurrences is displayed with small font size.

Word Cloud can be used as a interactive widget which enables users to easily identify what the web site is about. Making the word cloud dynamic and interactive means that more users will be interested in using its functionality. Hence you will get more traffic and publicity to your web site.

Google Visualization API provides a built in word cloud widget using js. We can pass text content to javascript variables and generate the word cloud. Default code provided by google code uses data table to create the cloud. So we need to create a data table with rows and columns in order to use this script. Following Code shows you how to use google word cloud widget.

• First you have to include the 2 js files and css file provided by google visualization api.
• Next define the container to load the word cloud ( Ex: Div with the id wcdiv).
• Then we load the visualization api and call a function called draw to create the word cloud.
• Next we need to create the data table to search using google.visualization.DataTable().
• Since we have created the data table now we need to add columns and rows.
• This example uses only 1 column. You can add as many columns as you like using addColumn() function.
• Then we need to specify the number of rows we going to use using addRows() function.
• Next we have to set the table cell values like an array indexes using setCell() function.
• Finally we specify the output container and create the WordCloud object to draw the word cloud.

 

This is the most basic way of using Google Visualization API Word Cloud. You can use this script in various kind of ways using server side code and database values to create more meaningful word clouds.Next section i’ll show you how to create a plugin using google widget to interact with the server side.

In this section I’m going to explain how to make a extend word cloud to interact with server side data using the Google Word Cloud Widget. I am going to use jquery for making ajax requests.

$con = mysql_connect("localhost","admin","admin");
mysql_select_db("wordpress");

$result = mysql_query("select post_title from wp_posts where post_status='publish' limit 50");
$x = 0;
$str = array();
while ($row = mysql_fetch_array($result)) {
        array_push($str, $row['post_title']);
        $x++;
}
echo json_encode(array("result"=>$str,"rows"=>mysql_num_rows($result)));

• You can use the same code with few modifications to interact with server side. I am going to explain the modified code only.
• I have added some code to make ajax request inside the draw function..
• You can specify the a php page to get data from server and return the data in a json format.
• Then assign the returned content to js variable using jquery parseJSON function.
• Then create the data table as above and assign the number of rows returned from server to addRow function.
• Next you can traverse through each item result returned from the server and add to data table using setCell function.
• Finally assign the output to a container as above.
• In the server side php code connect to database and get what ever data you want to display in the word cloud and add to an array.
• Then encode the words array and number of items using json_encode as shown above and echo it.

 

There are many situations where you can create a word cloud. In the following section I'll show you some practical examples of a word cloud.

• Creating a Ajax Based Live Site Search

  You can create a word cloud and when the user moves the mouse over each word you can show the links of the pages which contains that word in a dynamic div.

• Searching Words on Google

  There can be some words in your web site content that some users doesn't know the meaning. In such situations you can assign links to words in the word cloud to search in google.

• Finding Keyword Density in Web Pages

  Keyword density is how much percentage keyword value has compared to total number of words in a page. We can create a word cloud which displays density of each word on mouse over.