Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

DZone's Guide to

# Generating Radial Indicator Images Using C#

·
Free Resource

Comment (0)

Save
{{ articles[0].views | formatCount}} Views

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.

Topics:

Comment (0)

Save
{{ articles[0].views | formatCount}} Views

Published at DZone with permission of Gunnar Peipman, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

# {{ parent.title || parent.header.title}}

### {{ parent.tldr }}

{{ parent.urlSource.name }}