Gauge Basics

The main properties common to all C1 MVC gauge classes are:

min: The smallest value that can be displayed on the gauge.
max: The largest value that can be displayed on the gauge.
value: The current value displayed on the gauge.
showText: Whether to show the min/max/value properties as text on the gauge.

C1 MVC gauges can be used as value editors. The editing features are controlled by these properties:

isReadOnly: Whether users can change the gauge value.
step: The step to use then changing the gauge value.
isAnimated: Whether to use animations to display value changes.

Use the panel below to see the effect of each of these properties on different types of Gauge:

min

max

value

showText
isReadOnly
step

isAnimated

// This file locates: "Scripts/Lesson/C1Gauge/BasicProperties.js".
c1.documentReady(function () {
    var theRadialGauge = wijmo.Control.getControl('#theRadialGauge');
    var theLinearGauge = wijmo.Control.getControl('#theLinearGauge');
    var theBulletGraph = wijmo.Control.getControl('#theBulletGraph');
    var minCtl = wijmo.Control.getControl('#min');
    var maxCtl = wijmo.Control.getControl('#max');
    var valueCtl = wijmo.Control.getControl('#value');
    var showTextCtl = wijmo.Control.getControl('#showText');
    var stepCtl = wijmo.Control.getControl('#step');
 
    theRadialGauge.valueChanged.addHandler(function (s, e) {
        valueCtl.value = s.value;
    });
 
    theLinearGauge.valueChanged.addHandler(function (s, e) {
        valueCtl.value = s.value;
    });
 
    theBulletGraph.valueChanged.addHandler(function (s, e) {
        valueCtl.value = s.value;
    });
 
    function getGaugeProp(prop) {
        return theRadialGauge[prop];
    }
    function setGaugeProp(prop, value) {
        theRadialGauge[prop] = value;
        theLinearGauge[prop] = value;
        theBulletGraph[prop] = value;
    }
 
    minCtl.value = getGaugeProp('min');
    minCtl.valueChanged.addHandler(function (s, e) {
        setGaugeProp('min', s.value);
    });
 
    maxCtl.value = getGaugeProp('max');
    maxCtl.valueChanged.addHandler(function (s, e) {
        setGaugeProp('max', s.value);
    });
 
    valueCtl.value = getGaugeProp('value');
    valueCtl.valueChanged.addHandler(function (s, e) {
        setGaugeProp('value', s.value);
    });
 
    showTextCtl.text = getGaugeProp('showText');
    showTextCtl.textChanged.addHandler(function (s, e) {
        setGaugeProp('showText', s.text)
    });
 
    document.getElementById('isReadOnly').addEventListener('click', function (e) {
        setGaugeProp('isReadOnly', e.target.checked);
    });
 
    stepCtl.value = getGaugeProp('step');
    stepCtl.valueChanged.addHandler(function (s, e) {
        setGaugeProp('step', s.value);
    });
 
    document.getElementById('isAnimated').addEventListener('click', function (e) {
        setGaugeProp('isAnimated', e.target.checked);
    });
});

// This file locates: "Content/css/Lesson/C1Gauge/BasicProperties.css".
.dl-horizontal dt {
  width: 120px;
  float: left;
  text-align: right;
}
.dl-horizontal dd {
  margin-left: 130px;
}
.wj-inputnumber,
.wj-combobox{
  width: 140px;
}
.wj-gauge {
    margin: 20px auto;
}
.wj-radialgauge {
    height: 100px;
}

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

@{
    var showTexts = new[] { "None", "Value", "MinMax", "All" };
}
 
<h1>
    @Html.Raw(Resources.C1Gauge.BasicProperties_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.BasicProperties_Text1)
</p>
<dl class="dl-horizontal">
    @Html.Raw(Resources.C1Gauge.BasicProperties_Text2)
</dl>
 
<p>
    @Html.Raw(Resources.C1Gauge.BasicProperties_Text3)
</p>
<dl class="dl-horizontal">
    @Html.Raw(Resources.C1Gauge.BasicProperties_Text4)
</dl>
 
<p>
    @Html.Raw(Resources.C1Gauge.BasicProperties_Text5)
</p>
 
<div class="row demo-settings">
    <div class="col-xs-6">
        <label>@Html.Raw(Resources.C1Gauge.BasicProperties_Text6)</label>
        @Html.C1().InputNumber().Id("min").Step(10)
        <br />
        <label>@Html.Raw(Resources.C1Gauge.BasicProperties_Text7)</label>
        @Html.C1().InputNumber().Id("max").Step(10)
        <br />
        <label>@Html.Raw(Resources.C1Gauge.BasicProperties_Text8)</label>
        @Html.C1().InputNumber().Id("value").Step(10)
        <br />
        <label>@Html.Raw(Resources.C1Gauge.BasicProperties_Text9)</label>
        @Html.C1().ComboBox().Id("showText").Bind(showTexts)
        <br />
        <label>@Html.Raw(Resources.C1Gauge.BasicProperties_Text10)</label>
        <input id="isReadOnly" type="checkbox" checked="checked">
        <br />
        <label>@Html.Raw(Resources.C1Gauge.BasicProperties_Text11)</label>
        @Html.C1().InputNumber().Id("step").Step(1)
        <br />
        <label>@Html.Raw(Resources.C1Gauge.BasicProperties_Text12)</label>
        <input id="isAnimated" type="checkbox" checked="checked">
    </div>
    <div class="col-xs-6">
        @(Html.C1().RadialGauge().Id("theRadialGauge")
            .Min(0).Max(100).Value(75)
            .ShowText(ShowText.None)
        )
        @(Html.C1().LinearGauge().Id("theLinearGauge")
            .Min(0).Max(100).Value(75)
            .ShowText(ShowText.None)
        )
        @(Html.C1().BulletGraph().Id("theBulletGraph")
            .Min(0).Max(100).Value(75)
            .Target(60).Bad(50).Good(70)
            .ShowText(ShowText.None)
        )
    </div>
</div>