ASP.NET Core C1 Gauge 101

This page shows how to get started with ASP.NET Core MVC's C1 Gauge controls.

Download Free Trial

Getting Started

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

  1. Create a new ASP.NET Core MVC project using the "C1 ASP.NET Core MVC Web Application" template.
  2. Add controller and corresponding view to the project.
  3. Initialize the C1 Gauge control in view using tag <c1-linear-gauge></c1-linear-gauge> and <c1-radial-gauge></c1-radial-gauge>
  4. (Optional) Add some CSS to customize the Gauge control's appearance.
<!DOCTYPE html> <html> <head> </head> <body> <!-- LinearGauge --> <c1-linear-gauge id="gsLinearGauge" value="@Model.value" min="@Model.min" max="@Model.max" direction="Right" format="@Model.format" class="linear-gauge"> </c1-linear-gauge> <!-- RadialGauge --> <c1-radial-gauge id="gsRadialGauge" value="@Model.value" min="@Model.min" max="@Model.max" format="@Model.format" class="radial-gauge"> </c1-radial-gauge> <!-- InputNumber --> <div> <label>Gauge Value</label> <c1-input-number id="gsValue" value="@Model.value" min="@Model.min" max="@Model.max" format="@Model.format" step="@Model.step" value-changed="gsValue_valueChanged"> </c1-input-number> </div> </body> </html>
using Microsoft.AspNetCore.Mvc; using Gauge101.Models; namespace Gauge101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(new GaugeModel()); } } }

Result (live):


Displaying Values

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

The example below allows you to see what happens when the show-text property is changed.

<c1-linear-gauge id="dvLinearGauge" min="@Model.min" max="@Model.max" value="@Model.value" format="@Model.format" show-text="None" class="linear-gauge"> </c1-linear-gauge> <c1-radial-gauge id="dvRadialGauge" min="@Model.min" max="@Model.max" value="@Model.value" format="@Model.format" show-text="None" class="radial-gauge"> </c1-radial-gauge> <!-- "Gauge Value" input omitted --> <c1-input-number id="dvValue" value="@Model.value" min="@Model.min" max="@Model.max" format="@Model.format" step="@Model.step" value-changed="dvValue_valueChanged"> </c1-input-number> <c1-menu id="dvShowTextMenu" header="Show Text" selected-value="ShowText.All" execute-command="dvShowTextMenu_execute"> <c1-menu-item header="Value" command-parameter="ShowText.Value"></c1-menu-item> <c1-menu-item header="Min/Max" command-parameter="ShowText.MinMax"></c1-menu-item> <c1-menu-item header="All" command-parameter="ShowText.All"></c1-menu-item> <c1-menu-item header="None" command-parameter="ShowText.None"></c1-menu-item> </c1-menu>
function dvShowTextMenu_execute(arg) { if (sender.value < sender.min || sender.value > sender.max) { return; } var linearGauge = wijmo.Control.getControl("#dvLinearGauge"); var radialGauge = wijmo.Control.getControl("#dvRadialGauge"); linearGauge.showText = arg; radialGauge.showText = arg; };
using Microsoft.AspNetCore.Mvc; using Gauge101.Models; namespace Gauge101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(new GaugeModel()); } } }

Result (live):

Using Ranges

All ASP.Net MVC gauges have a <c1-gauge-range> tag 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 show-ranges property can be used 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.

