How to create high quality (resolution) pie chart using ASP.NET and C#

Using ASP.NET’s Drawing namespace we can easily create high quality charts and graphs without using any 3rd party components.

To demonstrate and for the purpose of this article we will be working with Bitmap and Graphics class. You can think of Bitmap as the drawing board and Graphics as the toolbox to draw anything out of your imagination. Both these classes are available in ASP.NET under System.Image and System.Image.Drawing namespace and are used for creating and manipulating images on the fly.

Don’t forget to include these namespaces -

using System.Image

using System.Image.Drawing

To create the drawing board, we just need to instantiate an object of Bitmap class like following -

Bitmap objBitmap = new Bitmap(width, height);

You can change the width and height of the bitmap by passing in width and height as parameters.

Now we will create an Arraylist of colors that we will use to define different pieces of the pie chart. I am using the following for the purpose of this article but you can use a for loop to create random colors if you want.

System.Collections.ArrayList colors = new System.Collections.ArrayList();

colors.Add(new SolidBrush(Color.FromArgb(255, 235, 149)));

colors.Add(new SolidBrush(Color.FromArgb(232, 110, 52)));

colors.Add(new SolidBrush(Color.FromArgb(240, 179, 16)));

colors.Add(new SolidBrush(Color.FromArgb(186, 208, 236)));

Now that we have a canvas, we need to create an instance of the Graphics class, create the paintbrush, and specify a canvas to use. We can accomplish this using the static Graphics method FromImage, which takes an Image instance as a single parameter and returns a resulting Graphics instance. We can pass in the instance of the Bitmap class, since it is derived from the Image class.

Graphics objGraphics = Graphics.FromImage(objBitmap);

Now comes the most important part, this part of code will define the look of the pie chart. Here are a set of properties that we need to set to obtain a better resolution to get the resolution just like any other third party components.

objGraphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;

objGraphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;

objGraphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;

objGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;

You can follow this link for more information on Graphics class and the properties used above - http://msdn.microsoft.com/en-us/library/system.drawing.graphics(VS.80).aspx

Now we will run our for loop to create the slices of the pie chart and slices will add up to create the full pie chart.

for (iLoop = 0; iLoop < ds.Tables[0].Rows.Count - 1; iLoop++)

{

//create the slice with values coming from the database and total is the aggregate of total amount of data or total slices of pie

objGraphics.FillPie((SolidBrush)colors[iLoop], pieRect, currentDegree,

Convert.ToSingle(ds.Tables[0].Rows[iLoop][dataColumnName]) / total * 360);

//here datacolumnname is the value of a single slice of pie coming from the database

// increment the currentDegree

currentDegree +=

Convert.ToSingle(ds.Tables[0].Rows[iLoop][dataColumnName]) / total * 360;

}

NOTE: You can refer to these articles for Advanced Shading Effects using ASP.NET and C#.

http://www.codeproject.com/KB/cs/ColorShading.aspx

http://www.codeproject.com/KB/GDI-plus/drawing3dgdi.aspx

Now the only other thing that we need to do is to save the image as the highest quality. Also, you can copy the following code to your aspx page that will return the image as a page

response stream. e.g. if you named this page as return_image.aspx then you can use this image anywhere using this line of HTML code -

<img src=”return_image.aspx” alt=”" border=”0″ />

and your image will be rendered here.

Following is the code for generating highest quality pie chart image and return as a response stream to the browser.

using (System.Drawing.Image img = LoadImage()) //LoadImage() will return the image that we

have created in the steps above.

{

ImageCodecInfo myImageCodecInfo;

Encoder myEncoder;

EncoderParameter myEncoderParameter;

EncoderParameters myEncoderParameters;

myImageCodecInfo = GetEncoderInfo(”image/jpeg”);

myEncoder = Encoder.Quality;

myEncoderParameters = new EncoderParameters(1);

myEncoderParameter = new EncoderParameter(myEncoder, 100L); //You can use 100L to increase or decrease the quality of the image.

myEncoderParameters.Param[0] = myEncoderParameter;

Response.ContentType = “image/gif”;

img.Save(Response.OutputStream, myImageCodecInfo, myEncoderParameters);

}

private static ImageCodecInfo GetEncoderInfo(String mimeType)

{

int j;

ImageCodecInfo[] encoders;

encoders = ImageCodecInfo.GetImageEncoders();

for (j = 0; j < encoders.Length; ++j)

{

if (encoders[j].MimeType == mimeType)

return encoders[j];

}

return null;

}