ProgressCircle
The ProgressCircle component is entirely implemented on the server side as a derived class of Wisej.Web.Canvas. It draws on a HTML5 canvas element on the client directly from the server in real time. The component lets you set value, line style and thickness, fill color, font, etc.
Code Example
ProgressCircle progressCircle1 = new ProgressCircle();
progressCircle1.Value = 60;
progressCircle1.LineCap = CanvasLineCap.Round;
progressCircle1.LineWidth = 10;
progressCircle1.ForeColor = System.Drawing.Color.Blue;
progressCircle1.BackColor = System.Drawing.Color.Green;
progressCircle1.FillCircle = true;
this.Controls.Add(progressCircle1);
This code snippet will produce a ProgressCircle that looks like the one below. Value is an integer between 1 and 100 and it is how far the circle is filled going around. Value also appears as a number in the middle (Note this can be toggled with ShowValue). LineCap is set to Round which is why the ends of the blue line are round. LineWidth controls the thickness of the line and is set to 10. ForeColor is set to Blue, which is why the circle is blue as well as the 60% value in the middle. BackColor is set to green. Just setting BackColor to green does not do anything- you also need FillCircle to be true. BackColor controls the color that the circle will be filled with.
How to Use
The ProgressCircle extension can be added to a Wisej.NET project using NuGet Package Manager.
Set the style of your ProgressCircle in LineCap and the width in LineWidth.
Furthermore decide with FillCircle if the circle is filled with the background color and ShowValue whether text is displayed in the middle of the circle.