Linear Gauges

Linear gauges display a metric as a percentage of the length of a linear scale. They can be horizontal or vertical, depending on the setting of the "direction" property.

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

value

direction

// This file locates: "Scripts/Lesson/C1Gauge/LinearGauges.js".
c1.documentReady(function () {
    var theGauge = wijmo.Control.getControl('#theGauge');
    var value = wijmo.Control.getControl('#value');
    var direction = wijmo.Control.getControl('#direction ');
 
    theGauge.valueChanged.addHandler(function (s, e) {
        value.value = s.value;
    });
 
    setDirection('Right');
 
    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;
    });
 
    direction.textChanged.addHandler(function (s, e) {
        setDirection(s.text);
    });
 
    function setDirection(dir) {
        theGauge.direction = dir;
        var g = theGauge.hostElement.style;
        switch (dir) {
            case 'Left':
            case 'Right':
                g.height = '2em';
                g.width = '100%';
                break;
            case 'Up':
            case 'Down':
                g.height = '100%';
                g.width = '2em';
                break;
        }
    }
});

// This file locates: "Content/css/Lesson/C1Gauge/LinearGauges.css".
.gauge-holder {
  width: 80%;
  height: 200px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);  
  padding: 12px;
}
.wj-gauge {
  width: 100%;
  height: 100%;
  margin: auto auto;
}
.wj-combobox, .wj-inputnumber {
  width: 120px;
}

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

@{
    var directions = new[] { "Left", "Right", "Up", "Down" };
}
 
<h1>
    @Html.Raw(Resources.C1Gauge.LinearGauges_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.LinearGauges_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.LinearGauges_Text2)
</p>
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="value">@Html.Raw(Resources.C1Gauge.LinearGauges_Text3)</label>
        @Html.C1().InputNumber().Id("value")
        <br>
        <label for="direction">@Html.Raw(Resources.C1Gauge.LinearGauges_Text4)</label>
        @Html.C1().ComboBox().Id("direction").Bind(directions).Text("Right")
    </div>
    <div class="col-xs-6">
        <div class="gauge-holder">
            @(Html.C1().LinearGauge().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>