This sample demonstrates how to specify nested radial gauge scales.
The largest scale shows the hours and minutes, while the upper right scale shows 24 hours based hour. The bottom scale shows the current seconds. Upper left scale could be used to display a chronograph minutes, and the largest red needle to display the chronograph seconds. For detailed implementation, please take a look at the HTML code tab. <%@ 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 => { // Clock scale scales.RadialScale() .Title("ClockScale") .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(0) .Type(RadialNeedleType.Line) .OuterOffset(0.8) .InnerOffset(-0.2) .LineWidth(3) .StrokeStyle("#B2183E"); }); // Seconds scale scales.RadialScale() .Title("SecondsScale") .Radius(50) .Minimum(0) .Maximum(60) .StartAngle(270) .EndAngle(630) .Interval(20) .Reversed(true) .VerticalCenterOffset(0.75) .ZIndex(2) .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"); }); }); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.6) .LineWidth(2) .Length(6) .Interval(10); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.66) .Visible(true) .Interval(1) .LineWidth(1) .Length(3); }) .Labels(labels => { labels.ShowFirstLabel(false) .Font("10px sans-serif") .Offset(0.45); }) .Needles(needles => { needles.RadialNeedle() .Value(1) .Type(RadialNeedleType.Pointer) .MediumOffset(0.5) .OuterOffset(0.6) .Width(3) .FillStyle("#252E32"); }); // Full day hours scale scales.RadialScale() .Title("FullDayHours") .Radius(60) .Minimum(0) .Maximum(24) .StartAngle(270) .EndAngle(630) .Interval(2) .Reversed(true) .VerticalCenterOffset(0.35) .HorizontalCenterOffset(0.7) .ZIndex(2) .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"); }); }); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.58) .LineWidth(2) .Length(8); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.66) .Visible(true) .Interval(1) .LineWidth(1) .Length(3); }) .Labels(labels => { labels.ShowFirstLabel(false) .Font("10px sans-serif") .Offset(0.4) .Interval(4); }) .Needles(needles => { needles.RadialNeedle() .Value(1) .Type(RadialNeedleType.Pointer) .MediumOffset(0.5) .OuterOffset(0.6) .Width(3) .FillStyle("#252E32"); }) .Ranges(ranges => { ranges.RadialRange() .InnerStartOffset(0.72) .InnerEndOffset(0.72) .OuterOffset(0.73) .LineWidth(0.2) .FillStyle("#252E32") .StartValue(0) .EndValue(24); ranges.RadialRange() .InnerStartOffset(0.64) .InnerEndOffset(0.64) .OuterOffset(0.64) .LineWidth(0.2) .FillStyle("#252E32") .StartValue(0) .EndValue(24); }); // Chronograph minutes scale scales.RadialScale() .Title("ChronographMinutes") .Radius(60) .Minimum(0) .Maximum(60) .StartAngle(270) .EndAngle(630) .Interval(10) .Reversed(true) .VerticalCenterOffset(0.35) .HorizontalCenterOffset(0.3) .ZIndex(2) .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"); }); }); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.58) .LineWidth(2) .Length(8); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.66) .Visible(true) .Interval(1) .LineWidth(1) .Length(3); }) .Labels(labels => { labels.ShowFirstLabel(false) .Font("10px sans-serif") .Offset(0.4); }) .Needles(needles => { needles.RadialNeedle() .Value(0) .Type(RadialNeedleType.Pointer) .MediumOffset(0.5) .OuterOffset(0.6) .Width(3) .FillStyle("#252E32"); }) .Ranges(ranges => { ranges.RadialRange() .InnerStartOffset(0.72) .InnerEndOffset(0.72) .OuterOffset(0.73) .LineWidth(0.2) .FillStyle("#252E32") .StartValue(0) .EndValue(60); ranges.RadialRange() .InnerStartOffset(0.64) .InnerEndOffset(0.64) .OuterOffset(0.64) .LineWidth(0.2) .FillStyle("#252E32") .StartValue(0) .EndValue(60); }); }) .Render()%> <script lang="javascript" type="text/javascript"> function updateGauge() { var currentValues = getValidTime(); var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales'); //Clock scales[0].needles[0].value = currentValues.hours; scales[0].needles[1].value = currentValues.minutes; //Seconds scales[1].needles[0].value = currentValues.seconds; //24 hour value scales[2].needles[0].value = currentValues.hoursFullDay; $('#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(); var hoursFullDay = currentTime.getHours(); if (hoursValue > 12) { hoursValue -= 12; } hoursValue += (minutesValue / 12 * 11) / 12; hoursFullDay += (minutesValue / 12 * 11) / 12; return { hours: hoursValue, minutes: minutesValue, seconds: secondsValue, hoursFullDay: hoursFullDay }; } $(document).ready(function () { $('#jqRadialGauge').bind('labelCreating', function (event, data) { if (data.context.scale.title === "ClockScale") { 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 => { // Clock scale scales.RadialScale() .Title("ClockScale") .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(0) .Type(RadialNeedleType.Line) .OuterOffset(0.8) .InnerOffset(-0.2) .LineWidth(3) .StrokeStyle("#B2183E"); }); // Seconds scale scales.RadialScale() .Title("SecondsScale") .Radius(50) .Minimum(0) .Maximum(60) .StartAngle(270) .EndAngle(630) .Interval(20) .Reversed(true) .VerticalCenterOffset(0.75) .ZIndex(2) .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"); }); }); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.6) .LineWidth(2) .Length(6) .Interval(10); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.66) .Visible(true) .Interval(1) .LineWidth(1) .Length(3); }) .Labels(labels => { labels.ShowFirstLabel(false) .Font("10px sans-serif") .Offset(0.45); }) .Needles(needles => { needles.RadialNeedle() .Value(1) .Type(RadialNeedleType.Pointer) .MediumOffset(0.5) .OuterOffset(0.6) .Width(3) .FillStyle("#252E32"); }); // Full day hours scale scales.RadialScale() .Title("FullDayHours") .Radius(60) .Minimum(0) .Maximum(24) .StartAngle(270) .EndAngle(630) .Interval(2) .Reversed(true) .VerticalCenterOffset(0.35) .HorizontalCenterOffset(0.7) .ZIndex(2) .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"); }); }); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.58) .LineWidth(2) .Length(8); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.66) .Visible(true) .Interval(1) .LineWidth(1) .Length(3); }) .Labels(labels => { labels.ShowFirstLabel(false) .Font("10px sans-serif") .Offset(0.4) .Interval(4); }) .Needles(needles => { needles.RadialNeedle() .Value(1) .Type(RadialNeedleType.Pointer) .MediumOffset(0.5) .OuterOffset(0.6) .Width(3) .FillStyle("#252E32"); }) .Ranges(ranges => { ranges.RadialRange() .InnerStartOffset(0.72) .InnerEndOffset(0.72) .OuterOffset(0.73) .LineWidth(0.2) .FillStyle("#252E32") .StartValue(0) .EndValue(24); ranges.RadialRange() .InnerStartOffset(0.64) .InnerEndOffset(0.64) .OuterOffset(0.64) .LineWidth(0.2) .FillStyle("#252E32") .StartValue(0) .EndValue(24); }); // Chronograph minutes scale scales.RadialScale() .Title("ChronographMinutes") .Radius(60) .Minimum(0) .Maximum(60) .StartAngle(270) .EndAngle(630) .Interval(10) .Reversed(true) .VerticalCenterOffset(0.35) .HorizontalCenterOffset(0.3) .ZIndex(2) .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"); }); }); }) .MajorTickMarks(majorTickMarks => { majorTickMarks.Offset(0.58) .LineWidth(2) .Length(8); }) .MinorTickMarks(minorTickMarks => { minorTickMarks.Offset(0.66) .Visible(true) .Interval(1) .LineWidth(1) .Length(3); }) .Labels(labels => { labels.ShowFirstLabel(false) .Font("10px sans-serif") .Offset(0.4); }) .Needles(needles => { needles.RadialNeedle() .Value(0) .Type(RadialNeedleType.Pointer) .MediumOffset(0.5) .OuterOffset(0.6) .Width(3) .FillStyle("#252E32"); }) .Ranges(ranges => { ranges.RadialRange() .InnerStartOffset(0.72) .InnerEndOffset(0.72) .OuterOffset(0.73) .LineWidth(0.2) .FillStyle("#252E32") .StartValue(0) .EndValue(60); ranges.RadialRange() .InnerStartOffset(0.64) .InnerEndOffset(0.64) .OuterOffset(0.64) .LineWidth(0.2) .FillStyle("#252E32") .StartValue(0) .EndValue(60); }); }) .Render() ) <script lang="javascript" type="text/javascript"> function updateGauge() { var currentValues = getValidTime(); var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales'); //Clock scales[0].needles[0].value = currentValues.hours; scales[0].needles[1].value = currentValues.minutes; //Seconds scales[1].needles[0].value = currentValues.seconds; //24 hour value scales[2].needles[0].value = currentValues.hoursFullDay; $('#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(); var hoursFullDay = currentTime.getHours(); if (hoursValue > 12) { hoursValue -= 12; } hoursValue += (minutesValue / 12 * 11) / 12; hoursFullDay += (minutesValue / 12 * 11) / 12; return { hours: hoursValue, minutes: minutesValue, seconds: secondsValue, hoursFullDay: hoursFullDay }; } $(document).ready(function () { $('#jqRadialGauge').bind('labelCreating', function (event, data) { if (data.context.scale.title === "ClockScale") { 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 NestedScales() { return View(); } } } |