Aspdotnet-Suresh

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

Ajax Pie Chart Example in Asp.net

Jun 8, 2014
Introduction:

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

Description:

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 asp.net. Now I explain how to implement Ajax pie chart example in asp.net.

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="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Pie Chart Example</title>
</head>
<body>
<form id="form1" runat="server">
<div style="width:40%">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:PieChart ID="pieChart1" runat="server" ChartHeight="300"
ChartWidth="450" ChartTitle="Population % in India"
ChartTitleColor="#0E426C">
<PieChartValues>
<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" />
</PieChartValues>
</ajaxToolkit:PieChart >
</div>
</form>
</body>
</html>

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.

Demo


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 Asp.net, C#.net, 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

2 comments :

Anonymous said...

wow

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 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.