3D Pie Charts (in Web projects)

9 02 2010

I recently needed to create a 3D pie chart and save it to a file so I could use the image to save to a PDF. I found the following tutorial / code library (which you’ve probably found long before finding this) which is fantastic http://www.codeproject.com/KB/graphics/julijanpiechart.aspx

However this is created for Windows Forms, and I was using this class with a web project. In the comments, there is some code given by the author in order to be able to save the file. Perfect! Unfortunately not if you’re using it in a web project, as this code will only work in Windows forms.

So here is how I got around it…

I used the PieChart3D object, intended for printing, as this gave me the opportunity to create a Bitmap object and use it’s graphics properties to pass to the PieChart3D.Draw method. This in turn means that when you call the Draw method passing the Bitmap’s graphics properties, it will draw to the Bitmap object. The Bitmap object has a Save method that can be used to save the file either temporarily or permanently.

Here’s my code…

private void DrawPieChart(decimal[] values)
//Set the properties of the pie chart
PieChart3D pie = new PieChart3D(10, 10, 200, 100, values, 0.15F);
pie.Colors = new System.Drawing.Color[] { System.Drawing.Color.DarkSeaGreen, System.Drawing.Color.LemonChiffon, System.Drawing.Color.Orange };
pie.Texts = new string[] { String.Format("{0}%", values[0].ToString()), String.Format("{0}%", values[1].ToString()), String.Format("{0}%", values[2].ToString()) };
pie.SliceRelativeDisplacements = new float[] { 0,0,0 };
pie.InitialAngle = -30F;
pie.FitToBoundingRectangle = true;
pie.EdgeColorType = EdgeColorType.DarkerThanSurface;
pie.EdgeLineWidth = 1;
pie.ShadowStyle = ShadowStyle.GradualShadow;
//Save the pie chart to a bitmap
Rectangle bounds = new Rectangle((int)pie.X, (int)pie.Y, (int)pie.Width + 30, (int)pie.Height + 30);
Bitmap bitmap = new Bitmap(bounds.Width, bounds.Height);
Graphics grph = Graphics.FromImage(bitmap);
grph.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
grph.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
string tmpFilename = System.IO.Path.GetTempFileName();

So the second part of the code is what we’re concentrating on here. Firstly you create a bounding rectangle using the X & Y position and width and height of the pie chart. Using this rectangle, you can create a Bitmap that will be the correct size for your pie chart. You can then create Graphics from the Bitmap using the static Graphics method FromImage, passing in the Bitmap you have created. You then set the CompositingQuality and InterpolationMode (I don’t think this is absolutely necessary, however it is done in the original example, and I think it’s worth doing to get a high quality pie chart in your Bitmap). Using the Graphics you have just created from the Bitmap, you can now call the Draw method for the PieChart3D object, passing in these graphics (I also call place texts so it will show the percentages on each pie slice). For my use, I only needed a temporary file save (as I was then putting the file into a PDF and saving that). You could build a permanent file name if required instead of using GetTempFileName. Then you can call your Bitmap objects Save method and there you have it. Your pie chart, saved into a Bitmap from a Web Form project.