Charts and Web Grid in MVC3

Two new features that was introduced in MVC3 are Charts and Web Grid. Using the Example i am explaining the WebGrid and the Different types of charts, How we can implement different types of charts in the single view. following is the output that you will see

Charts & Web Grid

Bellow is the code.
-------------------------------------------------------------------------------------------------------------

 Product.cs  
 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 namespace Custome_View_path.Areas.CustomView.Models  
 {  
   public class Product  
   {  
     public string Name { get; set; }  
     public string Category { get; set; }  
     public decimal Price { get; set; }  
   }  
 }  
 -----------------------------------------------------------------------------------------------------------  
  Create Following action method in Controller  
 public ActionResult Grid()  
     {  
       return View(GetList());  
     }  
     public ActionResult LineChart()  
     {  
       return View(GetList());  
     }  
     public ActionResult PieChart()  
     {  
       return View(GetList());  
     }  
     public ActionResult AreaChart()  
     {  
       return View(GetList());  
     }  
     public ActionResult ColumnChart()  
     {  
        return View(GetList());  
     }  
     public ActionResult BarChart()  
     {  
       return View(GetList());  
     }  
     public ActionResult StockChart()  
     {  
       return View(GetList());  
     }  
  public IEnumerable<Product> GetList()  
     {  
       IEnumerable<Product> productList = new List<Product> {  
         new Product {Name = "Kayak", Category = "Watersports", Price = 275m},  
         new Product {Name = "Lifejacket", Category = "Watersports", Price = 48.95m},  
         new Product {Name = "Soccer ball", Category = "Football", Price = 19.50m},  
         new Product {Name = "Corner flags", Category = "Football", Price = 34.95m},  
         new Product {Name = "Stadium", Category = "Football", Price = 150m},  
         new Product {Name = "Thinking cap", Category = "Chess", Price = 16m}  
       };  
       return productList;  
     }  
 -------------------------------------------------------------------------------------------------------------  
 Create a view or partial view for each of them  
 @model IEnumerable<Custome_View_path.Areas.CustomView.Models.Product>  
 @using Custome_View_path.Controllers;  
 @{  
   var chart = new Chart(400, 200, @"<Chart BackColor=""Gray"" BackSecondaryColor=""WhiteSmoke""  
         BackGradientStyle=""DiagonalRight"" AntiAliasing=""All""  
         BorderlineDashStyle = ""Solid"" BorderlineColor = ""Gray"">  
         <BorderSkin SkinStyle = ""Emboss"" />  
         <ChartAreas>  
         <ChartArea Name=""Default"" _Template_=""All"" BackColor=""Wheat""  
         BackSecondaryColor=""White"" BorderColor=""64, 64, 64, 64""  
         BorderDashStyle=""Solid"" ShadowColor=""Transparent"">  
         </ChartArea>  
         </ChartAreas>  
         </Chart>")  
    .AddTitle("Area Chart")  
    .AddSeries(  
     chartType: "Area",  
     yValues:Model.Select(e => e.Price).ToArray(),  
     xValue: Model.Select(e => e.Name).ToArray()  
         )  
    .Write();  
  }  
 Replicate this view for all charts and change the chartType for each  
 chartType: "Area"  
 chartType: "Pie"  
 chartType: "Stock" etc...  
 --------------------------------------------------------------------------------------------------------------  
 Create a view in which you want to display these charts and Grid  
 Partial view: _Grid.cshtml  
 @model IEnumerable<Custome_View_path.Areas.CustomView.Models.Product>  
 <style type="text/css">  
   .grid  
   {  
     margin: 4px;  
     border-collapse: collapse;  
     width: 600px;  
   }  
   .head  
   {  
     background-color: #E8E8E8;  
     font-weight: bold;  
     color: #FFF;  
   }  
   .grid th, .grid td  
   {  
     border: 1px solid #C0C0C0;  
     padding: 5px;  
   }  
   .alt  
   {  
     background-color: #E8E8E8;  
     color: #000;  
   }  
   .product  
   {  
     width: 200px;  
     font-weight: bold;  
   }  
 </style>  
 @{  
   var grid = new WebGrid(  
   source: Model,  
   rowsPerPage: 4,canSort: true);  
   grid.SortDirection = SortDirection.Ascending;  
 }  
 @grid.GetHtml(  
     tableStyle: "grid",  
     headerStyle: "head",  
     rowStyle: "row",  
     footerStyle: "footer",  
     alternatingRowStyle: "alt",  
     mode:WebGridPagerModes.All,  
     previousText:"previous",  
     nextText:"Next",  
     lastText:"Last",  
     columns: grid.Columns(  
     grid.Column("Name", "Item", style: "product"),  
     grid.Column("Price", style: "numberCol",  
     format: @<text>$@string.Format("{0:F2}", item.Price) </text>)  
 ))  
 ---------------------------------------------------------------------------------------------------------------------------------  
 View  
 <table border="0" cellpadding="0" cellspacing="0">  
   <tr>  
     <td>  
       @Html.Partial("_Grid")  
     </td>  
     <td>  
       <div id="chart-content1" style="margin-top: 15px">  
         <img src="@Url.Action("LineChart")" alt="Chart is here"/>  
       </div>  
     </td>  
   </tr>  
   <tr>  
     <td>  
       <div id="chart-content" style="margin-top: 15px">  
         <img src="@Url.Action("AreaChart")" alt="Chart is here"/>  
       </div>  
     </td>  
     <td>  
       <div id="chart-content2" style="margin-top: 15px">  
         <img src="@Url.Action("PieChart")" alt="Chart is here"/>  
       </div>  
     </td>  
   </tr>  
   <tr>  
     <td>  
       <div id="chart-content3" style="margin-top: 15px">  
         <img src="@Url.Action("ColumnChart")" alt="Chart is here"/>  
       </div>  
     </td>  
     <td>  
       <div id="chart-content4" style="margin-top: 15px">  
         <img src="@Url.Action("BarChart")" alt="Chart is here"/>  
       </div>  
     </td>  
   </tr>  
   <tr>  
     <td>  
       <div id="chart-content5" style="margin-top: 15px">  
         <img src="@Url.Action("StockChart")" alt="Chart is here"/>  
       </div>  
     </td>  
     <td>  
     </td>  
   </tr>  
 </table>  

Note : Can download the code from here

 https://docs.google.com/open?id=0B1N7j4r5VvcrUzBHU2I1QkRDNTA