<c1-linear-gauge id="urLinearGauge" value="@Model.value" min="@Model.min" max="@Model.max" direction="Right" format="@Model.format" class="linear-gauge" show-ranges="@Model.showRanges"> <c1-gauge-range c1-property="Pointer" thickness="@Model.pointerThickness"></c1-gauge-range> <c1-gauge-range min="@Model.lowerRangemin" max="@Model.lowerRangemax" color="@Model.lowerRangecolor"></c1-gauge-range> <c1-gauge-range min="@Model.middleRangemin" max="@Model.middleRangemax" color="@Model.middleRangecolor"></c1-gauge-range> <c1-gauge-range min="@Model.upperRangemin" max="@Model.upperRangemin" color="@Model.upperRangecolor"></c1-gauge-range> </c1-linear-gauge> <c1-bullet-graph id="urBulletGraph" value="@Model.value" min="@Model.min" max="@Model.max" direction="Right" format="@Model.format" class="linear-gauge" show-ranges="@Model.showRanges" target="@Model.rangesTarget" good="@Model.middleRangemax" bad="@Model.middleRangemin"> <c1-gauge-range c1-property="Pointer" thickness="@Model.pointerThickness"></c1-gauge-range> </c1-bullet-graph> <c1-radial-gauge id="urRadialGauge" value="@Model.value" min="@Model.min" max="@Model.max" format="@Model.format" class="radial-gauge" show-ranges="@Model.showRanges"> <c1-gauge-range c1-property="Pointer" thickness="@Model.pointerThickness"></c1-gauge-range> <c1-gauge-range min="@Model.lowerRangemin" max="@Model.lowerRangemax" color="@Model.lowerRangecolor"></c1-gauge-range> <c1-gauge-range min="@Model.middleRangemin" max="@Model.middleRangemax" color="@Model.middleRangecolor"></c1-gauge-range> <c1-gauge-range min="@Model.upperRangemin" max="@Model.upperRangemin" color="@Model.upperRangecolor"></c1-gauge-range> </c1-radial-gauge> <!-- "Gauge Value" input omitted --> <label> Show Ranges&nbsp; <c1-input-number id="urValue" value="@Model.value" min="@Model.min" max="@Model.max" format="@Model.format" step="@Model.step" value-changed="urValue_valueChanged"> </c1-input-number> </label>
// InputNumber valueChanged event-to update value of Radial Gauge, Bullet Graph and Linear Gauge function urValue_valueChanged(sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } 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 Microsoft.AspNetCore.Mvc; using Gauge101.Models; namespace Gauge101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(new GaugeModel()); } } }

Result (live):

Automatic Scaling

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

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

The following example allows you to adjust the start-angle, sweep-angle, and auto-scale properties in real-time.

<c1-radial-gauge id="asRadialGauge" value="@Model.value" min="@Model.min" max="@Model.max" auto-scale="@Model.autoScale" format="@Model.format" class="radial-gauge"> </c1-radial-gauge> <div> <label>Gauge Value</label> <c1-input-number id="asValue" value="@Model.value" min="@Model.min" max="@Model.max" format="@Model.format" step="@Model.step" value-changed="asValue_valueChanged"> </c1-input-number> </div> <div> <label>Start Angle</label> <c1-input-number id="asStartAngle" value="@Model.startAngle" min="-360" max="360" step="45" value-changed="asStartAngle_valueChanged"> </c1-input-number> </div> <div> <label>Sweep Angle</label> <c1-input-number id="asSweepAngle" value="@Model.sweepAngle" min="0" max="360" step="45" value-changed="asSweepAngle_valueChanged"> </c1-input-number> </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) { if (sender.value < sender.min || sender.value > sender.max) { return; } var radialGauge = wijmo.Control.getControl("#asRadialGauge"); radialGauge.value = sender.value; }; // InputNumber valueChanged event-to update startAngle of Radial Gauge function asStartAngle_valueChanged(sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } var radialGauge = wijmo.Control.getControl("#asRadialGauge"); radialGauge.startAngle = sender.value; }; // InputNumber valueChanged event-to update sweepAngle of Radial Gauge function asSweepAngle_valueChanged(sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } var radialGauge = wijmo.Control.getControl("#asRadialGauge"); radialGauge.sweepAngle = sender.value; };
using Microsoft.AspNetCore.Mvc; using Gauge101.Models; namespace Gauge101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(new GaugeModel()); } } }

Result (live):

Direction

