# Generating radial indicator images using C#

In one of my projects I needed to draw radial indicators for processes measured in percent. Simple images like the one shown on right. I solved the problem by creating images in C# and saving them on server hard disc so if image is once generated then it is returned from disc next time. I am not master of graphics or geometrics but here is the code I wrote.

### Drawing radial indicator

To get things done quick’n’easy way – later may some of younger developers be the one who may need to changes things – I divided my indicator drawing process to four steps shown below.

 1. Fill pie 2. Draw circles 3. Fill inner circle 4. Draw text

### Drawing image

Here is the code to draw indicators.

private static void SaveRadialIndicator(int percent, string filePath)

{

using (Bitmap bitmap = new Bitmap(100, 100))

using (Graphics objGraphics = Graphics.FromImage(bitmap))

{

// Initialize graphics

objGraphics.Clear(Color.White);

objGraphics.SmoothingMode = SmoothingMode.AntiAlias;

objGraphics.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;

// Fill pie

// Degrees are taken clockwise, 0 is parallel with x

// For sweep angle we must convert percent to degrees (90/25 = 18/5)

float startAngle = -90.0F;

float sweepAngle = (18.0F / 5) * percent;

Rectangle rectangle = new Rectangle(5, 5, 90, 90);

objGraphics.FillPie(Brushes.Orange, rectangle, startAngle, sweepAngle);

// Draw circles

rectangle = new Rectangle(5, 5, 90, 90);

objGraphics.DrawEllipse(Pens.LightGray, rectangle);

rectangle = new Rectangle(20, 20, 60, 60);

objGraphics.DrawEllipse(Pens.LightGray, rectangle);

// Fill inner circle with white

rectangle = new Rectangle(21, 21, 58, 58);

objGraphics.FillEllipse(Brushes.White, rectangle);

// Draw text on image

// Use rectangle for text and align text to center of rectangle

var font = new Font("Arial", 13, FontStyle.Bold);

StringFormat stringFormat = new StringFormat();

stringFormat.Alignment = StringAlignment.Center;

stringFormat.LineAlignment = StringAlignment.Center;

rectangle = new Rectangle(20, 40, 62, 20);

objGraphics.DrawString(percent + "%", font, Brushes.DarkGray, rectangle, stringFormat);

// Save indicator to file

objGraphics.Flush();

if (File.Exists(filePath))

File.Delete(filePath);

bitmap.Save(filePath, ImageFormat.Png);

}

}

### Using indicators on web page

To show indicators on your web page you can use the following code on page that outputs indicator images:

protected void Page_Load(object sender, EventArgs e)

{

var percentString = Request.QueryString["percent"];

var percent = 0;

if(!int.TryParse(percentString, out percent))

return;

if(percent < 0 || percent > 100)

return;

var file = Server.MapPath("~/images/percent/" + percent + ".png");

if(!File.Exists(file))

SaveImage(percent, file);

Response.Clear();

Response.ContentType = "image/png";

Response.WriteFile(file);

Response.End();

}

Om your pages where you need indicator you can set image source to Indicator.aspx (if you named your indicator handling file like this) and add percent as query string:

<img src="Indicator.aspx?percent=30" />

That’s it! If somebody knows simpler way how to generate indicators like this I am interested in your feedback.

• Really nice example!

But, wouldn't this feel more natural with SVG / Canvas :D, maybe Raphael.js and let the client side do all the "burden" ?

• Thanks for ideas, Alex. Client-side is also option but it needs more testing on mobile devices and mobile browsers as their support for JavaScript and CSS is varying.

• Thanks for the sharing the nice example here. It helps me a lot!!

• You can avoid the FillEllipse by use DrawArc instead of FillPie. Use a Pen with a suitable width for the arc and offset the rectangle as appropriate.

If you do this then you could make the rest transparent and overlay the arc+text over a separate dial image.

As an aside, depending on your resolution of percentages you could use a sprite approach and generate all versions of the image in one go and lay them out in a grid. Then use CSS positioning to "move" the 100x100 window. Static image, no round trip... just change the css class

Comments have been disabled for this content.