This sample demonstrates how to customize the major and minor tick marks appearance.
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.JQBulletGraph().BulletGraph() .Orientation(GaugeOrientation.Horizontal) .Width(400) .Height(80) .Border(border => { border.LineWidth(0); }) .Tooltips(tooltips => { tooltips.Disabled(false).Highlighting(false); }) .Animation(new TimeSpan(0,0,1)) .QuantitativeScale(scale => { scale.Minimum(0) .Maximum(100) .Title("Main Scale") .Background(gradient => { gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops => { colorStops.Add(0, "#A4D020"); colorStops.Add(1, "#BFFE01"); }); }) .Labels(labels => { labels.Offset(0.95); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.EdgeAlignment(EdgeAlignment.Inside).Length(14).LineWidth(4).StrokeStyle("#B2183E"); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Visible(true).EdgeAlignment(EdgeAlignment.Inside).Length(6).Interval(2).LineWidth(2).StrokeStyle("#B2183E"); }) .QualitativeRanges(ranges => { ranges.QualitativeRange() .Value(47) .FillStyle(gradient => { gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops => { colorStops.Add(0, "#61B603"); colorStops.Add(1, "#448100"); }); }); ranges.QualitativeRange() .Value(70) .FillStyle(gradient => { gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops => { colorStops.Add(0, "#87B202"); colorStops.Add(1, "#A6DC01"); }); }); }); }) .ComparativeMeasures(comparativeMeasures => { comparativeMeasures.ComparativeMeasure() .Title("Comparative Measure") .Value(80) .FillStyle(gradient => { gradient.LinearGradient(0, 0, 1, 0).ColorStops(colorStops => { colorStops.Add(0, "#E4E4E4"); colorStops.Add(0.552, "#FFFFFF"); }); }); }) .FeaturedMeasures(featuredMeasures => { featuredMeasures.FeaturedMeasure() .Title("Featured Measure") .Value(90) .InnerOffset(0.4) .OuterOffset(0.6) .FillStyle(gradient => { gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops => { colorStops.Add(0, "#BABABA"); colorStops.Add(0.495, "#FFFFFF"); }); }); }) .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.JQBulletGraph().BulletGraph() .Orientation(GaugeOrientation.Horizontal) .Width(400) .Height(80) .Border(border => { border.LineWidth(0); }) .Tooltips(tooltips => { tooltips.Disabled(false).Highlighting(false); }) .Animation(new TimeSpan(0,0,1)) .QuantitativeScale(scale => { scale.Minimum(0) .Maximum(100) .Title("Main Scale") .Background(gradient => { gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops => { colorStops.Add(0, "#A4D020"); colorStops.Add(1, "#BFFE01"); }); }) .Labels(labels => { labels.Offset(0.95); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.EdgeAlignment(EdgeAlignment.Inside).Length(14).LineWidth(4).StrokeStyle("#B2183E"); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Visible(true).EdgeAlignment(EdgeAlignment.Inside).Length(6).Interval(2).LineWidth(2).StrokeStyle("#B2183E"); }) .QualitativeRanges(ranges => { ranges.QualitativeRange() .Value(47) .FillStyle(gradient => { gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops => { colorStops.Add(0, "#61B603"); colorStops.Add(1, "#448100"); }); }); ranges.QualitativeRange() .Value(70) .FillStyle(gradient => { gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops => { colorStops.Add(0, "#87B202"); colorStops.Add(1, "#A6DC01"); }); }); }); }) .ComparativeMeasures(comparativeMeasures => { comparativeMeasures.ComparativeMeasure() .Title("Comparative Measure") .Value(80) .FillStyle(gradient => { gradient.LinearGradient(0, 0, 1, 0).ColorStops(colorStops => { colorStops.Add(0, "#E4E4E4"); colorStops.Add(0.552, "#FFFFFF"); }); }); }) .FeaturedMeasures(featuredMeasures => { featuredMeasures.FeaturedMeasure() .Title("Featured Measure") .Value(90) .InnerOffset(0.4) .OuterOffset(0.6) .FillStyle(gradient => { gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops => { colorStops.Add(0, "#BABABA"); colorStops.Add(0.495, "#FFFFFF"); }); }); }) .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 HorizontalBulletGraph() { return View(); } } } |