Gal Ratner
Gal Ratner is a Techie who lives and works in Los Angeles CA and Austin TX. Follow galratner on Twitter Google
Display your top selling products in ASP.NET using a Bubble Chart

System.Web.DataVisualization contains 34 types of charts. The most common of them is the Column chart on which I already blogged about in Display a sales chart with ASP.NET Chart control and Linq to SQL.

Today I am going to take our sales chart one step further and display the top selling products for the year. Since we have multiple products for each time span, I chose a Bubble chart.
First let’s look at the data model:

We are going to group our year’s sales into months and extract the top 5 selling products for that month.

This is our Linq statement:

var productSales = from o in context.Orders
                               where o.DatePlaced.Value.Year == year
                               group o by o.DatePlaced.Value.Month into g
                               orderby g.Key
                               select new
                                   Month = g,
                                   TopProducts = (from op in context.OrderProducts
                                                  where op.OrderDate.Value.Year == year && op.OrderDate.Value.Month == g.Key
                                                  group op by op.ProductID into opg
                                                  orderby opg.Count() descending
                                                  select new { ProductName = context.Products.Where(p => p.ProductID == opg.Key).Single().ProductName, ProductCount = opg.Count() }).Take(5)

This is our chart:

 <asp:Chart ID="ProductSalesChart" Width="400px" runat="server">
            <asp:Legend Name="Default" Title="Top Selling Items"></asp:Legend>
                <asp:ChartArea Name="ChartArea1">

Now let’s add a new Series for each month. We are going to display the current month as text and add new data points indicating the top selling products.

 foreach (var sale in productSales)
                Series series = new Series(Enum.Parse(typeof(Month), sale.Month.FirstOrDefault().DatePlaced.Value.Month.ToString()).ToString()) { ChartType = SeriesChartType.Bubble};
                foreach (var topProduct in sale.TopProducts){
                    DataPoint point = new DataPoint() { XValue = sale.Month.Key, YValues = new double[] { (double)topProduct.ProductCount }, Label = topProduct.ProductName };

The end result is the following chart:

As you can see it is fairly simple to create a visually appealing chart that can help sales professional better understand sales data.

Shout it

Posted 28 Jun 2011 5:01 AM by Gal Ratner
Filed under: ,

Powered by Community Server (Non-Commercial Edition), by Telligent Systems