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 : 3883 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

Introduction


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;
        }
</style>
@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





Conclusion


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

Reference

https://developers.google.com/chart/interactive/docs/index

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
ramasagar
http://www.ramasagar.com
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)