Component One ASP.Net MVC

ASP.Net MVC Gauge 101

This page shows how to get started with ASP.Net MVC's Gauge controls.

Getting Started

Steps for getting started with the Gauge control in MVC applications:

  1. Create a new MVC project using the C1 ASP.NET MVC application template.
  2. Add controller and corresponding view to the project.
  3. Initialize the Gauge control in view using razor syntax.
  4. (Optional) Add some CSS to customize the input control's appearance.
<!DOCTYPE html> <html> <head> </head> <body> <!-- LinearGauge --> @(Html.C1().LinearGauge().Id("gsLinearGauge").Value(Model.value) .Min(Model.min).Max(Model.max).Direction(GaugeDirection.Right) .Format(Model.format).CssClass("linear-gauge") ) <!-- RadialGauge --> @(Html.C1().RadialGauge().Id("gsRadialGauge").Value(Model.value) .Min(Model.min).Max(Model.max).Format(Model.format).CssClass("radial-gauge") ) <!-- InputNumber --> <div> <label>Gauge Value</label> @(Html.C1().InputNumber().Id("gsValue").Value(Model.value) .Min(Model.min).Max(Model.max).Format(Model.format) .Step(Model.step).OnClientValueChanged("gsValue_valueChanged") ) </div> </body> </html>
// InputNumber valueChanged event function gsValue_valueChanged(sender) { var linearGauge = wijmo.Control.getControl("#gsLinearGauge"); var radialGauge = wijmo.Control.getControl("#gsRadialGauge"); linearGauge.value = sender.value; radialGauge.value = sender.value; };
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCGauge101.Models; namespace ASPNetMVCGauge101.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(new GaugeModal()); } } }

Result (live):


Displaying Values

The gauge controls offer a ShowText property that determines which values should be displayed as text by the gauge. There are four valid values for the ShowText property:

The example below allows you to see what happens when the ShowText property is changed.

@(Html.C1().LinearGauge().Id("dvLinearGauge").Min(Model.min).Max(Model.max) .Value(Model.value).Format(Model.format) .ShowText(ShowText.All).CssClass("linear-gauge") ) @(Html.C1().RadialGauge().Id("dvRadialGauge").Min(Model.min).Max(Model.max) .Value(Model.value).Format(Model.format) .ShowText(ShowText.All).CssClass("radial-gauge") ) <!-- "Gauge Value" input omitted --> @(Html.C1().Menu().Header("Show Text").Id("dvShowTextMenu").SelectedValue("All") .Command(cmd => cmd.ExecuteCommand("dvShowTextMenu_execute")) .MenuItems(items => { items.Add().Header("Value").CommandParameter(ShowText.Value); items.Add().Header("Min/Max").CommandParameter(ShowText.MinMax); items.Add().Header("All").CommandParameter(ShowText.All); items.Add().Header("None").CommandParameter(ShowText.None); }) )
function dvShowTextMenu_execute(arg) { var linearGauge = wijmo.Control.getControl("#dvLinearGauge"); var radialGauge = wijmo.Control.getControl("#dvRadialGauge"); linearGauge.showText = arg; radialGauge.showText = arg; };
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCGauge101.Models; namespace ASPNetMVCGauge101.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(new GaugeModal()); } } }

Result (live):

Using Ranges

All ASP.Net MVC gauges have a Ranges property that contains an list of Range objects. By default, the ranges are displayed on the face of gauge to indicate zones of interest; however, the ShowRanges property can be used to to hide the ranges. Instead, the gauge will determine which range contains the current gauge value and will apply that range's color to the gauge pointer.

The Range object itself offers properties such as Min, Max, and Color to customize each zone.

The following example demonstrates how to use ranges with the LinearGauge, RadialGauge, and BulletGraph.

