This sample demonstrates how to specify horizontal linear gauge.
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") .Background("#F7F7F7") .Width(400) .Height(100) .Border(border => { border.LineWidth(4) .StrokeStyle("#76786A") .Padding(10); }) .Shadows(true) .Tooltips(tooltips => { tooltips.Disabled(false).Highlighting(true); }) .Animation(new TimeSpan(0,0,1)) .Scales(scales => { scales.LinearScale() .Minimum(0) .Maximum(100) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.28) .Length(10) .LineWidth(2); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.32) .Visible(true) .Length(6) .LineWidth(2) .Interval(2); }) .Labels(labels => { labels.Offset(0.16); }) .Needles(needles => { needles.LinearNeedle() .Value(80) .Type(NeedleType.Pointer) .InnerOffset(0.5) .OuterOffset(1).FillStyle(gradient => { gradient.LinearGradient(0.5, 0, 0.5, 1) .ColorStops(colorStops => { colorStops.Add(0, "#4F6169"); colorStops.Add(1, "#252E32"); }); }); }) .Ranges(ranges => { // Range from 0 to 40 ranges.LinearRange() .ZIndex(3) .InnerOffset(0.46) .OuterStartOffset(0.64) .OuterEndOffset(0.75) .StartValue(0) .EndValue(40) .FillStyle(gradient => { gradient.LinearGradient(0.5, 0, 0.5, 1).ColorStops(stops => { stops.Add(0, "#C5F80B"); stops.Add(1, "#6B8901"); }); }); //Range from 40 to 70 ranges.LinearRange() .ZIndex(3) .InnerOffset(0.46) .OuterStartOffset(0.75) .OuterEndOffset(0.84) .StartValue(40) .EndValue(70) .FillStyle(gradient => { gradient.LinearGradient(0.5, 0, 0.5, 1).ColorStops(stops => { stops.Add(0, "#FF3366"); stops.Add(1, "#B2183E"); }); }); //Range from 70 to 100 ranges.LinearRange() .ZIndex(3) .InnerOffset(0.46) .OuterStartOffset(0.84) .OuterEndOffset(0.90) .StartValue(70) .EndValue(100) .FillStyle(gradient => { gradient.LinearGradient(0.5, 0, 0.5, 1).ColorStops(stops => { stops.Add(0, "#339CFF"); stops.Add(1, "#1F66A8"); }); }); }); }) .Render()%> </div> <script lang="javascript" type="text/javascript"> $('#jqLinearGauge').bind('tooltipFormat', function (e, data) { var tooltip = '<b>Element: ' + data.elementType + '</b> ' + '<br />'; switch (data.elementType) { case 'needle': tooltip += 'Value: ' + data.value; break; case 'range': tooltip += 'Start Value: ' + data.startValue + '<br/>End Value: ' + data.endValue; } return tooltip; }); </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.JQLinearGauge().LinearGauge() .ID("jqLinearGauge") .Background("#F7F7F7") .Width(400) .Height(100) .Border(border => { border.LineWidth(4) .StrokeStyle("#76786A") .Padding(10); }) .Shadows(true) .Tooltips(tooltips => { tooltips.Disabled(false).Highlighting(true); }) .Animation(new TimeSpan(0,0,1)) .Scales(scales => { scales.LinearScale() .Minimum(0) .Maximum(100) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.28) .Length(10) .LineWidth(2); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.32) .Visible(true) .Length(6) .LineWidth(2) .Interval(2); }) .Labels(labels => { labels.Offset(0.16); }) .Needles(needles => { needles.LinearNeedle() .Value(80) .Type(NeedleType.Pointer) .InnerOffset(0.5) .OuterOffset(1).FillStyle(gradient => { gradient.LinearGradient(0.5, 0, 0.5, 1) .ColorStops(colorStops => { colorStops.Add(0, "#4F6169"); colorStops.Add(1, "#252E32"); }); }); }) .Ranges(ranges => { // Range from 0 to 40 ranges.LinearRange() .ZIndex(3) .InnerOffset(0.46) .OuterStartOffset(0.64) .OuterEndOffset(0.75) .StartValue(0) .EndValue(40) .FillStyle(gradient => { gradient.LinearGradient(0.5, 0, 0.5, 1).ColorStops(stops => { stops.Add(0, "#C5F80B"); stops.Add(1, "#6B8901"); }); }); //Range from 40 to 70 ranges.LinearRange() .ZIndex(3) .InnerOffset(0.46) .OuterStartOffset(0.75) .OuterEndOffset(0.84) .StartValue(40) .EndValue(70) .FillStyle(gradient => { gradient.LinearGradient(0.5, 0, 0.5, 1).ColorStops(stops => { stops.Add(0, "#FF3366"); stops.Add(1, "#B2183E"); }); }); //Range from 70 to 100 ranges.LinearRange() .ZIndex(3) .InnerOffset(0.46) .OuterStartOffset(0.84) .OuterEndOffset(0.90) .StartValue(70) .EndValue(100) .FillStyle(gradient => { gradient.LinearGradient(0.5, 0, 0.5, 1).ColorStops(stops => { stops.Add(0, "#339CFF"); stops.Add(1, "#1F66A8"); }); }); }); }) .Render() ) </div> <script lang="javascript" type="text/javascript"> $('#jqLinearGauge').bind('tooltipFormat', function (e, data) { var tooltip = '<b>Element: ' + data.elementType + '</b> ' + '<br />'; switch (data.elementType) { case 'needle': tooltip += 'Value: ' + data.value; break; case 'range': tooltip += 'Start Value: ' + data.startValue + '<br/>End Value: ' + data.endValue; } return tooltip; }); </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 HorizontalGauge() { return View(); } } } |