How to create google pie chart with database data in ASP.NET
Pie chart is a very useful tools for represent our report page more attractive. In this tutorial I am going to explain, how to create Google Pie chart with database data in ASP.NET. Here I have fetched sql server database data using jquery to create google pie chart in

Google Pie Chart

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="GoogleChart.aspx.cs" Inherits="ASPGoogleChart.GoogleChart" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <%-- Here We need to write some js code for load google chart with database data --%>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript" src=""></script>

        var chartData; // globar variable for hold chart data
        google.load("visualization", "1", { packages: ["corechart"] });

        // Here We will fill chartData

        $(document).ready(function () {
                url: "GoogleChart.aspx/GetChartData",
                data: "",
                dataType: "json",
                type: "POST",
                contentType: "application/json; chartset=utf-8",
                success: function (data) {
                    chartData = data.d;
                error: function () {
                    alert("Error loading data! Please try again.");
            }).done(function () {
                // after complete loading data

        function drawChart() {
            var data = google.visualization.arrayToDataTable(chartData);

            var options = {
                title: "Company Revenue",
                pointSize: 5

            var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
            pieChart.draw(data, options);


<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div id="chart_div" style="width:500px;height:400px">
        <%-- Here Chart Will Load --%>

Posted By : Sourav Mondal