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