Post
Ask Question

AJAX Pie Chart

Introduction

This article describes pie charts. In this article you will see what a pie chart is and how to make a pie chart using AJAX tools. In this article you will see 2 examples, the first example creates a pie chart by using static value and second to create pie chart using dynamically stored value from the database.

Pie Chart

A pie chart is a circular chart divided into sectors representing numerical proportions. In a pie chart, the arc length of each sector is proportional to the quantity it represents, it looks like a pie that has been sliced, there are variations on the way it can be presented.

How pie chart looks

AJAX Pie Chart

Charts you can make using Ajax

As I said above, I am creating pie charts using the AJAX toolkit so you can also create the following charts using AJAX:

  • Line Charts
  • Bubble Charts
  • Area Charts
  • Pie Charts
  • Bar Charts

Before proceding further let's look at the procedure for adding the ajax toolkit to the Visual Studio toolbox.

Step 1. First of you need to download the AjaxToolKit from the AjaxToolkit official website.

Step 2. Now in the next step open Visual Studio.

Step 3. Now create a New Project and add the downloaded AjaxToolkit into the toolbox as in the following:

  1. Create a new Tab in the toolbox by right-clicking in the toolbox.


     
  2. Provide the name of the Tab.
  3. Now right-click inside the Tab and select "Choose Items".


     
  4. Now one window will open, click on "Browse" and go to where the AjaxToolKit is available and add the "AjaxControlToolkit.dll" file, then click on the "OK" button.

Step-by-step creation of a pie chart using AJAX

Step 1. Open Visual Studio 2010.

Step 2. Then click on "File" > "New" > "Project" ( or press "Ctrl +Shift + N").

Step 3. Then select Empty Project, provide the name of the project and click on OK.

Step 4. Now right-click on the project in Solution Explorer then click on "Add New Item".

Step 5. Add a Web Form and provide a name for the Web Form, for example "webform3. aspx".

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="Art.WebForm3" %>    
<!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 6. Now in Visual Studio just drag and drop the " Pie Chart" and from the toolbox inside the Form tag add the following code:

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

Step 7. 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 8. Now provide some properties for the pie chart.

  • Properties of the Pie Chart: The following are the basic properties of the pie chart.
  • ChartHeight: This property customizes the height of the chart.
  • ChartWidth: This property customizes the width of the chart.
  • ChartTitle: This property sets the title of the chart.
  • ChartTitleColor: This property sets the font color of the chart title.
  • BorderColor: This property sets the Border color of the chart.
  • BorderStyle: This property sets the Border Style of the chart title.
  • BackColor: This property sets the Background color of the chart title.

I am also providing some of the properties of the pie chart as you can see in the following code:

<%@  Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.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 style="width: 337px; height: 379px;">
        <asp:piechart id="PieChart1" runat="server" backcolor="#993333" bordercolor="#660033"
            borderstyle="Solid" forecolor="White" height="349px" width="330px" charttitle="Country Population"
            charttitlecolor="Blue">  
       </asp:piechart>
    </div>
    <asp:scriptmanager id="ScriptManager1" runat="server">  
    </asp:scriptmanager>
    </form>
</body>
</html> 

Step 9. Now to provide a static value you need to use the property of the pie chart called PieChartValues[Collection]. To use this property you have to:

  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

    AJAX Pie Chart

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. 

AJAX Pie Chart


Similar Articles