C1 MVC Gauges

Gauges are used to display single values. They are often used in dashboards, and use segmenting and color coding to present values in a clear and easy to read way.

C1 MVC gauges are streamlined. They were designed to be easy to use and to read, especially on small-screen devices.

C1 MVC gauges can also be used as input controls. If you set their "isReadOnly" property to false, users will be able to change the value using the mouse, keyboard, or touch.

C1 MVC includes three types of gauge: RadialGauge, LinearGauge, and BulletGraph.

Radial Gauges

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/Index.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: Index
        public ActionResult Index()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Gauge.Index_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.Index_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.Index_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.Index_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.Index_Text4)
</p>

<h3>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Title1)
</h3>
<p>
    @Html.Raw(Resources.C1Gauge.Index_Text5)
</p>
@(Html.C1().RadialGauge().Id("theRadialGauge")
    .Min(0).Max(100).Value(75).Step(10)
    .IsReadOnly(false)
)
<h3>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Title2)
</h3>
<p>
    @Html.Raw(Resources.C1Gauge.Index_Text6)
</p>
@(Html.C1().LinearGauge().Id("theLinearGauge")
    .Min(0).Max(100).Value(75).Step(10)
    .ShowText(ShowText.MinMax)
    .IsReadOnly(false)
)
<h3>
    @Html.Raw(Resources.C1Gauge.GaugeTypes_Title3)
</h3>
<p>
    @Html.Raw(Resources.C1Gauge.Index_Text7)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.Index_Text8)
</p>
@(Html.C1().BulletGraph().Id("theBulletGraph")
    .Min(0).Max(100).Value(75)
    .Target(60).Bad(50).Good(70)
    .ShowText(ShowText.MinMax)
)