Steps for getting started with the Gauge control in MVC applications:
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.
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.
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.
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.
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.
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.