12,749,201 members (37,206 online)
alternative version

#### Stats

271.9K views
100 bookmarked
Posted 27 Apr 2003

# 3D Pie Chart in ASP.NET

, 27 Apr 2003
 Rate this:
Discusses the implementation of a 3D pie chart in ASP.NET

## Introduction

I decided to document my little 3D pie chart demonstration and possibly submit it to CodeProject. I must note I have done very little with graphical programming.

It all started when I was contemplating the length of a rounded edge of a pie slice given the radius and the degree of the slice angle. I never did find the formula, but I figure you could take the circumference of the circle as a whole then divide it by eight pieces if the degree was 45 as in the chart above. Hold on, that is the answer!

Anyway, I then started to ask myself how you can programmatically draw a pie chart. That might give my some idea. I found a complex WebChart control off CodeProject by user blong. I also had some simple ASHX code from Jeff Prosise on MSDN, Aug. 2002.

The Graphics method FillPie can draw a pie slice given the mid point, the length and width of the ellipse, starting angle and sweep angle. The mid point is the graphical coordinates where the "device context" will put the middle of the ellipse. Think of it as 0, 0 in an x, y coordinate system where the degrees are as in Figure 2.

I created a VB.NET project to demo the FillPie method, a DrawPieChart example, and a Draw3DPieChart demonstration where this ASP.NET (ASPX page) demo came from. Unfortunately, I don’t have an IIS server accessible to the Internet, but the Windows application can be downloaded here.

The sweep angle is self explanatory, but it threw me off at first. If the start angle was 35 degrees and you wanted a pie slice to go to 90 digress, you would set the sweep to 55 not 90.

To draw the simple pie chart I just created a loop to start at 0 and go to 315 skipping every 45 degrees. Note: I randomly chose brush colors and I didn’t think that 360 being the same as 0 would be a problem until I did the 3D demo.

The 3D test came next. For pie slices less then 180 degrees required that I used a `System.Drawing.Drawing2D.HatchBrush` with the random color selected for the slice, and drew 10 slices dropping the y coordinate on each FillPie method call to give the illusion of depth.

To draw the displaced pie slice was an added challenge. I forget what the code did without the displaced slice, but to draw the chart in Figure 1, I noted that starting with the pie slice at 180 degrees and wrapping around (0 to 315, see code below), would draw the chart correctly. For simplicity sake, I "painstakingly" kept the degrees under 360.

There it is; pretty simple. I figure if it was not worth the time to design a better, reusable version of the project. What would be the best format? This ASPX as listed below? Use an ASHX file like Jeff’s? What about the legend, chart title? It would take more time and desire then my simple inquiry. Besides, you might as well use the WebChart control stated above. It’s already written!

Assuming I’d take the time to write a reusable chart, here are the steps I’d use for the algorithm. Sort the array or list of elements (test scores, votes. etc.) from greatest number to the smallest. In this demo all degree angles for the slices are 45.

To determine angle degrees per slice I would sum up the elements, take the value of an element divide it by the sum, and then multiply it by 360. Take the simple arbitrary sample data of .NET platform users:

1. J# Users : 5%
2. C# Users : 80%
3. VB.NET Users : 15%

Sorting would result in {80, 15, 5} and starting at 180 degrees, loop through the list. The "C# Users" slice would sweep (80/100*360) or 288 degrees; "VB.NET Users", 54 degrees; and the displaced "J# Users" slice, 18 degrees.

In my demo, I just randomly select colors using RGB values. Known solid colors would make it more desirable to the eye. Another pleasing feature was this:

`objGraphics.SmoothingMode = SmoothingMode.AntiAlias;`

Compare this to the choppy images created without this line of code. I think that’s it. Hope it is worth something to someone. Maybe this documentation is just for my own purposes when I look at the code years from now.

The chart wouldn’t print straight from Internet Explorer. I wonder if that was because I wasn’t referring (href) the page from an HTML image tag - which did print.

`<%@ Import Namespace="System.Drawing"%>`

A list of licenses authors might use can be found here

## Share

 Software Developer United States
I enjoy messing with application development and some Web development technologies. Right now I work in Virginia as a contractor to the government.

I am a Microsoft Cert. Professional and I got my 4 year BS degree.

See web site for resume and other code samples.

## You may also be interested in...

 First Prev Next
 Can we show percentage on top of each slice ? Pankaj Garg14-Feb-14 11:16 Pankaj Garg 14-Feb-14 11:16
 How to See Chart ?? Ozgur KOC29-Dec-07 5:17 Ozgur KOC 29-Dec-07 5:17
 Re: How to See Chart ?? Rajib Ahmed3-Mar-08 6:09 Rajib Ahmed 3-Mar-08 6:09
 How to link it to the Database Sijo Mathew11-Oct-07 2:45 Sijo Mathew 11-Oct-07 2:45
 Broken link yet again darksander19-Sep-07 5:14 darksander 19-Sep-07 5:14
 Formula you were searching for Anthony Potts26-May-06 7:01 Anthony Potts 26-May-06 7:01
 Typo paulanthony13-Feb-06 23:07 paulanthony 13-Feb-06 23:07
 3D Pie Edit Version with subtitle hockey223-May-05 23:00 hockey2 23-May-05 23:00
 Re: 3D Pie Edit Version with subtitle Belkira3-May-06 0:27 Belkira 3-May-06 0:27
 Quality? Nir Levy20-Dec-04 4:08 Nir Levy 20-Dec-04 4:08
 Re: Quality? shahab farooqui15-Oct-05 18:04 shahab farooqui 15-Oct-05 18:04
 How to add labels to this pie chart sectors sriamjunk31-Oct-04 23:54 sriamjunk 31-Oct-04 23:54
 How To Put Label Behind Per Pie Slices bambooElbimbo9-Jul-04 16:02 bambooElbimbo 9-Jul-04 16:02
 How To Put Label Behind Per Pie Slices bambooElbimbo9-Jul-04 15:50 bambooElbimbo 9-Jul-04 15:50
 3D Pie Chart in ASP.NET Anonymous25-May-04 3:31 Anonymous 25-May-04 3:31
 Bug? Not your code MrEyes2-Dec-03 6:59 MrEyes 2-Dec-03 6:59
 question newmem2-Oct-03 12:04 newmem 2-Oct-03 12:04
 Truncated image display? msisson15-Sep-03 7:44 msisson 15-Sep-03 7:44
 Broken link Anonymous18-Aug-03 12:36 Anonymous 18-Aug-03 12:36
 Is there any way to add image to a listbox? dathq8-Aug-03 15:49 dathq 8-Aug-03 15:49
 Re: Is there any way to add image to a listbox? seewood29-Feb-04 20:43 seewood 29-Feb-04 20:43
 Re: Is there any way to add image to a listbox? MJDamron13-Jan-06 6:22 MJDamron 13-Jan-06 6:22
 Code Typo: oibjBrush ronemtz7-May-03 5:48 ronemtz 7-May-03 5:48
 Notice MJDamron2-May-03 5:59 MJDamron 2-May-03 5:59
 Re: Notice PVK8-May-03 10:48 PVK 8-May-03 10:48
 Re: Notice MJDamron10-May-03 15:35 MJDamron 10-May-03 15:35
 Re: Notice PVK12-May-03 6:55 PVK 12-May-03 6:55
 Re: Notice Nicejith26-Sep-07 0:47 Nicejith 26-Sep-07 0:47
 Last Visit: 31-Dec-99 19:00     Last Update: 20-Feb-17 7:30 Refresh 1