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
About the Author
Full Name:
RamaSagar PulidindiMember 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