|
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.
<!DOCTYPE html>
<html>
<head>
<title>
Nested Scales Example - HTML5 jQuery Radial Gauge Plugin by jqChart
</title>
<link rel="stylesheet" type="text/css" href="../../css/jquery.jqGauges.css" />
<script src="../../js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="../../js/jquery.jqGauges.min.js" type="text/javascript"></script>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
var anchorGradient = {
type: 'radialGradient',
x0: 0.35,
y0: 0.35,
r0: 0.0,
x1: 0.35,
y1: 0.35,
r1: 1,
colorStops: [{ offset: 0, color: '#4F6169' },
{ offset: 1, color: '#252E32'}]
};
$('#jqRadialGauge').jqRadialGauge({
background: '#F7F7F7',
border: {
lineWidth: 8,
strokeStyle: '#76786A',
padding: 10
},
shadows: {
enabled: true
},
anchor: {
visible: true,
fillStyle: anchorGradient
},
tooltips: {
disabled: true,
highlighting: false
},
annotations: [
{
text: 'Nested scales',
horizontalOffset: 0.5,
verticalOffset: 0.2,
font: '16px sans-serif'
}
],
scales: [
{
name: 'clockScale',
minimum: 0,
maximum: 12,
interval: 1,
startAngle: 270,
endAngle: 630,
zIndex: 3,
labels: {
offset: 0.85,
showFirstLabel: false,
font: '14px sans-serif'
},
minorTickMarks: {
visible: true,
interval: 0.2,
offset: 0.98
},
majorTickMarks: {
lineWidth: 3,
offset: 0.97
},
needles: [
{
value: 1,
type: 'pointer',
outerOffset: 0.5,
mediumOffset: 0.4,
width: 12,
fillStyle: '#252E32'
},
{
value: 6,
type: 'pointer',
outerOffset: 0.8,
mediumOffset: 0.6,
width: 12,
fillStyle: '#252E32'
},
{
value: 0,
type: 'line',
outerOffset: 0.8,
innerOffset: -0.2,
lineWidth: 3,
strokeStyle: '#B2183E'
}
]
},
{
name: 'secondsScale',
radius: 50,
mininum: 0,
maximum: 60,
startAngle: 270,
endAngle: 630,
isReversed: true,
interval: 20,
vCenterOffset: 0.75,
zIndex: 2,
anchor: {
visible: true,
radius: 0.1,
fillStyle: anchorGradient
},
labels: {
offset: 0.45,
showFirstLabel: false,
font: '10px sans-serif'
},
majorTickMarks: {
lineWidth: 2,
offset: 0.6,
length: 6,
interval: 10
},
minorTickMarks: {
visible: true,
interval: 1,
lineWidth: 1,
offset: 0.66,
length: 3
},
needles: [
{
value: 1,
type: 'pointer',
outerOffset: 0.6,
mediumOffset: 0.5,
width: 3,
fillStyle: '#252E32'
},
]
},
{
name: 'fullDayHours',
radius: 60,
mininum: 1,
maximum: 24,
startAngle: 270,
endAngle: 630,
isReversed: true,
interval: 2,
vCenterOffset: 0.35,
hCenterOffset: 0.7,
zIndex: 2,
anchor: {
visible: true,
radius: 0.1,
fillStyle: anchorGradient
},
labels: {
offset: 0.4,
showFirstLabel: false,
interval: 4,
font: '10px sans-serif'
},
majorTickMarks: {
lineWidth: 2,
offset: 0.58,
length: 8,
interval: 2
},
minorTickMarks: {
visible: true,
interval: 1,
lineWidth: 1,
offset: 0.66,
length: 3
},
needles: [
{
value: 1,
type: 'pointer',
outerOffset: 0.6,
mediumOffset: 0.5,
width: 3,
fillStyle: '#252E32'
}
],
ranges: [
{
innerStartOffset: 0.72,
innerEndOffset: 0.72,
outerOffset: 0.73,
lineWidth: 0.2,
fillStyle: '#252E32',
startValue:0,
endValue: 24
},
{
innerStartOffset: 0.64,
innerEndOffset: 0.64,
outerOffset: 0.64,
lineWidth: 0.2,
fillStyle: '#252E32',
startValue:0,
endValue: 24
}
]
},
{
name: 'chronographMinutes',
radius: 60,
mininum: 0,
maximum: 60,
startAngle: 270,
endAngle: 630,
isReversed: true,
interval: 10,
vCenterOffset: 0.35,
hCenterOffset: 0.3,
zIndex: 2,
anchor: {
visible: true,
radius: 0.1,
fillStyle: anchorGradient
},
labels: {
offset: 0.4,
showFirstLabel: false,
font: '10px sans-serif'
},
majorTickMarks: {
lineWidth: 2,
offset: 0.58,
length: 8
},
minorTickMarks: {
visible: true,
interval: 1,
lineWidth: 1,
offset: 0.66,
length: 3
},
needles: [
{
value: 0,
type: 'pointer',
outerOffset: 0.6,
mediumOffset: 0.5,
width: 3,
fillStyle: '#252E32'
}
],
ranges: [
{
innerStartOffset: 0.72,
innerEndOffset: 0.72,
outerOffset: 0.73,
lineWidth: 0.2,
fillStyle: '#252E32',
startValue:0,
endValue: 60
},
{
innerStartOffset: 0.64,
innerEndOffset: 0.64,
outerOffset: 0.64,
lineWidth: 0.2,
fillStyle: '#252E32',
startValue:0,
endValue: 60
}
]
}
]
});
$('#jqRadialGauge').bind('labelCreating', function (event, data) {
if (data.context.scale.name === '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();
});
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
};
}
</script>
</head>
<body>
<div>
<div id="jqRadialGauge" style="width: 350px; height: 350px;">
</div>
</div>
</body>
</html>
|
Follow us on Twitter