@(Html.C1().LinearGauge().Id("urLinearGauge").Value(Model.value) .Min(Model.min).Max(Model.max).Direction(GaugeDirection.Right).Format(Model.format) .CssClass("linear-gauge").ShowRanges(Model.showRanges).Pointer(p => p.Thickness(Model.pointerThickness)) .Ranges(r => r .Add(item => item.Min(Model.lowerRangemin).Max(Model.lowerRangemax).Color(Model.lowerRangecolor)) .Add(item => item.Min(Model.middleRangemin).Max(Model.middleRangemax).Color(Model.middleRangecolor)) .Add(item => item.Min(Model.upperRangemin).Max(Model.upperRangemax).Color(Model.upperRangecolor)) ) ) @(Html.C1().BulletGraph().Id("urBulletGraph").Value(Model.value) .Min(Model.min).Max(Model.max).Direction(GaugeDirection.Right).Format(Model.format) .CssClass("linear-gauge").ShowRanges(Model.showRanges).Pointer(p => p.Thickness(Model.pointerThickness)) .Target(Model.rangesTarget).Good(Model.middleRangemax).Bad(Model.middleRangemin) ) @(Html.C1().RadialGauge().Id("urRadialGauge").Value(Model.value) .Min(Model.min).Max(Model.max) .Format(Model.format).CssClass("radial-gauge").ShowRanges(Model.showRanges) .Pointer(p => p.Thickness(Model.pointerThickness)) .Ranges(r => r .Add(item => item.Min(Model.lowerRangemin).Max(Model.lowerRangemax).Color(Model.lowerRangecolor)) .Add(item => item.Min(Model.middleRangemin).Max(Model.middleRangemax).Color(Model.middleRangecolor)) .Add(item => item.Min(Model.upperRangemin).Max(Model.upperRangemax).Color(Model.upperRangecolor)) ) ) <!-- "Gauge Value" input omitted --> <label> Show Ranges&nbsp; @(Html.C1().InputNumber().Id("urValue").Value(Model.value).Min(Model.min).Max(Model.max) .Format(Model.format).Step(Model.step).OnClientValueChanged("urValue_valueChanged") ) </label>
// InputNumber valueChanged event-to update value of Radial Gauge, Bullet Graph and Linear Gauge function urValue_valueChanged(sender) { var linearGauge = wijmo.Control.getControl("#urLinearGauge"); var bulletGraph = wijmo.Control.getControl("#urBulletGraph"); var radialGauge = wijmo.Control.getControl("#urRadialGauge"); linearGauge.value = sender.value; bulletGraph.value = sender.value; radialGauge.value = sender.value; };
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCGauge101.Models; namespace ASPNetMVCGauge101.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(new GaugeModal()); } } }

Result (live):

Automatic Scaling

The RadialGauge offers two properties to configure its layout, StartAngle and SweepAngle. The StartAngle property specifies the RadialGauge's starting angle, or rotation. The SweepAngle property specifies an angle representing the length of the RadialGauge's arc. The angle for both properties are measured clockwise, starting a the 9 o'clock position.

The RadialGauge also offers the AutoScale property. When AutoScale is set to true, the RadialGauge will be automatically scaled to fill its containing element.

The following example allows you to adjust the StartAngle, SweepAngle, and AutoScale properties in real-time.

