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

Ajax Pie Chart Example in

Jun 8, 2014

Here I will explain how to implement Ajax pie chart example in or using pie chart control in Ajax control toolkit with example in


In previous articles I explained
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 implement Ajax pie chart example in

To implement Ajax pie chart 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>Ajax Pie Chart Example</title>
<form id="form1" runat="server">
<div style="width:40%">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server">
<ajaxToolkit:PieChart ID="pieChart1" runat="server" ChartHeight="300"
ChartWidth="450" ChartTitle="Population % in India"
<ajaxToolkit:PieChartValue Category="Andhra Pradesh" Data="15" PieChartValueColor="#00ADEE" PieChartValueStrokeColor="black" />
<ajaxToolkit:PieChartValue Category="Tamilnadu" Data="25" PieChartValueColor="#FFC10D" PieChartValueStrokeColor="black" />
<ajaxToolkit:PieChartValue Category="Maharashtra" Data="30" PieChartValueColor="#F16321" PieChartValueStrokeColor="black" />
<ajaxToolkit:PieChartValue Category="Kerala" Data="10" PieChartValueColor="#8BC53E" PieChartValueStrokeColor="black" />
<ajaxToolkit:PieChartValue Category="Uttar Pradesh" Data="30" PieChartValueColor="#896C9E" PieChartValueStrokeColor="black" />
</ajaxToolkit:PieChart >

If you observe above code for ajax pie chart we declared different properties those are

PieChart Properties

ChartHeight – By using this property we can increase or decrease height of charts.

ChartWidth – By using this property we can increase or decrease width of charts.

ChartTitle – This property allow us to set title of the chart.

ChartTitleColor – By using this property we can set font color of chart title.

PieChart value properties

Category – By using this property we can set name for particular PieChartValue.

Data – By using this property we can set data value for a particular PieChartValue.

PieChartValueColor – This property allow us to set color of segment for a particular PieChartValue..

PieChartValueStrokeColor – By using this property we can set the stroke color of segment for a particular PieChartValue.


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


Anonymous said...


Anonymous said...

how to select a slice in AJAX pie 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.