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:

Step 2

Add a Model folder as in the following:

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 { get; set; }
  10. }
  11. public class State
  12. {
  13. public int ID { get; set; }
  14. public string StateName { get; set; }
  15. public int Population { get; set; }
  16. }
  17. }

Step 3

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


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:

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