This sample demonstrates how to specify multiple linear gauge scales.
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.JQLinearGauge().LinearGauge() .ID("jqLinearGauge") .Orientation(GaugeOrientation.Vertical) .Background("#F7F7F7") .Width(150) .Height(400) .Border(border => { border.LineWidth(4) .StrokeStyle("#76786A") .Padding(10); }) .Shadows(true) .Tooltips(tooltips => { tooltips.Disabled(true).Highlighting(false); }) .Animation(new TimeSpan(0,0,1)) .Scales(scales => { scales.LinearScale() .Minimum(-30) .Maximum(50) .Interval(10) .Margin(margin => { margin.Top(6) .Left(0) .Right(0) .Bottom(26); }) .Labels(labels => { labels.Offset(0.2) .Font("14px sans-serif") .HorizontalAlignment(HorizontalAlignment.Right); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.25) .Length(15) .Interval(5); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.31) .Visible(true) .Interval(1); }) .BarMarkers(barMarkers => { barMarkers.LinearBarMarker() .Value(18) .InnerOffset(0.39) .OuterOffset(0.58) .ZIndex(5) .FillStyle(gradient => { gradient.LinearGradient(0, 0, 1, 0) .ColorStops(colorStops => { colorStops.Add(0, "#B2183E"); colorStops.Add(0.42, "#FF3366"); colorStops.Add(0.48, "#FF3366"); colorStops.Add(1, "#B2183E"); }); }); }) .Ranges(ranges => { ranges.LinearRange() .StartValue(-30) .EndValue(50) .FillStyle(System.Drawing.Color.Black) .InnerOffset(0.38) .OuterStartOffset(0.39) .OuterEndOffset(0.39); }) .Needles(needles => { needles.LinearNeedle() .Type(NeedleType.Ellipse) .LineWidth(1) .StrokeStyle(System.Drawing.Color.Black) .Value(-33) .Width(34) .Height(34) .InnerOffset(0.335) .FillStyle(gradient => { gradient.RadialGradient(0.45, 0.45, 0, 0.45, 0.45, 1) .ColorStops(colorStops => { colorStops.Add(0, "#FF3366"); colorStops.Add(1, "#B2183E"); }); }); }); scales.LinearScale() .Minimum(-22) .Maximum(122) .Interval(20) .Margin(margin => { margin.Top(6) .Left(0) .Right(0) .Bottom(26); }) .Labels(labels => { labels.Offset(0.78) .Font("14px sans-serif") .HorizontalAlignment(HorizontalAlignment.Left); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.6) .Length(15) .Interval(10); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.6) .Visible(true) .Interval(2); }) .Ranges(ranges => { ranges.LinearRange() .StartValue(-22) .EndValue(122) .FillStyle(System.Drawing.Color.Black) .InnerOffset(0.58) .OuterStartOffset(0.59) .OuterEndOffset(0.59); }); }) .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.JQLinearGauge().LinearGauge() .ID("jqLinearGauge") .Orientation(GaugeOrientation.Vertical) .Background("#F7F7F7") .Width(150) .Height(400) .Border(border => { border.LineWidth(4) .StrokeStyle("#76786A") .Padding(10); }) .Shadows(true) .Tooltips(tooltips => { tooltips.Disabled(true).Highlighting(false); }) .Animation(new TimeSpan(0,0,1)) .Scales(scales => { scales.LinearScale() .Minimum(-30) .Maximum(50) .Interval(10) .Margin(margin => { margin.Top(6) .Left(0) .Right(0) .Bottom(26); }) .Labels(labels => { labels.Offset(0.2) .Font("14px sans-serif") .HorizontalAlignment(HorizontalAlignment.Right); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.25) .Length(15) .Interval(5); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.31) .Visible(true) .Interval(1); }) .BarMarkers(barMarkers => { barMarkers.LinearBarMarker() .Value(18) .InnerOffset(0.39) .OuterOffset(0.58) .ZIndex(5) .FillStyle(gradient => { gradient.LinearGradient(0, 0, 1, 0) .ColorStops(colorStops => { colorStops.Add(0, "#B2183E"); colorStops.Add(0.42, "#FF3366"); colorStops.Add(0.48, "#FF3366"); colorStops.Add(1, "#B2183E"); }); }); }) .Ranges(ranges => { ranges.LinearRange() .StartValue(-30) .EndValue(50) .FillStyle(System.Drawing.Color.Black) .InnerOffset(0.38) .OuterStartOffset(0.39) .OuterEndOffset(0.39); }) .Needles(needles => { needles.LinearNeedle() .Type(NeedleType.Ellipse) .LineWidth(1) .StrokeStyle(System.Drawing.Color.Black) .Value(-33) .Width(34) .Height(34) .InnerOffset(0.335) .FillStyle(gradient => { gradient.RadialGradient(0.45, 0.45, 0, 0.45, 0.45, 1) .ColorStops(colorStops => { colorStops.Add(0, "#FF3366"); colorStops.Add(1, "#B2183E"); }); }); }); scales.LinearScale() .Minimum(-22) .Maximum(122) .Interval(20) .Margin(margin => { margin.Top(6) .Left(0) .Right(0) .Bottom(26); }) .Labels(labels => { labels.Offset(0.78) .Font("14px sans-serif") .HorizontalAlignment(HorizontalAlignment.Left); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.6) .Length(15) .Interval(10); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.6) .Visible(true) .Interval(2); }) .Ranges(ranges => { ranges.LinearRange() .StartValue(-22) .EndValue(122) .FillStyle(System.Drawing.Color.Black) .InnerOffset(0.58) .OuterStartOffset(0.59) .OuterEndOffset(0.59); }); }) .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 MultipleScales() { return View(); } } } |