|
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();
}
}
}
|
Follow us on Twitter