Ranges

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' range based on the current gauge value.

Show Ranges
Ranges

// This file locates: "Scripts/Lesson/C1Gauge/ElementsRanges.js".
c1.documentReady(function () {
    var theGauge = wijmo.Control.getControl('#theGauge');
    var cmbRanges = wijmo.Control.getControl('#ranges');
 
    // customize
    document.getElementById('showRanges').addEventListener('click', function (e) {
        theGauge.showRanges = e.target.checked;
    });
 
    cmbRanges.selectedIndexChanged.addHandler(function (s, e) {
        createRanges(theGauge, s.selectedItem);
    });
 
    cmbRanges.selectedItem = 3;
 
    // populate gauge with ranges
    function createRanges(gauge, cnt) {
        gauge.ranges.clear();
        if (cnt) {
            var colorMin = new wijmo.Color('red'),
                colorMax = new wijmo.Color('green'),
                span = (gauge.max - gauge.min) / cnt;
            for (var i = 0; i < cnt; i++) {
                var rng = new wijmo.gauge.Range(),
                    color = wijmo.Color.interpolate(colorMin, colorMax, cnt > 1 ? i / (cnt - 1) : 0);
                rng.min = gauge.min + i * span;
                rng.max = rng.min + span;
                rng.color = color.toString();
                gauge.ranges.push(rng);
            }
        }
    }
});

// This file locates: "Content/css/Lesson/C1Gauge/ElementsRanges.css".
.wj-gauge {
  height: 150px;
  margin: 20px auto;
  padding: 12px;
  background: rgba(0, 0, 0, .02);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);  
}
.wj-gauge .wj-pointer {
  fill: black;  
}
label {
  width: 120px;
  text-align: right;
}
.wj-dropdown,
.wj-inputnumber {
  width: 120px;
  margin-bottom: 6px;
}

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

@{ 
    var ranges = new[] { 0, 3, 4, 20, 50 };
}
 
<h1>
    @Html.Raw(Resources.C1Gauge.ElementsRanges_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.ElementsRanges_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.ElementsRanges_Text2)
</p>
 
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="showRanges">@Html.Raw(Resources.C1Gauge.ElementsRanges_Text3)</label>
        <input id="showRanges" type="checkbox" checked="checked">
        <br />
        <label for="ranges">@Html.Raw(Resources.C1Gauge.ElementsRanges_Text4)</label>
        @(Html.C1().ComboBox<int>().Id("ranges").Bind(ranges))
    </div>
    <div class="col-xs-6">
        @(Html.C1().RadialGauge().Id("theGauge")
            .StartAngle(-30).SweepAngle(240)
            .Value(50).Max(100)
            .IsReadOnly(false)
            .HasShadow(false)
            .ShowText(ShowText.All)
            .ShowRanges(true)
            .Pointer(p=>p.Thickness(0.25))
            .ThumbSize(20)
        )
    </div>
</div>