How to used google chart in asp.net[google chart]

In this post,I will show you how to display google chart in asp.net.Before 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery Google Chart Demo</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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);
                data.addRow(row);
            }
    var options = {
                title: 'My Daily Activities'
            };
            chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
    <script type="text/javascript">
        $(document).ready(drawChart);
      
    </script>
</head>
<body>
    <form id="dform" runat="server">
    <div id="chart_div" style="width: 900px; height: 500px;">
    </div>
    <asp:HiddenField ID="hdData" runat="server" />
    </form>
</body>
</html>

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; }
    }
}

10 comments:

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

    ReplyDelete
  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.

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

    ReplyDelete
  4. Thanks Buddy excellent work

    ReplyDelete
  5. Thanks buddy Excellent work ....

    ReplyDelete
  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?
    Thanks.
    (I am eagerly waiting for your response!)
    Zeni

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

    ReplyDelete
  8. this guy did a good job
    http://www.gchart.net/

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

    ReplyDelete