Exploded Pie Chart Tutorial ASP.NET 4.0
 
This tutorial will show you how to create an exploded Pie Chart and how to control
its elements through C# Code Behind. 

For a More Basic Overview of 3D Charts in ASP.NET 4.0 go Here
For a More Basic Overview of Basic Charts in ASP.NET 4.0 go Here
 
Overview
 
1.	Create The Chart and Setup The Datapoints

2.	Add Button Controls to our form

3.	Write the button Controls’ Code



We are using Server Intellect and have found that by far, they are the most friendly,
responsive, and knowledgeable support team we've ever dealt with!
 
Create the Chart and Setup the Datapoints
 
1.	Start by Creating an Empty ASP.NET Web Application

2.	Add a Web Form Named Default.aspx

3.	Now Add a Reference to System.Web.DataVisualization like we did in a previous example

4.	Add a Pie Chart to the Form in Design View mine is named Chart2

5.	Go into the Code View and Paste this code into your ChartAreas code

 
  
 
    
 
	<Series>
        <asp:Series ChartType="Pie" Name="Series1">
        <Points>
        <asp:DataPoint XValue="1" YValues="10" />
        <asp:DataPoint XValue="2" YValues="25" />
        <asp:DataPoint XValue="3" YValues="35" />
        <asp:DataPoint XValue="4" YValues="15" />
        <asp:DataPoint XValue="5" YValues="13" />
        </Points>
        </asp:Series>
    </Series>
    
 
  
 



 
Add Button Controls to your Form
 
1.	Go Back to the Design View and Drag 5 Button Controls from the Toolbar onto the Form

2.	Name the buttons btn1, btn2, btn3, btn4, and btn5 and have their Text Property be set to 1,2,3,4,5 respectively
	*Note I also made my Chart 3D but it is not a required step*

	
	
3.	This is what it should look like when you have completed adding and editing the buttons


We chose Server Intellect for its dedicated servers,for our web hosting.
They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

Add the Button Controls’ Code
1.	While still in the Design view double click on all of the buttons to open up each buttons code space

	
	
2.	At the top of the Project add this namespace:
 
  
 
    
 
	
	using System.Web.UI.DataVisualization.Charting;
	
    
 
  
 


3.	Once you have done all 5 buttons and the reference call go into the Code View and Paste this Code into each 
	Button_Click event Call in order.  This code will change the “Exploded” property of a piece of the chart to true
	which will make it act like it is selected.  When you click on a different button it will issue a postback
	to the website which will reset all of the variables to false making it so you can only have one selected at a time.
	
	
 
  
 
    
 
	
	Chart2.Series[0].Points[0].CustomProperties = "Exploded=true";
	Chart2.Series[0].Points[1].CustomProperties = "Exploded=true";
	Chart2.Series[0].Points[2].CustomProperties = "Exploded=true";
	Chart2.Series[0].Points[3].CustomProperties = "Exploded=true";
	Chart2.Series[0].Points[4].CustomProperties = "Exploded=true";
    
 
  
 

4.	This Code will change the item based on what you clicked to be exploded(popped out)


 Conclusion
 
This tutorial taught us how to create an Advanced 3D Pie Chart and how to create controls to use that Pie Chart.  
This is a good start on editing advanced Charts through code but there are many more properties that can be changed
and many more ways to do so.


Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several,
we went with Server Intellect and have been very happy. They are the most professional,
customer service friendly and technically knowledgeable host we've found so far.