Pie Chart Exploded Slices

There are times when you need to show data in Pie chart and sometimes you want to have one slice separated from rest of the disc (know as exploded Pie Chart).

Today we will look in representing whole pie in exploded form but if you like you can have just slice or two in exploded form.

Now, in order to get started let's setup chart control markup :

<asp:Chart ID="Chart1" runat="server" Height="340px"

Palette="SemiTransparent" Width="528px">

<Series>

<asp:Series ChartType="Pie"

CustomProperties="PieLineColor=BlanchedAlmond, PieDrawingStyle=SoftEdge"

Legend="Legend1" Name="Series1">

</asp:Series>

</Series>

<ChartAreas>

<asp:ChartArea Name="ChartArea1">

<Area3DStyle Enable3D="True" />

</asp:ChartArea>

</ChartAreas>

<Legends>

<asp:Legend Alignment="Far" Docking="Top" Name="Legend1">

</asp:Legend>

</Legends>

<BorderSkin BackColor="BurlyWood" BackGradientStyle="HorizontalCenter"

BackSecondaryColor="Blue" SkinStyle="Emboss" />

</asp:Chart>

 

Then load sample data in the chart control in Page_Load event:

     Dictionary<string, int> chartData = new Dictionary<string, int>();

chartData.Add("FireFox",25);

chartData.Add("IE", 42);

chartData.Add("Safari", 10);

chartData.Add("Chrome", 23);

Chart1.Series[0].Points.DataBindXY(chartData.Keys, chartData.Values);

     Chart1.Series[0].Label="#VALX (#PERCENT{P0})";

 

Till here you should have your plain pie chart ready to view.

Now let's add some code to this so we can count total number of points (slices) in the chart and then using for loop we will separate each slice from the chart

    int chartPoints = 0;

 

    chartPoints = Chart1.Series[0].Points.Count;

for (int i = 0; i < chartPoints; i++)

{

Chart1.Series[0].Points[i].CustomProperties += "Exploded=true";

}

 

So here we have created a integer to hold our count and then by using for loop we are adding Exploded=True in custom property of point collection inside our default series.

So after making all changes code will look like this:

     int chartPoints = 0;

Dictionary<string, int> chartData = new Dictionary<string, int>();

chartData.Add("FireFox",25);

chartData.Add("IE", 42);

chartData.Add("Safari", 10);

chartData.Add("Chrome", 23);

Chart1.Series[0].Points.DataBindXY(chartData.Keys, chartData.Values);

 

 

chartPoints = Chart1.Series[0].Points.Count;

for (int i = 0; i < chartPoints; i++)

{

Chart1.Series[0].Points[i].CustomProperties += "Exploded=true";

}

 

let's browse and see what we got:

Tags: , ,

ASP.NET | MS Chart