Ranges

C1 MVC gauges are composed of Range objects. Range objects have "min" and "max" properties the define the extent of the range, as well as "thickness" and "color" properties that define the appearance of the range.

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. These additional ranges can be used in two ways:

By default, extra ranges appear as part of the gauge background. This way you can show 'zones' within the gauge, like 'good', 'average', and 'bad' for example. If you set the gauge's "showRanges" property to false, the additional ranges are not shown. Instead, they are used to automatically set the color of the "pointer" based on the current gauge value:

showRanges

// This file locates: "Scripts/Lesson/C1Gauge/Ranges.js".
c1.documentReady(function () {
    var theRadialGauge = wijmo.Control.getControl('#theRadialGauge');
    var theLinearGauge = wijmo.Control.getControl('#theLinearGauge');
 
    theRadialGauge.valueChanged.addHandler(function (s, e) {
        theLinearGauge.value = s.value;
    });
 
    theLinearGauge.valueChanged.addHandler(function (s, e) {
        theRadialGauge.value = s.value;
    });
 
    document.getElementById('showRanges').addEventListener('click', function (e) {
        if (e.target.checked) {
            theRadialGauge.showRanges = theLinearGauge.showRanges = true;
            theRadialGauge.pointer.thickness = .2;
            theLinearGauge.pointer.thickness = .4;
        } else {
            theRadialGauge.showRanges = theLinearGauge.showRanges = false;
            theRadialGauge.pointer.thickness = 1;
            theLinearGauge.pointer.thickness = 1;
        }
    });
});

// This file locates: "Content/css/Lesson/C1Gauge/Ranges.css".
.wj-gauge {
    margin: 20px auto;
    width: 50%;
    max-width: 250px;
}

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

<h1>
    @Html.Raw(Resources.C1Gauge.Ranges_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.Ranges_Text1)
</p>
<p>
  @Html.Raw(Resources.C1Gauge.Ranges_Text2)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Gauge.Ranges_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1Gauge.Ranges_Text4)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1Gauge.Ranges_Text5)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.Ranges_Text6)
</p>
<div class="demo-settings">
    <label>@Html.Raw(Resources.C1Gauge.Ranges_Text7)</label>
    <input id="showRanges" type="checkbox" checked="checked">
</div>
 
@(Html.C1().RadialGauge().Id("theRadialGauge")
    .Min(0).Max(100).Value(75).Step(10)
    .IsReadOnly(false)
    .ShowRanges(true)
    .Ranges(r=>
    {
        r.Add().Name("low").Min(0).Max(25).Color(System.Drawing.Color.FromArgb(102, 255, 0, 0));
        r.Add().Name("med").Min(25).Max(50).Color(System.Drawing.Color.FromArgb(102, 255, 255, 0));
        r.Add().Name("high").Min(50).Max(75).Color(System.Drawing.Color.FromArgb(102, 255, 125, 0));
        r.Add().Name("top").Min(75).Max(100).Color(System.Drawing.Color.FromArgb(102, 0, 255, 0));
    })
    .Pointer(p=>p.Thickness(0.2).Color(System.Drawing.Color.Black))
)
@(Html.C1().LinearGauge().Id("theLinearGauge")
    .Min(0).Max(100).Value(75).Step(10)
    .IsReadOnly(false)
    .ShowRanges(true)
    .Ranges(r =>
    {
        r.Add().Name("low").Min(0).Max(25).Color(System.Drawing.Color.FromArgb(102, 255, 0, 0));
        r.Add().Name("med").Min(25).Max(50).Color(System.Drawing.Color.FromArgb(102, 255, 255, 0));
        r.Add().Name("high").Min(50).Max(75).Color(System.Drawing.Color.FromArgb(102, 255, 125, 0));
        r.Add().Name("top").Min(75).Max(100).Color(System.Drawing.Color.FromArgb(102, 0, 255, 0));
    })
    .Pointer(p=>p.Thickness(0.4).Color(System.Drawing.Color.Black))
)