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:
No comments:
Post a Comment