In this article I’m
going to explain how to create dynamic Ajax pie chart in ASP.NET using C#.
Ajax Control toolkit provides a ways to
create Pie Chart that would be display the statistics data in graphical
representation. The PieChart control enables you to render a pie chart from one
or more PieChartValues. I already wrote some articles related to Chart
How to create dynamic Google Chart in ASP.NET using C#
How to create dynamic Ajax Bar Chart in ASP.NET using C#
How to create dynamic Ajax Area Chart in ASP.NET using C#
Here I’ll show you how to create
dynamic Ajax Pie Chart, in this demo I’ve used Northwind
database to populate dynamic pie chart
Here
you can download Northwind database
http://northwinddatabase.codeplex.com/releases/view/71634
Here I’ll explain some properties of Ajax
PieChart
Sample
code:
<ajaxToolkit:PieChart ID="pieChart1"
runat="server"
ChartHeight="300"
ChartWidth="450"
ChartTitle="sample Chart title"
ChartTitleColor="#0E426C">
PieChart Properties:
ChartHeight - This property enables you to customize the height
of the chart.
ChartWidth - This property enables you to customize the width
of the chart.
ChartTitle - This property enables you to set the title of the
chart.
ChartTitleColor - This property enables you to set the font color
of the chart title.
PieChartValue Properties:
Category - This property is required and provides name for a
particular PieChartValue.
Data - This property is required and provides Data for a
particular PieChartValue.
PieChartValueColor - This property enables you to set the color of
segment for a particular PieChartValue.
PieChartValueStrokeColor - This property enables you to set the stroke color
of segment for a particular PieChartValue.
Designer
source code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ 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>Ajax Pie Chart</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:PieChart ID="PieChart1" runat="server" ChartHeight="300" ChartWidth="300" ChartTitleColor="#0E426C">
</asp:PieChart>
</div>
</form>
</body>
</html>
Code
behind:
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;
public partial class _Default : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
BindChart();
}
}
protected
void BindChart()
{
SqlConnection conn = new SqlConnection("Data
Source=SPIDER;Initial Catalog=Northwind;Integrated Security=True");
DataSet ds = new DataSet();
DataTable dt = new DataTable();
conn.Open();
string cmdstr = "select top 6
Country, COUNT(CompanyName) [Total Suppliers] from [Suppliers] group by
Country";
SqlCommand cmd = new SqlCommand(cmdstr, conn);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
dt = ds.Tables[0];
foreach (DataRow row in dt.Rows)
{
PieChart1.PieChartValues.Add(new
AjaxControlToolkit.PieChartValue
{
Category = row["Country"].ToString(),
Data = Convert.ToDecimal(row["Total
Suppliers"])
});
}
}
}