AJAX Pie Chart

Shaili Dashora
10y
47.7k
0
5

Article

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

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:

Create a new Tab in the toolbox by right-clicking in the toolbox.
Provide the name of the Tab.
Now right-click inside the Tab and select "Choose Items".
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">

</head>

<body>

</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:

<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">

</head>

<body>

<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:

Click on PieChart Properties then select PieChartValues[Collection] -> set Properties -> click on the Add button- then click "OK".
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.
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>
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">

</head>

<body>

</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:

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

Open Microsoft SQL Server Management Studio then create a database by right-clickiing on "New Database...".
Provide a name for the database.
Now create a table by right-clicking on "New Table".
Create fields in the table as country with data-type varchar and population with data-type int
Now set values in the table fields. Click on "Edit Top 200 Rows".
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.

Up Next

Ebook Download

View all

Node Js and Angular CheatSheet

Read by 26 people

Download Now!

Learn

View all