RadialGauge
RadialGauge
Editing Values
Features
Sample
Settings
Description
This example demonstrates how to use the isReadOnly and step properties with the RadialGauge control.
ShowTicks: determines whether the gauge should display tickmarks at each step or tickSpacing value.
ShowTickText: determines whether the gauge should display the text value of each tick mark.
NeedleShape: determines the shape of the gauge's needle element.
NeedleLength: determines the length of the gauge's needle element with respect to the pointer range.
Source
EditingController.cs
using MvcExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcExplorer.Controllers { public partial class RadialGaugeController : Controller { public ActionResult Editing() { ViewBag.DemoSettings = true; ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = CreateEditingSettings() }; return View(); } private static IDictionary<string, object[]> CreateEditingSettings() { var settings = new Dictionary<string, object[]> { {"IsReadOnly", new object[]{false, true }}, {"Step", new object[]{0.5, 1, 2}}, {"ShowTicks", new object[]{ false, true}}, {"ShowTickText", new object[]{ false, true}}, {"NeedleShape", new object[]{ "None", "Triangle", "Diamond", "Hexagon", "Rectangle", "Arrow", "WideArrow", "Pointer", "WidePointer", "Outer"}}, {"NeedleLength", new object[]{ "Outer", "Middle", "Inner"}}, }; return settings; } } }
Editing.cshtml
@{ ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } @section Styles{ <style> .wj-gauge .wj-tick-text text { opacity: 1; font-family: Courier; font-size: 8pt; fill: purple; } .wj-gauge .wj-needle { fill: orangered; stroke: orangered; } .wj-gauge .wj-needle .wj-inner-needle-cap { fill: white; } </style> } @(Html.C1().RadialGauge().Id(demoSettingsModel.ControlId) .Min(0).Max(10).Value(5).Format("") .IsReadOnly(false).Step(0.5) .Width(300).Height(250).CssStyle("padding-left","25px").CssStyle("overflow", "inherit") .ShowTicks(false).ShowTickText(false) .ShowText(ShowText.None) .NeedleShape(NeedleShape.None) .NeedleLength(NeedleLength.Outer) ) @section Description{ <p>@Html.Raw(Resources.RadialGauge.Editing_Text0)</p> <p>@Html.Raw(Resources.RadialGauge.Editing_Text1)</p> <p>@Html.Raw(Resources.RadialGauge.Editing_Text2)</p> <p>@Html.Raw(Resources.RadialGauge.Editing_Text3)</p> <p>@Html.Raw(Resources.RadialGauge.Editing_Text4)</p> }
Documentation