Defines the positive, or negative, offset value from the start of the first interval. The interval offset can be applied to labels and the tick marks.
For detailed implementation, please take a look at the Aspx, Razor and Controller code tabs. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <%@ Import Namespace="JQChart.Web.Mvc" %> <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGauges.css" /> <script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.jqGauges.min.js") %>" type="text/javascript"></script> <body> <div> <%=Html.JQRadialGauge().RadialGauge() .Background("#F7F7F7") .Width(350) .Height(350) .Border(border => { border.LineWidth(6) .StrokeStyle("#76786A") .Padding(16); }) .Shadows(true) .Anchor(anchor => { anchor.Visible(true) .Radius(0.1) .FillStyle(gradient => { gradient.RadialGradient(0.35, 0.35, 0, 0.35, 0.35, 1) .ColorStops(stop => { stop.Add(0, "#4F6169"); stop.Add(1, "#252E32"); }); }); }) .Tooltips(tooltips => { tooltips.Disabled(false).Highlighting(true); }) .Animation(new TimeSpan(0,0,1)) .Scales(scales => { scales.RadialScale() .Minimum(0) .Maximum(150) .StartAngle(140) .EndAngle(400) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.84) .Length(12) .LineWidth(2) .Interval(10) .IntervalOffset(30); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.84) .Visible(true) .Length(8) .LineWidth(2) .Interval(2) .IntervalOffset(30); }) .Labels(labels => { labels.Orientation(LabelsOrientation.Horizontal) .Offset(1) .Interval(10) .IntervalOffset(30); }) .Needles(needles => { needles.RadialNeedle() .Value(100) .Type(RadialNeedleType.Pointer) .MediumOffset(0.7) .OuterOffset(0.8) .Width(10) .FillStyle("#252E32"); }) .Ranges(ranges => { // Range from 0 to 110 ranges.RadialRange() .InnerStartOffset(0.76) .InnerEndOffset(0.68) .OuterOffset(0.82) .StartValue(0) .EndValue(110) .FillStyle(gradient => { gradient.LinearGradient(0, 0.5, 1, 0.5) .ColorStops(stops => { stops.Add(0, "#C5F80B"); stops.Add(1, "#6B8901"); }); }); //Range from 110 to 150 ranges.RadialRange() .InnerStartOffset(0.68) .InnerEndOffset(0.60) .OuterOffset(0.82) .StartValue(110) .EndValue(150) .FillStyle(gradient => { gradient.LinearGradient(0, 0.5, 1, 0.5) .ColorStops(stops => { stops.Add(0, "#FF3366"); stops.Add(1, "#B2183E"); }); }); }); }) .Render()%> </div> </body> </html> @using JQChart.Web.Mvc <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGauges.css" /> <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.jqGauges.min.js")" type="text/javascript"></script> <body> <div> @(Html.JQRadialGauge().RadialGauge() .Background("#F7F7F7") .Width(350) .Height(350) .Border(border => { border.LineWidth(6) .StrokeStyle("#76786A") .Padding(16); }) .Shadows(true) .Anchor(anchor => { anchor.Visible(true) .Radius(0.1) .FillStyle(gradient => { gradient.RadialGradient(0.35, 0.35, 0, 0.35, 0.35, 1) .ColorStops(stop => { stop.Add(0, "#4F6169"); stop.Add(1, "#252E32"); }); }); }) .Tooltips(tooltips => { tooltips.Disabled(false).Highlighting(true); }) .Animation(new TimeSpan(0,0,1)) .Scales(scales => { scales.RadialScale() .Minimum(0) .Maximum(150) .StartAngle(140) .EndAngle(400) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.84) .Length(12) .LineWidth(2) .Interval(10) .IntervalOffset(30); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.84) .Visible(true) .Length(8) .LineWidth(2) .Interval(2) .IntervalOffset(30); }) .Labels(labels => { labels.Orientation(LabelsOrientation.Horizontal) .Offset(1) .Interval(10) .IntervalOffset(30); }) .Needles(needles => { needles.RadialNeedle() .Value(100) .Type(RadialNeedleType.Pointer) .MediumOffset(0.7) .OuterOffset(0.8) .Width(10) .FillStyle("#252E32"); }) .Ranges(ranges => { // Range from 0 to 110 ranges.RadialRange() .InnerStartOffset(0.76) .InnerEndOffset(0.68) .OuterOffset(0.82) .StartValue(0) .EndValue(110) .FillStyle(gradient => { gradient.LinearGradient(0, 0.5, 1, 0.5) .ColorStops(stops => { stops.Add(0, "#C5F80B"); stops.Add(1, "#6B8901"); }); }); //Range from 110 to 150 ranges.RadialRange() .InnerStartOffset(0.68) .InnerEndOffset(0.60) .OuterOffset(0.82) .StartValue(110) .EndValue(150) .FillStyle(gradient => { gradient.LinearGradient(0, 0.5, 1, 0.5) .ColorStops(stops => { stops.Add(0, "#FF3366"); stops.Add(1, "#B2183E"); }); }); }); }) .Render() ) </div> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using SamplesBrowser.Models; namespace GaugesSamplesBrowser.Controllers { public class GaugeController : Controller { public ActionResult IntervalOffset() { return View(); } } } |