Learn how to bind a Google Chart with WebGrid in Web API2

Rama Sagar
Posted by in ASP.NET Web API category on for Beginner level | Points: 250 | Views : 4426 red flag
Rating: 5 out of 5  
 1 vote(s)

Google Charts provides a perfect way to visualize data on your website.The most common way to use Google Charts is with simple JavaScript that you embed in your web page. You load some Google Chart libraries, list the data to be charted, select options to customize your chart, and finally create a chart object with an id that you choose for more info https://developers.google.com/chart/interactive/docs/index


In this article we will see how to bind a Google chart in a webGrid..Here we will see the Students overall progress in a webgrid

  • Step1:Create a New Project  Open visual studio 2013 --> click on File -> New Project ->select ASP.NET web Application-->name it as StudentProgress

  • Step2:Let create a student model.Right click on Models folder and add new class named Students as we have done here.Add the following implementation shown below

using System.Collections.Generic;

namespace StudentProgress.Models
    public class Students
        public List<student> StudentModel { get; set; }
    public class student
        public int ID { get; set; }

        public string Studentname { get; set; }

        public int Progress { get; set; }
  • Step3: Now lets modify the Homecontroller which we can see in Controllers folder with the following implementation
    using StudentProgress.Models;
using System.Collections.Generic;
using System.Web.Mvc;

namespace StudentProgress.Controllers
    public class HomeController : Controller
        public ActionResult Index()
            ViewBag.Message = "Students Overall Progress";
            Students obj = new Students();
            List<student> stdlst = new List<student>();
            stdlst = GetStateList();
            obj.StudentModel = stdlst;
            return View(obj);
        public List<student> GetStateList()
            List<student> objstudent = new List<student>();
            objstudent.Add(new student { ID = 33, Studentname = "Rama Sagar", Progress = 70 });
            objstudent.Add(new student { ID = 34, Studentname = "Sandeep", Progress = 50 });
            objstudent.Add(new student { ID = 35, Studentname = "Raja Shekhar", Progress = 60 });
            objstudent.Add(new student { ID = 36, Studentname = "Ramesh", Progress = 50 });
            objstudent.Add(new student { ID = 37, Studentname = "Babish", Progress = 100 });
            objstudent.Add(new student { ID = 38, Studentname = "Raja", Progress = 100 });
            objstudent.Add(new student { ID = 39, Studentname = "Ramya", Progress = 100 });
            objstudent.Add(new student { ID = 40, Studentname = "Ravi", Progress = 100 });
            return objstudent;

  • Step4: Now lets modify the view Index.cshtml which we can find it in views-->Home folders

@model StudentProgress.Models.Students
    ViewBag.Title = "Overall Progress";
} <h2>@ViewBag.Message</h2>
    var grid = new WebGrid(source: Model.StudentModel, rowsPerPage: 10);

<style type="text/css">
    table.gridtable {
        font-family: verdana,arial,sans-serif;
        font-size: large;
        color: #808080;
        border-width: 1px;
        border-color: #262627;
        border-collapse: collapse;

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #000000;
            background-color: #ff6a00;

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #4800ff;
            background-color: #c6cff1;
@grid.GetHtml(alternatingRowStyle: "even",
     tableStyle: "gridtable",
columns: grid.Columns(
grid.Column("ID", "Roll NO"),
grid.Column("StudentName", header: "Student NAME"),
grid.Column("Progress", header: "Progress", format:
    @<text><img src="https://chart.googleapis.com/chart?cht=bhs&chd=t:@item.Progress&chs=60x30" alt="@item.Progress" /></text>)


Debug the application and we will see the following grid


In this article we have learned how to display a Google chart in a webgrid 



Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Posted by: Sheonarayan on: 11/30/2013 | Points: 25
Nice, lot of this to learn from your article Rama Sagar.

I was not aware about this cool feature from Google.

Thanks a ton.

Login to post response

Comment using Facebook(Author doesn't get notification)