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.