Pointer Element

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.


50
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// This file locates: "Scripts/Lesson/C1Gauge/ElementsPointer.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.pointer.color;
    theColor.valueChanged.addHandler(function (s, e) {
        theGauge.pointer.color = s.value;
    });
 
    theThickness.value = theGauge.pointer.thickness;
    theThickness.valueChanged.addHandler(function (s, e){
        theGauge.pointer.thickness = s.value;
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// This file locates: "Content/css/Lesson/C1Gauge/ElementsPointer.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1GaugeController : Controller
    {
        // GET: ElementsPointer
        public ActionResult ElementsPointer()
        {
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<h1>
    @Html.Raw(Resources.C1Gauge.ElementsPointer_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.ElementsPointer_Text1)
</p>
 
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="theColor">@Html.Raw(Resources.C1Gauge.ElementsPointer_Text2)</label>
        @Html.C1().InputColor().Id("theColor")
        <br />
        <label for="theThickness">@Html.Raw(Resources.C1Gauge.ElementsPointer_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)
        )
    </div>
</div>