@(Html.C1().RadialGauge().Id("asRadialGauge") .Value(Model.value).Min(Model.min).Max(Model.max) .AutoScale(Model.autoScale) .Format(Model.format).CssClass("radial-gauge") ) <div> <label>Gauge Value</label> @(Html.C1().InputNumber().Id("asValue").Value(Model.value) .Min(Model.min).Max(Model.max).Format(Model.format) .Step(Model.step).OnClientValueChanged("asValue_valueChanged") ) </div> <div> <label>Start Angle</label> @(Html.C1().InputNumber().Id("asStartAngle").Value(Model.startAngle) .Min(-360).Max(360).Step(45).OnClientValueChanged("asStartAngle_valueChanged") ) </div> <div> <label>Sweep Angle</label> @(Html.C1().InputNumber().Id("asSweepAngle").Value(Model.sweepAngle) .Min(0).Max(360).Step(45).OnClientValueChanged("asSweepAngle_valueChanged") ) </div> <label> Auto-Scale&nbsp; <input id="asAutoScale" type="checkbox" /> </label>
$(document).ready(function () { var autoscaleInput = document.getElementById('asAutoScale'); autoscaleInput.checked = true; autoscaleInput.addEventListener('change', function () { // determine autoScale by checkbox's checked state var radialGauge = wijmo.Control.getControl("#asRadialGauge"); radialGauge.autoScale = this.checked; }); }); // InputNumber valueChanged event-to update value of Radial Gauge function asValue_valueChanged(sender) { var radialGauge = wijmo.Control.getControl("#asRadialGauge"); radialGauge.value = sender.value; }; // InputNumber valueChanged event-to update startAngle of Radial Gauge function asStartAngle_valueChanged(sender) { var radialGauge = wijmo.Control.getControl("#asRadialGauge"); radialGauge.startAngle = sender.value; }; // InputNumber valueChanged event-to update sweepAngle of Radial Gauge function asSweepAngle_valueChanged(sender) { var radialGauge = wijmo.Control.getControl("#asRadialGauge"); radialGauge.sweepAngle = sender.value; };
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCGauge101.Models; namespace ASPNetMVCGauge101.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(new GaugeModal()); } } }

Result (live):

Direction

The RadialGauge's StartAngle and SweepAngle properties do not apply to the LinearGauge or BulletGraph. Instead, the LinearGauge and BulletGraph offer the Direction property to determine how it should be displayed. There are four options for the Direction property:

The example below allows you to see what happens when the Direction property is changed.

<div class="row"> <div class="direction-col"> @(Html.C1().LinearGauge().Id("dLinearGauge").Value(Model.value) .Min(Model.min).Max(Model.max).Direction(GaugeDirection.Right).Format(Model.format) .CssClass("linear-gauge").ShowRanges(Model.showRanges).Pointer(p => p.Thickness(Model.pointerThickness)) .Ranges(r => r .Add(item => item.Min(Model.lowerRangemin).Max(Model.lowerRangemax).Color(Model.lowerRangecolor)) .Add(item => item.Min(Model.middleRangemin).Max(Model.middleRangemax).Color(Model.middleRangecolor)) .Add(item => item.Min(Model.upperRangemin).Max(Model.upperRangemax).Color(Model.upperRangecolor)) ) ) </div> <div class="direction-col"> @(Html.C1().BulletGraph().Id("dBulletGraph").Value(Model.value) .Min(Model.min).Max(Model.max).Direction(GaugeDirection.Right).Format(Model.format) .CssClass("linear-gauge").ShowRanges(Model.showRanges).Pointer(p => p.Thickness(Model.pointerThickness)) .Target(Model.rangesTarget).Good(Model.middleRangemax).Bad(Model.middleRangemin) ) </div> </div> <div class="app-input-group"> <label>Gauge Value</label> @(Html.C1().InputNumber().Id("dValue").Value(Model.value) .Min(Model.min).Max(Model.max).Format(Model.format) .Step(Model.step).OnClientValueChanged("dValue_valueChanged") ) </div> @(Html.C1().Menu().Header("Direction").Id("dDirection").SelectedValue("Right") .Command(cmd => cmd.ExecuteCommand("dDirection_execute")) .MenuItems(items => { items.Add().Header("Up").CommandParameter(GaugeDirection.Up); items.Add().Header("Right").CommandParameter(GaugeDirection.Right); items.Add().Header("Down").CommandParameter(GaugeDirection.Down); items.Add().Header("Left").CommandParameter(GaugeDirection.Left); }) )
// InputNumber valueChanged event-to update value of Linear Gauge and Bullet Graph function dValue_valueChanged(sender) { var linearGauge = wijmo.Control.getControl("#dLinearGauge"); var bulletGraph = wijmo.Control.getControl("#dBulletGraph"); linearGauge.value = sender.value; bulletGraph.value = sender.value; }; function dDirection_execute(arg) { var linearGauge = wijmo.Control.getControl("#dLinearGauge"); var bulletGraph = wijmo.Control.getControl("#dBulletGraph"); var direction = arg; dirCols = Array.prototype.slice.call(document.querySelectorAll('.direction-col')); // split or stack columns dirCols.forEach(function (el) { if (direction == 2 || direction == 3) {//if (direction == 'Up' || direction == 'Down') { el.className += ' col-md-6'; } else { el.className = el.className.replace('col-md-6', ''); } }); // set Gauge.direction linearGauge.direction = direction; bulletGraph.direction = direction; // update gauge's CSS Class if (direction == 2 || direction == 3) {//if (direction == 'Up' || direction == 'Down') { linearGauge.hostElement.className = linearGauge.hostElement.className.replace('linear-gauge', 'vertical-gauge'); bulletGraph.hostElement.className = bulletGraph.hostElement.className.replace('linear-gauge', 'vertical-gauge'); } else { linearGauge.hostElement.className = linearGauge.hostElement.className.replace('vertical-gauge', 'linear-gauge'); bulletGraph.hostElement.className = bulletGraph.hostElement.className.replace('vertical-gauge', 'linear-gauge'); } };
.vertical-gauge { height: 300px; width: 1.2em; }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCGauge101.Models; namespace ASPNetMVCGauge101.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(new GaugeModal()); } } }

