Labels Orientation:
This sample demonstrates how to specify radial gauge labels orientation. The possible options are: horizontal, radial and circular.
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() .ID("jqRadialGauge") .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(100) .Maximum(1000) .StartAngle(140) .EndAngle(400) .Interval(100) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.8) .Length(12) .LineWidth(2); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.8) .Visible(true) .Length(8) .LineWidth(2) .Interval(20); }) .Labels(labels => { labels.Orientation(LabelsOrientation.Circular) .Offset(1) .Font("12px sans-serif"); }) .Needles(needles => { needles.RadialNeedle() .Value(650) .Type(RadialNeedleType.Pointer) .MediumOffset(0.66) .OuterOffset(0.76) .Width(10) .FillStyle("#252E32"); }) .Ranges(ranges => { // Range from 300 to 700 ranges.RadialRange() .InnerStartOffset(0.72) .InnerEndOffset(0.64) .OuterOffset(0.78) .StartValue(300) .EndValue(700) .FillStyle(gradient => { gradient.LinearGradient(0, 0.5, 1, 0.5) .ColorStops(stops => { stops.Add(0, "#C5F80B"); stops.Add(1, "#6B8901"); }); }); //Range from 700 to 1000 ranges.RadialRange() .InnerStartOffset(0.64) .InnerEndOffset(0.58) .OuterOffset(0.78) .StartValue(700) .EndValue(1000) .FillStyle(gradient => { gradient.LinearGradient(0, 0.5, 1, 0.5) .ColorStops(stops => { stops.Add(0, "#FF3366"); stops.Add(1, "#B2183E"); }); }); }); }) .Render()%> </div> <br /> Labels Orientation: <select id="labelsOrientation"> <option selected="selected">circular</option> <option>radial</option> <option>horizontal</option> </select> <br /> <script type="text/javascript" lang="javascript"> $('#labelsOrientation').change(function (e) { var labelsOrientation = $('#labelsOrientation').val(); var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales'); scales[0].labels.orientation = labelsOrientation; $('#jqRadialGauge').jqRadialGauge('update'); }); </script> </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() .ID("jqRadialGauge") .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(100) .Maximum(1000) .StartAngle(140) .EndAngle(400) .Interval(100) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.8) .Length(12) .LineWidth(2); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.8) .Visible(true) .Length(8) .LineWidth(2) .Interval(20); }) .Labels(labels => { labels.Orientation(LabelsOrientation.Circular) .Offset(1) .Font("12px sans-serif"); }) .Needles(needles => { needles.RadialNeedle() .Value(650) .Type(RadialNeedleType.Pointer) .MediumOffset(0.66) .OuterOffset(0.76) .Width(10) .FillStyle("#252E32"); }) .Ranges(ranges => { // Range from 300 to 700 ranges.RadialRange() .InnerStartOffset(0.72) .InnerEndOffset(0.64) .OuterOffset(0.78) .StartValue(300) .EndValue(700) .FillStyle(gradient => { gradient.LinearGradient(0, 0.5, 1, 0.5) .ColorStops(stops => { stops.Add(0, "#C5F80B"); stops.Add(1, "#6B8901"); }); }); //Range from 700 to 1000 ranges.RadialRange() .InnerStartOffset(0.64) .InnerEndOffset(0.58) .OuterOffset(0.78) .StartValue(700) .EndValue(1000) .FillStyle(gradient => { gradient.LinearGradient(0, 0.5, 1, 0.5) .ColorStops(stops => { stops.Add(0, "#FF3366"); stops.Add(1, "#B2183E"); }); }); }); }) .Render() ) </div> <br /> Labels Orientation: <select id="labelsOrientation"> <option selected="selected">circular</option> <option>radial</option> <option>horizontal</option> </select> <br /> <script type="text/javascript" lang="javascript"> $('#labelsOrientation').change(function (e) { var labelsOrientation = $('#labelsOrientation').val(); var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales'); scales[0].labels.orientation = labelsOrientation; $('#jqRadialGauge').jqRadialGauge('update'); }); </script> </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 LabelsOrientation() { return View(); } } } |