<h1>
    Gauge Elements
</h1>
<p>
    Every C1 MVC gauge is composed of the following elements,
    defined in the control template:
</p>
<ul>
    <li>
        <b>Face</b>:
        The "face" is a range that represents the gauge background.
        The "min" and "max" properties of the face range correspond
        to the "min" and "max" properties of the gauge control, and
        limit the values that the gauge can display.
    </li>
    <li>
        <b>Pointer</b>:
        The "pointer" is a range that indicates the gauge's current
        value. The "max" property of the pointer range corresponds
        to the "value" property of the gauge.
    </li>
    <li>
        <b>Ranges</b>:
        In addition to the "face" and "pointer" ranges, gauges may
        contain additional ranges that show zones within the gauge
        (like 'bad', 'average', and 'good'). Depending on the setting
        of the 'showRanges' property, these additional ranges may be
        shown at all times or used to determine the color of the
        'pointer' based on the current gauge value.
    </li>
    <li>
        <b>Thumb</b>:
        The thumb is a circle shown at the end of the 'pointer' range.
        Use the 'thumbSize' property to set the size of the thumb
        element.
    </li>
    <li>
        <b>Tickmarks</b>:
        Tickmarks may be shown along the face to help users read the
        gauge. Their visibility and position are controlled by the
        'showTicks', 'tickSpacing', and 'step' properties.
    </li>
    <li>
        <b>Text Values</b>:
        Gauges may show the value of their 'min', 'max', and 'value'
        properties as text. Use the 'showText' property to determine
        which values should be displayed. Use the 'getText' property
        to customize the text displayed on the gauge.
    </li>
</ul>
<p>
    Move the mouse over the gauge to highlight each element:
</p>

@(Html.C1().RadialGauge().Id("radial")
    .Max(100).Value(50)
    .StartAngle(-30).SweepAngle(240)
    .IsReadOnly(false)
    .HasShadow(false)
    .ShowText(ShowText.All)
    .ShowRanges(true)
    .ShowTicks(true)
    .TickSpacing(10)
    .Ranges(r=>
    {
        r.Add().Min(0).Max(30).Thickness(0.5).Color(System.Drawing.Color.Red);
        r.Add().Min(30).Max(50).Thickness(0.5).Color(System.Drawing.Color.Orange);
        r.Add().Min(50).Max(70).Thickness(0.5).Color(System.Drawing.Color.Gold);
        r.Add().Min(70).Max(100).Thickness(0.5).Color(System.Drawing.Color.Green);
    })
    .Pointer(p=>p.Thickness(0.15))
    .ThumbSize(20)
)