The RadialGauge's start-angle and sweep-angle 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"> <c1-linear-gauge id="dLinearGauge" value="@Model.value" min="@Model.min" max="@Model.max" direction="Right" format="@Model.format" class="linear-gauge" show-ranges="@Model.showRanges"> <c1-gauge-range c1-property="Pointer" thickness="@Model.pointerThickness"></c1-gauge-range> <c1-gauge-range min="@Model.lowerRangemin" max="@Model.lowerRangemax" color="@Model.lowerRangecolor"></c1-gauge-range> <c1-gauge-range min="@Model.middleRangemin" max="@Model.middleRangemax" color="@Model.middleRangecolor"></c1-gauge-range> <c1-gauge-range min="@Model.upperRangemin" max="@Model.upperRangemin" color="@Model.upperRangecolor"></c1-gauge-range> </c1-linear-gauge> </div> <div class="direction-col"> <c1-bullet-graph id="dBulletGraph" value="@Model.value" min="@Model.min" max="@Model.max" direction="Right" format="@Model.format" class="linear-gauge" show-ranges="@Model.showRanges" target="@Model.rangesTarget" good="@Model.middleRangemax" bad="Model.middleRangemin"> <c1-gauge-range c1-property="Pointer" thickness="@Model.pointerThickness"></c1-gauge-range> </c1-bullet-graph> </div> </div> <div class="app-input-group"> <label>Gauge Value</label> <c1-input-number id="dValue" value="@Model.value" min="@Model.min" max="@Model.max" format="@Model.format" step="@Model.step" value-changed="dValue_valueChanged"> </c1-input-number> </div> <c1-menu id="dDirection" header="Direction" selected-value="GaugeDirection.Right" execute-command="dDirection_execute"> <c1-menu-item header="Up" command-parameter="GaugeDirection.Up"></c1-menu-item> <c1-menu-item header="Right" command-parameter="GaugeDirection.Right"></c1-menu-item> <c1-menu-item header="Down" command-parameter="GaugeDirection.Down"></c1-menu-item> <c1-menu-item header="Left" command-parameter="GaugeDirection.Left"></c1-menu-item> </c1-menu>
// InputNumber valueChanged event-to update value of Linear Gauge and Bullet Graph function dValue_valueChanged(sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } 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 Microsoft.AspNetCore.Mvc; using Gauge101.Models; namespace Gauge101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(new GaugeModel()); } } }

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.

<c1-linear-gauge id="sLinearGauge" value="@Model.value" min="@Model.min" max="@Model.max" direction="Right" format="@Model.format" show-text="Value" class="custom-gauge"> </c1-linear-gauge> <c1-radial-gauge id="sRadialGauge" value="@Model.value" min="@Model.min" max="@Model.max" format="@Model.format" show-text="Value" class="custom-gauge"> </c1-radial-gauge> <div class="app-input-group"> <label>Gauge Value</label> <c1-input-number id="sValue" value="@Model.value" min="@Model.min" max="@Model.max" format="@Model.format" step="@Model.step" value-changed="sValue_valueChanged"> </c1-input-number> </div>
function sValue_valueChanged(sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } 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 Microsoft.AspNetCore.Mvc; using Gauge101.Models; namespace Gauge101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(new GaugeModel()); } } }

Result (live):

Editing Values

The gauge controls can be used as a simple indicator or as an input control when the is-read-only 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 is-read-only and step properties with the LinearGauge and RadialGauge controls.

<c1-linear-gauge id="evLinearGauge" value="25" show-text="All" min="0" max="100" direction="Right" step="10" is-read-only="false" class="linear-gauge"> </c1-linear-gauge> <c1-radial-gauge id="evRadialGauge" value="0.2" min="0" max="1" format="@Model.format" step="0.15" is-read-only="false" class="radial-gauge"> </c1-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 Microsoft.AspNetCore.Mvc; using Gauge101.Models; namespace Gauge101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(new GaugeModel()); } } }

Result (live):