Thursday, March 22, 2012

Generating Tag Cloud in ASP.net /C#


ShareThis
Tag Cloud or Word Cloud is used to show frequency of words or phrases on your website or in some content.
Here is what this Tag Cloud will look like:

//Add this code in your solution:

public class TagCloudGenerator
{
	public string GetTagCloudHTML(Dictionary<stringint> tagNameWithFrequesncies)
	{
		StringBuilder tagCloudString = new StringBuilder("");
		int highestFrequency = tagNameWithFrequesncies.Values.Max();
		int counter =1;
		foreach (string tag in tagNameWithFrequesncies.Keys)
		{
			string tagClass = GetTagClass(tagNameWithFrequesncies[tag], highestFrequency);
            //TODO: need to set proper URL where links should redirect to
			string targetUrl  = "http://abc.com/filter=" + tag;
			string tagItem = " + counter + "' class='" + tagClass + "'> + targetUrl + "'>" + tag + "";
			tagCloudString.Append(tagItem);
		}
 
		tagCloudString.Append("");
		return tagCloudString.ToString();
	}
 
	public string GetTagClass(int tagFrequency, int highestFrequency)
	{
		if(tagFrequency == 0 || highestFrequency ==0)
		return "tag0";
 
		var percentageFrequency = (tagFrequency * 100) / highestFrequency;
 
		if (percentageFrequency >= 90)
			return "tag90";
		if (percentageFrequency >= 80)
			return "tag80";
		if (percentageFrequency >= 70 )
			return "tag70";
		if (percentageFrequency >= 60)
			return "tag60";
		if (percentageFrequency >= 50)
			return "tag50";
		if (percentageFrequency >= 40)
			return "tag40";
		if (percentageFrequency >= 30)
			return "tag30";
		if (percentageFrequency >= 20)
			return "tag20";
		if (percentageFrequency >= 10)
			return "tag10";
		if (percentageFrequency >= 1)
			return "tag1";
 
// This is the required code to be placed in the Page where you want to generate Tag cloud 
protected void Page_Load(object sender, EventArgs e)
    {
        Dictionary<stringint> categoryTags = new Dictionary<string,int>();
        categoryTags.Add("Science", 100);
        categoryTags.Add("Maths", 80);
        categoryTags.Add("Biology", 190);
        categoryTags.Add("Physics", 70);
        categoryTags.Add("Commerce", 60);
        categoryTags.Add("Behavioral Science", 90);
        categoryTags.Add("Psychology", 40);
        categoryTags.Add("Numismatics", 43);
        categoryTags.Add("Philately", 45);
        categoryTags.Add("English", 28);
        categoryTags.Add("Hindi", 145);
        categoryTags.Add("Oriya", 40);
        categoryTags.Add("French", 10);
        categoryTags.Add("German", 9);
        categoryTags.Add("Sanskrit", 8);
        categoryTags.Add("Telugu", 20);
        categoryTags.Add("Kannara", 2);
        categoryTags.Add("Malyalam", 1);
        categoryTags.Add("Pongal", 0);
        categoryTags.Add("Earth Sciences", 90);
 
        tag.InnerHtml = new TagCloudGenerator().GetTagCloudHTML(categoryTags);
       
    }
// This is the CSS Style you need for rendering Tag Cloud
// Put this is the head section of your ASPX /HTML page 
<style type="text/css">
        
        .tagCloud
        {
            width:400px;
            height:auto;
            border:1px solid black;
            font-family:Arial;
            padding:10px;
        }
        
        .tagCloud span
        {
            display:inline-block; 
            vertical-align:middle
        }
        
        .tagCloud a
        {
            text-decoration:none;
        }
        
        .tagCloud a:hover
        {
            text-decoration:underline;
            background-color:Blue;
            color:White;
           
        }
        
 
        .tag0
        {
            font-size:0pt;
            padding:5px;    
        }
        
        .tag1
        {
            font-size:8pt;    
            padding:5px;    
            
        }
        .tag10
        {
            font-size:10pt;   
            padding:5px;    
             
        }
        
        .tag20
        {
            font-size:12pt;
            padding:5px;    
                
        }
        .tag30
        {
            font-size:14pt;
            padding:5px;    
                
        }
        .tag40
        {
            font-size:16pt;    
            padding:5px;    
            
        }
        .tag50
        {
            font-size:18pt; 
            padding:5px;    
               
        }
        .tag60
        {
            font-size:20pt;  
            padding:5px;    
              
        }
        .tag70
        {
            font-size:22pt;  
            padding:5px;    
              
        }
        .tag80
        {
            font-size:24pt;
            padding:5px;    
                
        }
        .tag90
        {
            font-size:30pt;
            padding:5px;    
        }
         
        
    style>  
return "tag0"; } }