Radial Gauges

Radial gauges display 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. If the "autoScale" property is set to true, the control will automatically scale the gauge to fill the host element taking onto account the "startAngle" and "sweepAngle" properties.

Use the controls below to see the effect of the main RadialGauge properties:

value

startAngle

sweepAngle

autoScale

// This file locates: "Scripts/Lesson/C1Gauge/RadialGauges.js".
c1.documentReady(function () {
    var theGauge = wijmo.Control.getControl('#theGauge');
    var value = wijmo.Control.getControl('#value');
    var startAngle = wijmo.Control.getControl('#startAngle');
    var sweepAngle = wijmo.Control.getControl('#sweepAngle');
 
    theGauge.valueChanged.addHandler(function (s, e) {
        value.value = s.value;
    });
 
    value.min = theGauge.min;
    value.max = theGauge.max;
    value.step = theGauge.step;
    value.value = theGauge.value;
    value.valueChanged.addHandler(function (s, e) {
        theGauge.value = s.value;
    });
 
    startAngle.value = theGauge.startAngle;
    startAngle.valueChanged.addHandler(function (s, e) {
        theGauge.startAngle = s.value;
    });
 
    sweepAngle.value = theGauge.sweepAngle;
    sweepAngle.valueChanged.addHandler(function (s, e) {
        theGauge.sweepAngle = s.value;
    });
 
    document.getElementById('autoScale').addEventListener('click', function (e) {
        theGauge.autoScale = e.target.checked;
    });
});

// This file locates: "Content/css/Lesson/C1Gauge/RadialGauges.css".
.gauge-holder {
  width: 80%;
  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 {
  width: 100%;
  height: 100%;
}
.wj-radialgauge {
  height: 200px;
}
.wj-inputnumber {
  width: 120px;
}

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

<h1>
    @Html.Raw(Resources.C1Gauge.RadialGauges_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.RadialGauges_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.RadialGauges_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.RadialGauges_Text3)
</p>
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="value">@Html.Raw(Resources.C1Gauge.RadialGauges_Text4)</label>
        @Html.C1().InputNumber().Id("value")
        <br>
        <label for="startAngle">@Html.Raw(Resources.C1Gauge.RadialGauges_Text5)</label>
        @Html.C1().InputNumber().Id("startAngle").Min(-360).Max(360).Step(10)
        <br>
        <label for="sweepAngle">@Html.Raw(Resources.C1Gauge.RadialGauges_Text6)</label>
        @Html.C1().InputNumber().Id("sweepAngle").Min(-360).Max(360).Step(10)
        <br>
        <label for="autoScale">@Html.Raw(Resources.C1Gauge.RadialGauges_Text7)</label>
        <input id="autoScale" type="checkbox" checked="checked"><br>
 
    </div>
    <div class="col-xs-6">
        <div class="gauge-holder">
            @(Html.C1().RadialGauge().Id("theGauge")
                .Min(0).Max(100).Step(5).Value(75)
                .IsReadOnly(false)
                .ShowRanges(false)
                .Ranges(r =>
                {
                    r.Add().Min(0).Max(33).Color(System.Drawing.Color.Red);
                    r.Add().Min(33).Max(66).Color(System.Drawing.Color.Yellow);
                    r.Add().Min(66).Max(100).Color(System.Drawing.Color.Green);
                })
            )
        </div>
    </div>
</div>