How to used google chart in[google chart]

In this post,I will show you how to display google chart in going to implementation details,go through the following link

Visualization: Pie Chart

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PieChart.aspx.cs" Inherits="PiChart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head id="Head1" runat="server">
    <title>jQuery Google Chart Demo</title>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
    function drawChart() {
    var hdValue = document.getElementById("<%=hdData.ClientID%>").value;
    var response = $.parseJSON(hdValue);
    var data = new google.visualization.DataTable();
            data.addColumn('string', 'TaskType');
            data.addColumn('number', 'HoursPerDay');
    for (var i = 0; i < response.length; i++) {
    var row = new Array();
                row[0] = response[i].TaskType;
                row[1] = parseInt(response[i].HoursPerDay);
    var options = {
                title: 'My Daily Activities'
            chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
    <script type="text/javascript">
    <form id="dform" runat="server">
    <div id="chart_div" style="width: 900px; height: 500px;">
    <asp:HiddenField ID="hdData" runat="server" />

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Web.Script.Serialization;
public partial class PiChart : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
    if (!IsPostBack)
            StringBuilder data = new StringBuilder();
            JavaScriptSerializer json = new JavaScriptSerializer();
            json.Serialize(GetSampleData(), data);
            hdData.Value = data.ToString();
    private List<Task> GetSampleData()
        List<Task> tasks = new List<Task>
    new Task{TaskType="Work",HoursPerDay=11},
    new Task{TaskType="Eat",HoursPerDay=2},
    new Task{TaskType="Commute",HoursPerDay=2},
    new Task{TaskType="Watch TV",HoursPerDay=2},
    new Task{TaskType="Sleep",HoursPerDay=7},
    return tasks;
    public class Task
    public string TaskType { get; set; }
    public int HoursPerDay { get; set; }


  1. I’m ecstatic I discovered your website and blogs.
    Web Development

  2. I had been looking for a decent way to populate Google pie chart and this one seems to be the best one around.
    Thanks a lot for such a nice post.

  3. Excellant article !! Thanks finally managed to populate my charts from back end.

  4. Thanks Buddy excellent work

  5. Thanks buddy Excellent work ....

  6. Thanks a lot Santosh. I have used your solution and find it probably the easiest and hence best on the net.
    Just one request. I want to update the google chart using timer at set interval of time with new data.
    (using above method) How to implement that?
    (I am eagerly waiting for your response!)

  7. Great article, great example, you're a genius!

  8. this guy did a good job

  9. I was searching for a simplified solution. Must say EXCELLENT WORK!!!!!