Getting Deep into .net

October 10, 2011

How to create Tag Cloud in Silverlight

Filed under: How To,Silverlight 4 — goldytech @ 2:25 pm
Tags:

 

WHAT IS A TAG CLOUD

A tag cloud is a collection of texts that gets classified into the level of the importance. Text with greater importance are shown in the bigger size followed by the preceding importance , in short they are arranged in descending order. The importance is identified by one of the property usually a numeric value. It is one of the popular way for data visualizations. It is really gaining great heights in Business Intelligence 2.0 world. In this post I shall teach you how you can create tag cloud in Silverlight.

SCENARIO

To showcase my example we will take the top ten stocks that were traded on the stock exchange by their last trading price. See the screen shot below.

top10stocks

As you can see from the above picture. The company names text font size are appearing based on their last trading price. I have taken only two colors (Magenta and Blue) but the developer can implement a random color logic also here.

SILVERLIGHT IMPLEMENTAION

To generate the tag cloud in Silverlight is super simple. I have taken a wrap panel control available in Silverlight toolkit. I then add each textblock as children of this wrap panel. All this is done using MVVM Light Toolkit version 4 , which is still in Beta state but it is pretty stable. Let us dive into the code to have better idea.

public class MainViewModel :ViewModelBase

    {
        public MainViewModel()
        {

         
            GenerateCommand=new RelayCommand(()=>
                                {
                                    var stocks = GetStocks();
                                    double minLastPrice = stocks.Min(a => a.LastPrice);
                                    double maxLastPrice = stocks.Max(b => b.LastPrice);
                                    double diffLastPrice = maxLastPrice - minLastPrice;
                                    const double minFontSize = 15.0;
                                    const double maxFontSize = 40.0;
                                    const double diffFontSize = maxFontSize - minFontSize;
                                    for (int i = 0; i < stocks.Count(); i++)
                                    {
                                        Messaging.RaiseAddTextBlock.Send(new TextBlock { Text = stocks[i].Company, Foreground = i % 2 == 0 ? new SolidColorBrush(Colors.Magenta) : new SolidColorBrush(Colors.Blue), Margin = new Thickness(3), FontSize = minFontSize + stocks[i].LastPrice * diffFontSize / diffLastPrice });
                                    }
                                });
           

          
        }

        public RelayCommand GenerateCommand { get; private set; }       

        private List<Stock> GetStocks()
        {
            var stocks = new List<Stock>
        {
            new Stock { Company = "TATAPOWER", LastPrice= 105.25},
            new Stock { Company = "TATAMOTORS", LastPrice= 169.90},
            new Stock { Company = "DLF", LastPrice= 228.55},
            new Stock { Company = "SESAGOA", LastPrice= 214.35},
            new Stock { Company = "IDFC", LastPrice= 121.15},
            new Stock { Company = "TATASTEEL", LastPrice= 434.70},
            new Stock { Company = "INFY", LastPrice= 2597.50},
            new Stock { Company = "STER", LastPrice= 117.40},
            new Stock { Company = "RELIANCE", LastPrice=829.20},
            new Stock { Company = "WIPRO", LastPrice= 344.65}
          
        };
            return stocks;
        }

    }
}

The above code is not a brainer and it is self explanatory . The only thing that needs to be considered is the FontSize property of the textblock where I put the logic of displaying the size as per the LastPrice property of the stock class. The datasource of my Tag Cloud is hard coded collection but it could be dynamic also.

CLOSURE

Silverlight as a platform as a tremendous potential to develop BI apps. You can create great data visualizations from the toolkit available or from the third party controls from the different vendors. I encourage developer to explore this area and create a appealing user experience for your BI users. Download the sample code from here and enjoy Smile.

About these ads

1 Comment »

  1. usefull article for the beginers like me :)

    Comment by Sajid — October 10, 2011 @ 4:39 pm | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Rubric Theme Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

Join 69 other followers

%d bloggers like this: