Bind A Google Chart With WebGrid in Web API

Introduction

This article describes how to bind Google Chart in a WebGrid. Here we add a WebGrid that shows a chart of the state population.

Procedure for creating the application.

Step 1

First we create a Web API application as in the following:

  • Start Visual Studio 2013.
  • From the Start Window select "New Project".
  • From the new project window select "Installed" -> "Visual C#" -> "Web" -> "Visual Studio 2012".
  • Select "ASP.NET MVC4 Web Application" and click the "OK" button.

    gchart.jpg

  • From the "MVC4 project" window select "Web API".

    gchart1.jpg

  • Click on the "OK" button.

Step 2

Add a Model folder as in the following:

  • In the "Solution Explorer".
  • Right -click on the "Model folder".
  • Select "Add" -> "class".
  • From the add item window select "Installed" -> "Visual C#".
  • Select "Class" and click on the "Add" button.
    gchart2.jpg

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;   
  5. namespace WebGridChartAPI.Models  
  6. {  
  7.     public class StateModel  
  8.     {   
  9.         public List<State> StateValueModel { getset; }  
  10.     }  
  11.     public class State  
  12.     {  
  13.         public int ID { getset; }  
  14.         public string StateName { getset; }  
  15.         public int Population { getset; }  
  16.     }  
  17. }   

Step 3

Now in the "Controller" we add the code that uses all the variables of the Model class. This file exists:

  • In the "Solution Explorer".

  • Expand the "Controller" folder.

  • Select the "HomeController".
    gchart3.jpg


Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using WebGridChartAPI.Models;  
  7. namespace WebGridChartAPI.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             ViewBag.Message = "Bind Google chart";  
  14.             StateModel obj = new StateModel();  
  15.             List<State> obj1 = new List<State>();  
  16.             obj1 = GetStateList();  
  17.             obj.StateValueModel = obj1;  
  18.             return View(obj);  
  19.         }  
  20.         public List<State> GetStateList()  
  21.         {  
  22.             List<State> objstate = new List<State>();  
  23.             objstate.Add(new State { ID = 1, StateName = "UtterPradesh", Population = 70 });  
  24.             objstate.Add(new State { ID = 2, StateName = "Delhi", Population = 50 });  
  25.             objstate.Add(new State { ID = 3, StateName = "Madhya Pradesh", Population = 60 });  
  26.             objstate.Add(new State { ID = 4, StateName = "Rajasthan", Population = 100 });  
  27.             return objstate;  
  28.         }  
  29.     }  
  30. }   

Step 4

In the View write some code as in the following:

  • In the "Solution Explorer".

  • Expand the "Views Folder"

  • Select "Home" -> "Index.cshtml".
    gchart4.jpg

Add the following code:

  1. @model WebGridChartAPI.Models.StateModel  
  2. @{  
  3.     ViewBag.Title = "Bind grid";  
  4. } <h2>@ViewBag.Message</h2>  
  5. @{  
  6.     var grid = new WebGrid(source: Model.StateValueModel, rowsPerPage: 10);  
  7. }  
  8. <style type="text/css">  
  9. table.gridtable {  
  10.     font-family: verdana,arial,sans-serif;  
  11.     font-size:large;  
  12.     color:#333333;  
  13.     border-width: 1px;  
  14.     border-color: #4800ff;  
  15.     border-collapse: collapse;  
  16. }  
  17. table.gridtable th {  
  18.     border-width: 1px;  
  19.     padding: 8px;  
  20.     border-style: solid;  
  21.     border-color: #4800ff;  
  22.     background-color: #d18e8e;  
  23. }  
  24. table.gridtable td {  
  25.     border-width: 1px;  
  26.     padding: 8px;  
  27.     border-style: solid;  
  28.     border-color: #4800ff;  
  29.     background-color: #c6cff1;  
  30. }  
  31.     </style>  
  32. @grid.GetHtml(alternatingRowStyle: "even",  
  33.      tableStyle: "gridtable",  
  34. columns: grid.Columns(  
  35. grid.Column("ID""SERIAL_NO"),  
  36. grid.Column("StateName", header: "STATE_NAME"),  
  37. grid.Column("Population", header: "CHART", format:  
  38. @<text><img src="https://chart.googleapis.com/chart?cht=bhs&chd=t:@item.Population&chs=60x30" alt="@item.Population" /></text>)  
  39.     ))   

Step 5

Execute the application. The output will be as:

gchart5.jpg