This sample demonstrates how to specify radial gauge analog clock 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.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(true).Highlighting(false); }) .Scales(scales => { scales.RadialScale() .Minimum(0) .Maximum(12) .StartAngle(270) .EndAngle(630) .Interval(1) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.97) .LineWidth(3); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.98) .Visible(true) .Interval(0.2); }) .Labels(labels => { labels.ShowFirstLabel(false) .Font("14px sans-serif") .Offset(0.85) .Interval(1); }) .Needles(needles => { needles.RadialNeedle() .Value(1) .Type(RadialNeedleType.Pointer) .MediumOffset(0.4) .OuterOffset(0.5) .Width(12) .FillStyle("#252E32"); needles.RadialNeedle() .Value(6) .Type(RadialNeedleType.Pointer) .MediumOffset(0.6) .OuterOffset(0.8) .Width(12) .FillStyle("#252E32"); needles.RadialNeedle() .Value(10) .Type(RadialNeedleType.Line) .OuterOffset(0.8) .InnerOffset(-0.2) .LineWidth(3) .StrokeStyle("#B2183E"); }); }) .Render()%> <script lang="javascript" type="text/javascript"> function updateGauge() { var currentValues = getValidTime(); var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales'); scales[0].needles[0].value = currentValues.hours; scales[0].needles[1].value = currentValues.minutes; scales[0].needles[2].value = currentValues.seconds; $('#jqRadialGauge').jqRadialGauge('update'); setTimeout('updateGauge()', 1000); } function getValidTime() { var currentTime = new Date(); var hoursValue = currentTime.getHours(); var minutesValue = currentTime.getMinutes() / 5; var secondsValue = currentTime.getSeconds() / 5; if (hoursValue > 12) { hoursValue -= 12; } hoursValue += (minutesValue / 12 * 11) / 12; return { hours: hoursValue, minutes: minutesValue, seconds: secondsValue }; } $(document).ready(function () { $('#jqRadialGauge').bind('labelCreating', function (event, data) { switch (data.text) { case '1': data.text = 'I'; break; case '2': data.text = 'II'; break; case '3': data.text = 'III'; break; case '4': data.text = 'IV'; break; case '5': data.text = 'V'; break; case '6': data.text = 'VI'; break; case '7': data.text = 'VII'; break; case '8': data.text = 'VIII'; break; case '9': data.text = 'IX'; break; case '10': data.text = 'X'; break; case '11': data.text = 'XI'; break; case '12': data.text = 'XII'; break; } }); updateGauge(); }); </script> </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() .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(true).Highlighting(false); }) .Scales(scales => { scales.RadialScale() .Minimum(0) .Maximum(12) .StartAngle(270) .EndAngle(630) .Interval(1) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.97) .LineWidth(3); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.98) .Visible(true) .Interval(0.2); }) .Labels(labels => { labels.ShowFirstLabel(false) .Font("14px sans-serif") .Offset(0.85) .Interval(1); }) .Needles(needles => { needles.RadialNeedle() .Value(1) .Type(RadialNeedleType.Pointer) .MediumOffset(0.4) .OuterOffset(0.5) .Width(12) .FillStyle("#252E32"); needles.RadialNeedle() .Value(6) .Type(RadialNeedleType.Pointer) .MediumOffset(0.6) .OuterOffset(0.8) .Width(12) .FillStyle("#252E32"); needles.RadialNeedle() .Value(10) .Type(RadialNeedleType.Line) .OuterOffset(0.8) .InnerOffset(-0.2) .LineWidth(3) .StrokeStyle("#B2183E"); }); }) .Render() ) <script lang="javascript" type="text/javascript"> function updateGauge() { var currentValues = getValidTime(); var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales'); scales[0].needles[0].value = currentValues.hours; scales[0].needles[1].value = currentValues.minutes; scales[0].needles[2].value = currentValues.seconds; $('#jqRadialGauge').jqRadialGauge('update'); setTimeout('updateGauge()', 1000); } function getValidTime() { var currentTime = new Date(); var hoursValue = currentTime.getHours(); var minutesValue = currentTime.getMinutes() / 5; var secondsValue = currentTime.getSeconds() / 5; if (hoursValue > 12) { hoursValue -= 12; } hoursValue += (minutesValue / 12 * 11) / 12; return { hours: hoursValue, minutes: minutesValue, seconds: secondsValue }; } $(document).ready(function () { $('#jqRadialGauge').bind('labelCreating', function (event, data) { switch (data.text) { case '1': data.text = 'I'; break; case '2': data.text = 'II'; break; case '3': data.text = 'III'; break; case '4': data.text = 'IV'; break; case '5': data.text = 'V'; break; case '6': data.text = 'VI'; break; case '7': data.text = 'VII'; break; case '8': data.text = 'VIII'; break; case '9': data.text = 'IX'; break; case '10': data.text = 'X'; break; case '11': data.text = 'XI'; break; case '12': data.text = 'XII'; break; } }); updateGauge(); }); </script> </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 AnalogClock() { return View(); } } } |