aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Create Dynamic Ajax Pie Chart in with Database Example

Jun 8, 2014

Here I will explain how to create dynamic
Ajax pie chart in with database using c#, or create pie chart in with database example in  c#,


In previous articles I explained Ajax collapsible panel example in,
Ajax auto complete textbox, Ajax country state city dropdown, Ajax calendar control example with custom date format, Ajax rating control example with database and many articles related to Ajax and Now I explain how to create dynamic Ajax pie chart in with database using c#,

First design table one table countrydetails in your database like as shown below

Column Name
Data Type
Allow Nulls
Int(set identity property=true)
Once we create table we need to enter some dummy data for our application purpose.

To implement Ajax pie chart with database first we need to add AjaxControlToolkit to your bin folder and design your aspx page like this

<%@ Register TagPrefix="ajaxToolkit" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>
<html xmlns="">
<head runat="server">
<title>Pie Chart Example with Database in</title>
<form id="form1" runat="server">
<div style="width:40%">
<ajaxToolkit:ToolkitScriptManager ID="scriptmanager1" runat="server" />
<ajaxToolkit:PieChart ID="countrychart" runat="server" ChartHeight="300"
ChartWidth="450" ChartTitle="World wide Data usage %" ChartTitleColor="#0E426C">
C# Code

In code behind add the following namespaces

using System;
using System.Data;
using System.Data.SqlClient;
After adding namespaces and write the following code in page load

protected void Page_Load(object sender, EventArgs e)
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))
SqlCommand cmd = new SqlCommand("select name,total=value from countrydetails order by total desc", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
foreach(DataRow dr in dt.Rows)
countrychart.PieChartValues.Add(new AjaxControlToolkit.PieChartValue
Category = dr["name"].ToString(),
Data = Convert.ToDecimal(dr["total"]),

Imports System.Data
Imports System.Data.SqlClient
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Dim dt As New DataTable()
Using con As New SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")
Dim cmd As New SqlCommand("select name,total=value from countrydetails order by total desc", con)
Dim da As New SqlDataAdapter(cmd)
End Using
For Each dr As DataRow In dt.Rows
countrychart.PieChartValues.Add(New AjaxControlToolkit.PieChartValue() With { _
.Category = dr("name").ToString(), _
.Data = Convert.ToDecimal(dr("total")) _
End Sub
End Class

Download Sample Code Attached

(Note: To get piechart in ajax control toolkit you need to download .NET 4.0 version ajax control toolkit dll)

If you want to how to install ajax control toolkit check this link install ajaxcontroltoolkit in visual studio

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Unknown said...

Very nice tutorial on Ajax Pie Chart.. i was looking for this example on internet..Thank you Suresh..:)

pabitra@microsoftresearch said...

Thanks Sir But Whats the code to change the color of each percentage

pabitra@microsoftresearch said...

How to Change The Color of the each slice of the Pie chart...
Pabitra Behera,Bhubaneswar

Hiral Patel said...

Chart shape is not running perfectly what to do ??

Unknown said...

say about any link in which difine mvc

Unknown said... showing element element piechart is not known element

Unknown said...

Hello Friends ...Please tell how to change the colour of the chart..

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.