A radial gauge displays a metric as a percentage of the length of a circular scale, like a pie or donut chart with a single slice. By default, the radial scale displays a 180-degree arc. You can change that by adjusting its start and sweep angles.

Linear Gauges

Linear gauges are characterized by a linear scale which can be horizontal or vertical.

Bullet Graphs

Bullet graphs are a variation on linear gauges that displays actual and target values. It may also show ranges that identify whether the actual or current value is good or bad.

Bullet graphs convey information in a compact space, making them ideal for dashboards that need to display groups of single-valued metrics such as the current year-to-date sales revenue.

// This file locates: "Content/css/Lesson/C1Gauge/GaugeTypes.css".
.wj-gauge {
    padding:4px;
    width: 80%;
    margin: 6px auto 36px auto;
}
.wj-radialgauge {
    height: 200px;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1GaugeController : Controller
    {
        // GET: GaugeTypes
        public ActionResult GaugeTypes()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Text1)
</p>
<h3>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Title1)
</h3>
<p>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Text2)
</p>
@Html.C1().RadialGauge().Id("theRadialGauge").Min(0).Max(100).Value(75)
<h3>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Title2)
</h3>
<p>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Text3)
</p>
@Html.C1().LinearGauge().Id("theLinearGauge").Min(0).Max(100).Value(75)
<h3>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Title3)
</h3>
<p>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Text4)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Text5)
</p>
@Html.C1().BulletGraph().Id("theBulletGraph").Min(0).Max(100).Value(75).Target(60).Bad(50).Good(70)