Text Values

C1 MVC gauges have three properties that affect text display:

showText: Determines whether the gauge should show min, max, and/or current values as text elements,
format: Gets or sets the format string used to convert numeric values into strings, and
getText: A callback function used to provide custom strings to display the values.

Show Text
Format
Custom Text

// This file locates: "Scripts/Lesson/C1Gauge/ElementsTextValues.js".
c1.documentReady(function () {
    var theGauge = wijmo.Control.getControl('#theGauge');
    var showText = wijmo.Control.getControl('#showText');
    var format = wijmo.Control.getControl('#format');
 
    // customize text properties
    showText.textChanged.addHandler(function (s, e) {
        theGauge.showText = s.text;
    });
    format.textChanged.addHandler(function (s, e) {
        theGauge.format = s.text;
    });
 
    document.getElementById('getText').addEventListener('click', function (e) {
        theGauge.getText = e.target.checked ? getTextCallback : null;
    });
 
    // getText callback function
    function getTextCallback(gauge, part, value, text) {
        switch (part) {
            case 'value':
                if (value <= 10) return 'Empty!';
                if (value <= 25) return 'Low...';
                if (value <= 95) return 'Good';
                return 'Full';
            case 'min':
                return 'empty';
            case 'max':
                return 'full';
        }
        return text;
    }
});

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

@{ 
    var showTexts = new[] { "None", "Value", "MinMax", "All" };
    var formats = new[] { "n0", "n2", "c0", "c2" };
}
 
<h1>
    @Html.Raw(Resources.C1Gauge.ElementsTextValues_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.ElementsTextValues_Text1)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Gauge.ElementsTextValues_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1Gauge.ElementsTextValues_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1Gauge.ElementsTextValues_Text4)
    </li>
</ul>
 
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="showText">@Html.Raw(Resources.C1Gauge.ElementsTextValues_Text5)</label>
        @Html.C1().ComboBox().Id("showText").Bind(showTexts).Text("All")
        <br />
        <label for="format">@Html.Raw(Resources.C1Gauge.ElementsTextValues_Text6)</label>
        @Html.C1().ComboBox().Id("format").Bind(formats).Text("n0")
        <br />
        <label for="getText">@Html.Raw(Resources.C1Gauge.ElementsTextValues_Text7)</label>
        <input id="getText" type="checkbox">
    </div>
    <div class="col-xs-6">
        @(Html.C1().RadialGauge().Id("theGauge")
            .StartAngle(-30).SweepAngle(240)
            .Value(80).Max(100)
            .IsReadOnly(false)
            .HasShadow(false)
            .ShowText(ShowText.All)
            .ShowRanges(false)
            .Ranges(r =>
            {
                r.Add().Min(0).Max(25).Color(System.Drawing.Color.Red);
                r.Add().Min(25).Max(50).Color(System.Drawing.Color.Orange);
                r.Add().Min(50).Max(100).Color(System.Drawing.Color.Green);
            })
            .Pointer(p=>p.Thickness(0.15))
            .ThumbSize(20)
        )
    </div>
</div>