Slicing Pie Chart on Legend click or Slice Click

Data distribution on pie chart is great but sometimes you want to make your slices stand out from group. With MS Chart Control this is very easy to achieve.

To get started, lets first setup some basic properties of chart control:

1) Set Palette to SemiTransparent

2) In Series, chart type to Pie

3) Custom Properties of Pie, to set Pie Drawing Style to Soft Edge

4) Enable Area 3D Style for 3D effect in chart (you can also set rest properties in this, for Demo purposes I am going to leave all defaults)

5) Add legend and set its docking and Alignment properties

After applying all the above <asp:Chart /> will look like this:

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

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

<Series>

<asp:Series ChartType="Pie"

CustomProperties="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>

 

For demo, let's add some static data (in real life this can come from any file, web service or database).

In Code behind file inside Page_Load, let's add a Dictionary collection with string as key and int as value:

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

chartData.Add("FireFox",25);

chartData.Add("IE", 42);

chartData.Add("Safari", 10);

chartData.Add("Chrome", 23);

 

Once sample data is ready, bind data to chart control and lets add some code to add interactivity to your pie chart:

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

Chart1.Series[0].PostBackValue = "#INDEX";

Chart1.Series[0].LegendPostBackValue = "#INDEX";

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

 

Chart control provide ability to add post back values to its slices:

Chart1.Series[0].PostBackValue = "#INDEX";

In above line of code, we are setting post back value to #INDEX which mean the index of the slice inside pie chart.

Chart1.Series[0].LegendPostBackValue = "#INDEX";

 

In Order to make Legend clickable we need to set series' legend post back value to #INDEX too

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

 

Label property represent label inside the pie represent name of the slice so in this case it's going to be anything that is Key of dictionary, then #PERCENT represent percentage contributed by that slice to form the pie chart and {P0} represent formatted string of percent type with decimal paced allowed 0.

Now in pie chart, lets add an event handler to handle click event of chart control: (you can do it either by double clicking on pie chart in design view or from markup):

<asp:Chart ID="Chart1" runat="server" onclick="Chart1_Click" 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>

 

Let's add following code to the code behind file:

protected void Chart1_Click(object sender, ImageMapEventArgs e)

{

int _clickedPoint = int.Parse(e.PostBackValue);

Series defaultSeries = Chart1.Series[0];

if (_clickedPoint>=0 && _clickedPoint<defaultSeries.Points.Count)

{

defaultSeries.Points[_clickedPoint].CustomProperties += "Exploded=true";

}

}

 

As you can see chart control represent Image Map to divide its series (slices in our case). So in event handler we will get Image map event arguments which can be utilized to detect which part of chart was clicked.

int _clickedPoint = int.Parse(e.PostBackValue);

 

Since you have assigned series post back values to index of slice then when you parse event args value into integer it gives you point that was clicked.

Series defaultSeries = Chart1.Series[0];

if (_clickedPoint>=0 && _clickedPoint<defaultSeries.Points.Count)

{

defaultSeries.Points[_clickedPoint].CustomProperties += "Exploded=true";

}

 

this code create a new object of Series class and assign its value to same as chart's series at index 0 (default series) then you can check if point that was returned by chart click event is between 0 and count of points available (slices) in the chart and if it's true just take that point index and set its Custom property to Exploded=true.

That's it now view it in the browser and click on the slice, you should see something like this(For better interactivity and stopping page flick add this chart control to Update panel and you have ajaxified interactive pie chart) :

 

 

 

 

Tags: ,

ASP.NET | MS Chart