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.

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

• 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.

Add the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web; 

namespace WebGridChartAPI.Models

{
    public class StateModel

    { 
   public List<State> StateValueModel { get; set; }

}

public class State

{

public int ID { get; set; }

public string StateName { get; set; }

public int Population { get; set; }

}

}

   
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".

Add the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using WebGridChartAPI.Models;

namespace WebGridChartAPI.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            ViewBag.Message = "Bind Google chart";

            StateModel obj = new StateModel();

            List<State> obj1 = new List<State>();

            obj1 = GetStateList();

            obj.StateValueModel = obj1;

            return View(obj);

        }

        public List<State> GetStateList()

        {

            List<State> objstate = new List<State>();

            objstate.Add(new State { ID = 1, StateName = "UtterPradesh", Population = 70 });

            objstate.Add(new State { ID = 2, StateName = "Delhi", Population = 50 });

            objstate.Add(new State { ID = 3, StateName = "Madhya Pradesh", Population = 60 });

            objstate.Add(new State { ID = 4, StateName = "Rajasthan", Population = 100 });

            return objstate;

        }

    }

}

 

Step 4

In the View write some code as in the following:

• In the "Solution Explorer".

• Expand the "Views Folder"

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

Add the following code:

 

@model WebGridChartAPI.Models.StateModel

@{

    ViewBag.Title = "Bind grid";

} <h2>@ViewBag.Message</h2>

@{

    var grid = new WebGrid(source: Model.StateValueModel, rowsPerPage: 10);

 

}

<style type="text/css">

table.gridtable {

    font-family: verdana,arial,sans-serif;

    font-size:large;

    color:#333333;

    border-width: 1px;

    border-color: #4800ff;

    border-collapse: collapse;

}

table.gridtable th {

    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #4800ff;

    background-color: #d18e8e;

}

table.gridtable td {

    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #4800ff;

    background-color: #c6cff1;

}

    </style>

@grid.GetHtml(alternatingRowStyle: "even",

     tableStyle: "gridtable",

columns: grid.Columns(

grid.Column("ID", "SERIAL_NO"),

grid.Column("StateName", header: "STATE_NAME"),

grid.Column("Population", header: "CHART", format:

@<text><img src="https://chart.googleapis.com/chart?cht=bhs&chd=t:@item.Population&chs=60x30" alt="@item.Population" /></text>)

    ))

Step 5

Execute the application. The output will be as: