Generating Radial Indicator Images Using C#
Join the DZone community and get the full member experience.
Join For FreeIn 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.
Published at DZone with permission of Gunnar Peipman, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Trending
-
Merge GraphQL Schemas Using Apollo Server and Koa
-
Develop Hands-Free Weather Alerts To Ensure Safe Backpacking
-
Unlocking the Power of AIOps: Enhancing DevOps With Intelligent Automation for Optimized IT Operations
-
CDNs: Speed Up Performance by Reducing Latency
Comments