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.
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
 |
(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 Email
|
|||
2 comments :
wow
how to select a slice in AJAX pie chart
Note: Only a member of this blog may post a comment.