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