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.

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();
}

On 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.