Face Element

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.

Color
Thickness

// This file locates: "Scripts/Lesson/C1Gauge/ElementsFace.js".
c1.documentReady(function () {
    var theGauge = wijmo.Control.getControl('#theGauge');
    var theColor = wijmo.Control.getControl('#theColor');
    var theThickness = wijmo.Control.getControl('#theThickness');
 
    theColor.value = theGauge.face.color;
    theColor.valueChanged.addHandler(function (s, e) {
        theGauge.face.color = s.value;
    });
 
    theThickness.value = theGauge.face.thickness;
    theThickness.valueChanged.addHandler(function (s, e){
        theGauge.face.thickness = s.value;
    });
});

// This file locates: "Content/css/Lesson/C1Gauge/ElementsFace.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: ElementsFace
        public ActionResult ElementsFace()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Gauge.ElementsFace_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.ElementsFace_Text1)
</p>
 
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="theColor">@Html.Raw(Resources.C1Gauge.ElementsFace_Text2)</label>
        @Html.C1().InputColor().Id("theColor")
        <br />
        <label for="theThickness">@Html.Raw(Resources.C1Gauge.ElementsFace_Text3)</label>
        @Html.C1().InputNumber().Id("theThickness").Min(0).Max(1).Step(0.1).Format("n2")
    </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)
            .Pointer(p=>p.Thickness(0.15))
            .ThumbSize(20)
        )
    </div>
</div>