Gauge Architecture

Gauge Classes

The hierarchy of gauge classes is as follows:

Gauge: Abstract base class.
- RadialGauge: Displays values along a circular scale.
- LinearGauge: Displays values along a linear scale.
  - BulletGraph: Displays actual and target values along a linear scale.

The root Gauge class provides basic elements shares by all Gauge classes:

An SVG-based control template with customizable parts.
A common set of properties, events and methods including "min", "max", "value", and "ranges".

Gauge Ranges

C1 MVC gauges are composed of Range objects. Every gauge has at least two ranges: the "face" and the "pointer":

face: Represents the gauge background. The "min" and "max" properties of the face range correspond to the "min" and "max" properties of the gauge, and limit the values that the gauge can display.
pointer: Indicates the gauge's current value. The "max" property of the pointer range corresponds to the "value" property of the gauge.

In addition to these two special ranges, gauges may have any number of additional ranges added to their "ranges" collection.

ArchitectureController.cs
Architecture.cshtml

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

<h1>
    @Html.Raw(Resources.C1Gauge.Architecture_Title)
</h1>
 
<h3>
    Gauge Classes
</h3>
<p>
    @Html.Raw(Resources.C1Gauge.Architecture_Text1)
</p>
<ul>
  <li>
    @Html.Raw(Resources.C1Gauge.Architecture_Text2)
    <ul>
      <li>
        @Html.Raw(Resources.C1Gauge.Architecture_Text3)
      </li>
      <li>
        @Html.Raw(Resources.C1Gauge.Architecture_Text4)
        <ul>
          <li>
            @Html.Raw(Resources.C1Gauge.Architecture_Text5)
          </li>
        </ul>
      </li>
        </ul>
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1Gauge.Architecture_Text6)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Gauge.Architecture_Text7)
    </li>
    <li>
        @Html.Raw(Resources.C1Gauge.Architecture_Text8)
    </li>
</ul>
 
<h3>
    @Html.Raw(Resources.C1Gauge.Architecture_Title1)
</h3>
<p>
    @Html.Raw(Resources.C1Gauge.Architecture_Text9)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Gauge.Architecture_Text10)
    </li>
    <li>
        @Html.Raw(Resources.C1Gauge.Architecture_Text11)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1Gauge.Architecture_Text12)
</p>