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">
         <Legends>
            <asp:Legend Name="Default" Title="Top Selling Items"></asp:Legend>
        </Legends>
            <Series>
               
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

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 };
                    series.Points.Add(point);
                    
                }
                ProductSalesChart.Series.Add(series);
            }

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.