Wednesday, January 7, 2009

Generate a "tag cloud" using DynaCloud (jQuery Plugin)

To make your application look more Web 2.0, it's a good idea to add a Tag Cloud section on some pages. ;)
I did a little search for a jQuery plugin that can do the job and I found DynaCloud.

You can include a Tag Cloud on your page in 4 steps.

1) Add on your page a container for the tag cloud. For good results create an HTML Region and put the following code in the region source. (Set the template to Sidebar Region)

<div id="dynacloud" style="font-size:12px;"></div>


2) Load jQuery using Google AJAX Libraries API

<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1.2.6", {uncompressed:false});
</script>


3) Load DynaCloud Plugin

<script src="&WORKSPACE_IMAGES.jquery.dynacloud-4.js"></script>


4) Add CSS styles to display the Tag Cloud

<style type="text/css">
div#dynacloud {
font-size:5px;
}
div#dynacloud a span{
font-size:1em;
}
.highlight { background-color: yellow }
</style>


5) Configure the settings of DynaCloud. When the page his loaded, add the CSS class "dynacloud" to your page reports regions. And finally, generate the tag cloud.

<script>
$.dynaCloud.sort = false;

$().ready(function() {
$('.t4ReportsRegion').addClass("dynacloud");
$('.dynacloud').dynaCloud();
});
</script>



You can see my working example of a Tag Cloud in APEX.


Talking about clouds, here in Montreal it's snowing... they announced 15-30cm of snow for today. Tonight traveling back home will be long! ;)

5 comments:

Johannes said...
This comment has been removed by the author.
Johannes said...
This comment has been removed by the author.
Marco said...

Followed everything. Tag cloud displays but not with text in varying sizes. Have I missed a step or a switch I need to set in the javascript?

Louis-Guillaume Carrier-Bédard said...

Marco,

You probably have a problem with the CSS.

Don't forget to define the CSS for the tag cloud.

<style type="text/css">
div#dynacloud {
font-size:5px;
}
div#dynacloud a span{
font-size:1em;
}
.highlight { background-color: yellow }
</style>

Let me know if it works or not.

...carol.ish... said...

Hi,

I'm trying to use this plugin on an application, but simply cannot make it work. Can you take a look to see if you can figure out what I'm doing wrong?

Let me tell you this is my first ver attempt to use a jQuery plugin.

Please help! This is a university project and I really don't know what else to do...

http://www.student.city.ac.uk/~abcw246/WordsFromTheGuardian/words.html?id=349653963