AJAX Pie Chart

1. Click on PieChart Properties then select PieChartValues[Collection] -> set Properties -> click on the Add button- then click "OK".
   
   
   
2. Now in the next step provide the PieChartValue Properties
   • Category: This property provides the name for a specific PieChartValue.
   • Data: This property provides the data for a specific PieChartValue
   • PieChartValueColor: This property sets the color of the segment for a specific PieChartValue.
   • PieChartValueStrokeColor: This property sets the stroke color of a segment for a specific PieChartValue.
     
3. After providing the static values and properties of the value your aspx page code will become as follows:

   <%@ page language="C#" autoeventwireup="true" codebehind="WebForm3.aspx.cs" inherits="Art.WebForm3" %>
   <%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
   <!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 runat="server">
       <title></title>
   </head>
   <body>
       <form id="form1" runat="server">
       <div>
           <asp:piechart id="PieChart1" runat="server" backcolor="#993333" bordercolor="#660033"
               borderstyle="Solid" forecolor="White" height="349px" width="320px" charttitle="Country Population"
               charttitlecolor="Blue">
           <PieChartValues>
                         <asp:PieChartValue Category="India" Data="1000" PieChartValueColor="green" PieChartValueStrokeColor="white" />
                         <asp:PieChartValue Category="US" Data="3000" PieChartValueColor="blue" PieChartValueStrokeColor="black" />
                         <asp:PieChartValue Category="China" Data="6000" PieChartValueColor="pink"  PieChartValueStrokeColor="red" />
                         <asp:PieChartValue Category="Australia" Data="7000" PieChartValueColor="yellow" PieChartValueStrokeColor="blue" />
           </PieChartValues>
       </asp:piechart>
       </div>
       <asp:scriptmanager id="ScriptManager1" runat="server">
   </asp:scriptmanager>
       </form>
   </body>
   </html>

4. Output
   
   

Creation of Dynamic Pie Chart

Now as I said before I will tell you how to statically and dynamically create a Pie Chart so let's start the explanation of how to create a Pie Chart and fetch the data from DataBase Table and present the data in a graphical form.

Step 1. Right-click on the project in the Solution Explorer then click on "Add New Item".

Step 2. Add a Web Form and provide the name of the Web Form as "webform1. aspx".

After adding the webform1. aspx you will see the following code:

<@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Art.WebForm1" >
<!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 runat="server">
    <title></title>
</head>
   <body>
    <form id="form1" runat="server">
     </form>
   </body>
</html>

Step 3. Now in Visual Studio just drag and drop the Pie Chart and from the toolbox inside the form tag or use the following code:

<div style="width: 337px; height: 379px;">
<asp:PieChart>
</asp:PieChart>
</div>

Step 4. Now inside the form tag add a Toolkit Script Manager using the following code or just drag and drop the ScriptManager from the Toolbox.

<asp:ScriptManager ID="ScriptManager1" runat="server">      
</asp:ScriptManager> 

Step 5. As I told you, we are connecting it to a database so let's create the database and make a table. Fill in the fields of the table as in the following.

1. Open Microsoft SQL Server Management Studio then create a database by right-clickiing on "New Database...".
   
   
   
2. Provide a name for the database.
   
   
   
3. Now create a table by right-clicking on "New Table".
   
   
   
4. Create fields in the table as country with data-type varchar and population with data-type int
   
   
   
5. Now set values in the table fields. Click on "Edit Top 200 Rows".
   
   
   
6. The table population is created with the fields country and population.
   
   

Step 6. Now after creation of the database and table we return to Visual Studio 2010 and write the code for the creation of the pie chart and the retrival of values from the database in webform1.aspx.cs. The code will be as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
namespace Art
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        //for sqlserver authentication connection string-(server,databasename,Windows authentication)    
        {
            string connstr = "server=.\\SQLEXPRESS;database=Employee;integreted security=ture";
            //class System.Data.SqlClient.SqlConnection -Represent an open connection to a SQL Server database    
            //initializes instance of class SqlConnection    
            SqlConnection conn = new SqlConnection(connstr);
            //select query for fetch the data from database table population    
            string query = "select * from population";
            //class System.Data.SqlClient. SqlDataAdapter
            //Represent a set of data commands and a 
            //databse connection that are used to fill                
            // the System.Data.Dataset and update a sql server database
            //Initializes instance of class SqlDataAdapter
            SqlDataAdapter da = new SqlDataAdapter(query, conn);
            //Initializes instance of System.Data.Dataset class
            DataSet ds = new DataSet();
            //adds or refreshes rows in the System.Data.Dataset by Fill() Method
            da.Fill(ds);
            foreach (DataRow row in ds.Tables[0].Rows)
            {
                PieChart1.PieChartValues.Add(new AjaxControlToolkit.PieChartValue
                {
                    Category = row["country"].ToString(),
                    Data = Convert.ToDecimal(row["population"])
                });
            }
        }
    }
} 

Output

Now all the work has been done, just run the project and see the output.