Result (live):

Styling

The appearance of the gauge controls is largely defined in CSS. In addition to the default theme, we include several professionally designed themes that customize the appearance of all ASP.Net MVC controls to achieve a consistent, attractive look.

In this example, we added the "custom-gauge" CSS class to the LinearGauge & RadialGauge, and define some CSS rules to create an orange pointer for both.

@(Html.C1().LinearGauge().Id("sLinearGauge").Value(Model.value) .Min(Model.min).Max(Model.max).Direction(GaugeDirection.Right) .Format(Model.format).ShowText(ShowText.Value) .CssClass("custom-gauge") ) @(Html.C1().RadialGauge().Id("sRadialGauge").Value(Model.value) .Min(Model.min).Max(Model.max).Format(Model.format).ShowText(ShowText.Value) .CssClass("custom-gauge") ) <div class="app-input-group"> <label>Gauge Value</label> @(Html.C1().InputNumber().Id("sValue").Value(Model.value) .Min(Model.min).Max(Model.max).Format(Model.format) .Step(Model.step).OnClientValueChanged("sValue_valueChanged") ) </div>
function sValue_valueChanged(sender) { var linearGauge = wijmo.Control.getControl("#sLinearGauge"); var radialGauge = wijmo.Control.getControl("#sRadialGauge"); linearGauge.value = sender.value; radialGauge.value = sender.value; };
.custom-gauge .wj-pointer path{ fill: #ffa500; stroke: #cd853f; }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCGauge101.Models; namespace ASPNetMVCGauge101.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(new GaugeModal()); } } }

Result (live):

Editing Values

The gauge controls can be used as a simple indicator or as an input control when the IsReadOnly property is set to false. The gauges also offer a Step property that determines how much to add or subtract from its current value when being used as an input control.

The example below demonstrates how to use the IsReadOnly and Step properties with the LinearGauge and RadialGauge controls.

@(Html.C1().LinearGauge().Id("evLinearGauge").Value(25).ShowText(ShowText.All) .Min(0).Max(100).Direction(GaugeDirection.Right).Step(10).IsReadOnly(false) .CssClass("linear-gauge") ) @(Html.C1().RadialGauge().Id("evRadialGauge").Value(20).Min(0).Max(100) .Format(Model.format).Step(15).IsReadOnly(false) .CssClass("radial-gauge") ) <label> Read-Only&nbsp; <input id="evReadOnly" type="checkbox" /> </label>
$(document).ready(function () { var readOnlyInput = document.getElementById('evReadOnly'); readOnlyInput.addEventListener('change', function () { // determine readOnly by checkbox's checked state var linearGauge = wijmo.Control.getControl("#evLinearGauge"); var radialGauge = wijmo.Control.getControl("#evRadialGauge"); linearGauge.isReadOnly = this.checked; radialGauge.isReadOnly = this.checked; }); });
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCGauge101.Models; namespace ASPNetMVCGauge101.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(new GaugeModal()); } } }

Result (live):