- Chart Gallery
- Circular Gauges
- Analog Watch
Analog Watch
{
"gauge": {
"zIndex": 0,
"enabled": true,
"type": "circular-gauge",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 20,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#757575",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Analog Watch\nwith Anychart",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 20,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"title": {
"zIndex": 1,
"enabled": false,
"maxLength": null,
"fontSize": 14,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#616161",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": false,
"fill": {
"color": "#9e9e9e",
"opacity": 0.4
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 10,
"bottom": 10,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 30,
"top": 30,
"bottom": 30,
"right": 30
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"chartLabels": [
{
"zIndex": 10,
"enabled": true,
"fontSize": 23,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#64B5F6",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "right",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"text": "6/4",
"position": "left-top",
"width": "12%",
"height": "7%",
"anchor": "center",
"offsetX": 90,
"offsetY": "64%",
"rotation": 0,
"adjustFontSize": {
"width": true,
"height": true
},
"minFontSize": 8,
"maxFontSize": 72,
"background": {
"zIndex": 0,
"enabled": true,
"fill": "#fff",
"stroke": {
"color": "#E0F0FD",
"thickness": 1
}
},
"padding": {
"left": 5,
"top": 3,
"bottom": 3,
"right": 5
}
},
{
"zIndex": 10,
"enabled": true,
"fontSize": 23,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#757575",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"text": "<span style=\"color: #D0E9FC\">AnyChart</span><br><span style=\"color: #E0F0FD\">TIME</span>",
"position": "left-top",
"width": "40%",
"height": "12%",
"anchor": "center-bottom",
"offsetX": 0,
"offsetY": "15%",
"rotation": 0,
"adjustFontSize": {
"width": true,
"height": true
},
"minFontSize": 8,
"maxFontSize": 72,
"background": {
"enabled": false
},
"padding": {}
}
],
"bounds": {},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "AnyChart",
"url": "https://www.anychart.com/?utm_source=registered",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://static.anychart.com/logo.png",
"enabled": false
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"fill": "#ffffff",
"stroke": {
"color": "#B9B9B9",
"thickness": 2
},
"startAngle": 0,
"circularPadding": "10%",
"encloseWithStraightLine": false,
"sweepAngle": 360,
"defaultPointerType": "needle",
"data": [
5,
44,
37
],
"cap": {
"zIndex": 50,
"enabled": true,
"radius": "5%",
"stroke": "none",
"fill": "#545f69",
"hatchFill": "none"
},
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "single",
"selectionMode": "multi-select"
},
"axes": [
{
"zIndex": 10,
"enabled": true,
"fill": "none",
"overlapMode": "no-overlap",
"startAngle": null,
"width": "1%",
"radius": "103%",
"cornersRounding": "0%",
"drawFirstLabel": true,
"drawLastLabel": true,
"scale": {
"type": "linear",
"inverted": false,
"maximum": 12,
"minimum": 0,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 1
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 1
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
},
"ticks": {
"zIndex": 10,
"enabled": false,
"length": null,
"type": "line",
"stroke": "none",
"fill": "#545f69",
"hatchFill": "none",
"position": "center"
},
"minorTicks": {
"zIndex": 10,
"enabled": false,
"length": null,
"type": "line",
"stroke": "none",
"fill": "#545f69",
"hatchFill": "none",
"position": "center"
},
"labels": {
"zIndex": 10.00004,
"enabled": true,
"padding": {
"left": 5,
"top": 5,
"bottom": 5,
"right": 5
},
"fontSize": 20,
"position": "inside",
"anchor": "center"
},
"minorLabels": {
"zIndex": 10.00004,
"enabled": false
}
},
{
"zIndex": 10,
"enabled": true,
"fill": "#F0F8FE",
"overlapMode": "no-overlap",
"startAngle": null,
"width": "3%",
"radius": "107%",
"cornersRounding": "0%",
"drawFirstLabel": true,
"drawLastLabel": true,
"scale": {
"type": "linear",
"inverted": false,
"maximum": 60,
"minimum": 0,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 5
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 1
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
},
"ticks": {
"zIndex": 10,
"enabled": true,
"length": "10%",
"stroke": {
"color": "#545f69",
"thickness": 2
},
"fill": "#545f69",
"hatchFill": "none",
"position": "center"
},
"minorTicks": {
"zIndex": 10,
"enabled": true,
"length": "5%",
"stroke": {
"color": "#7c868e",
"thickness": 1.4
},
"fill": "#545f69",
"hatchFill": "none",
"position": "center"
},
"labels": {
"zIndex": 10.00004,
"enabled": false
},
"minorLabels": {
"zIndex": 10.00004,
"enabled": false
}
}
],
"pointers": [
{
"zIndex": 40,
"enabled": true,
"stroke": "none",
"fill": "#545f69",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "needle",
"startWidth": "2%",
"startRadius": "6%",
"middleWidth": "2%",
"endWidth": "2%",
"endRadius": "55%"
},
{
"zIndex": 40.0001,
"enabled": true,
"stroke": "none",
"fill": "#545f69",
"hatchFill": "none",
"axisIndex": 1,
"pointerType": "needle",
"startWidth": "1%",
"startRadius": "6%",
"middleWidth": "1%",
"endWidth": "1%",
"endRadius": "80%"
},
{
"zIndex": 40.0002,
"enabled": true,
"stroke": "none",
"fill": "#B9B9B9",
"hatchFill": "none",
"axisIndex": 1,
"pointerType": "needle",
"startWidth": "0.5%",
"startRadius": "6%",
"middleWidth": "0.5%",
"endWidth": "0.5%",
"endRadius": "85%"
}
]
}
}
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-circular-gauge.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/themes/sea.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var labelDate;
var colorAxisFont = '#7c868e';
var darkAccentColor = '#545f69';
var darkAxisColor = '#B9B9B9';
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('sea');
var gauge = anychart.gauges.circular();
gauge.title('Analog Watch\nwith Anychart');
gauge.title().fontSize(20).hAlign('center').padding(0, 0, 20, 0);
gauge
.fill('#ffffff')
.stroke('2 #B9B9B9')
.padding(0)
.margin(30)
.startAngle(0)
.sweepAngle(360);
labelDate = gauge.label();
labelDate
.text(2)
.fontColor('#64B5F6')
.anchor('center')
.zIndex(10)
.offsetY('64%')
.offsetX(90)
.padding(3, 5)
.width('12%')
.height('7%')
.hAlign('right')
.adjustFontSize(true)
.zIndex(10)
.background({
fill: '#fff',
stroke: { thickness: 1, color: '#E0F0FD' }
});
var nameLabel = gauge.label(1);
nameLabel
.text(
'<span style="color: #D0E9FC">AnyChart</span><br>' +
'<span style="color: #E0F0FD">TIME</span>'
)
.useHtml(true)
.width('40%')
.height('12%')
.hAlign('center')
.anchor('center-bottom')
.adjustFontSize(true)
.zIndex(10)
.offsetY('15%');
function getTime() {
var now = new Date();
var seconds = now.getSeconds() + now.getMilliseconds() / 1000;
var minutes = now.getMinutes() + seconds / 60;
var hours = (now.getHours() % 12) + minutes / 60;
labelDate.text(now.getUTCDate() + '/' + (now.getUTCMonth() + 1));
return [Math.floor(hours), Math.floor(minutes), Math.floor(seconds)];
}
gauge.data(getTime());
setInterval(function () {
gauge.data(getTime());
}, 1000);
var hoursAxis = gauge.axis();
hoursAxis.fill(null).radius(103).width(1);
hoursAxis
.labels()
.fontSize(20)
.padding(5)
.position('inside')
.anchor('center')
.format(function () {
if (this.value === 0) return 'XII';
if (this.value === 1) return 'I';
if (this.value === 2) return 'II';
if (this.value === 3) return 'III';
if (this.value === 4) return 'IIV';
if (this.value === 5) return 'V';
if (this.value === 6) return 'VI';
if (this.value === 7) return 'VII';
if (this.value === 8) return 'VIII';
if (this.value === 9) return 'IX';
if (this.value === 10) return 'X';
if (this.value === 11) return 'XI';
return this.value;
});
hoursAxis
.scale()
.minimum(0)
.maximum(12)
.ticks({ interval: 1 })
.minorTicks({ interval: 1 });
hoursAxis.ticks().enabled(false);
hoursAxis.minorTicks().enabled(false);
var minuteAxis = gauge.axis(1);
minuteAxis.radius(107).fill(null).width(3).fill('#F0F8FE');
minuteAxis.labels().enabled(false);
minuteAxis
.scale()
.minimum(0)
.maximum(60)
.ticks({ interval: 5 })
.minorTicks({ interval: 1 });
minuteAxis
.ticks()
.enabled(true)
.length(10)
.stroke('2 ' + darkAccentColor)
.position('center')
.type(function (path, x, y, radius) {
path
.moveTo(x, y - radius / 2)
.lineTo(x, y + radius / 2)
.close();
return path;
});
minuteAxis
.minorTicks()
.enabled(true)
.length(5)
.stroke('1.4 ' + colorAxisFont)
.position('center')
.type(function (path, x, y, radius) {
path
.moveTo(x, y - radius / 2)
.lineTo(x, y + radius / 2)
.close();
return path;
});
gauge
.needle()
.fill(darkAccentColor)
.stroke(null)
.startRadius('6%')
.endRadius('55%')
.startWidth('2%')
.middleWidth('2%')
.endWidth('2%');
gauge
.needle(1)
.fill(darkAccentColor)
.stroke(null)
.axisIndex(1)
.startRadius('6%')
.endRadius('80%')
.startWidth('1%')
.middleWidth('1%')
.endWidth('1%');
gauge
.needle(2)
.fill(darkAxisColor)
.stroke(null)
.startRadius('6%')
.endRadius('85%')
.startWidth('0.5%')
.middleWidth('0.5%')
.axisIndex(1)
.endWidth('0.5%');
gauge
.cap()
.radius('5%')
.enabled(true)
.fill(darkAccentColor)
.stroke(null);
gauge.container('container');
gauge.draw();
});
</script>
</body>
</html>
This Gauge is an electronic simulator of the analog watch. It has two axes: one holds the Roman numerals and the second is responsible for major and minor ticks, forming the timescale. The chart itself has an outer stroke
In the center of the clock face there is a knob connecting three arrows (hours, minutes, seconds), Above the knob there is the watch's name written - ”AnyChart TIME”. The clock hands (needles) are moving, depending on the time defined on the user’s computer. There is an aperture to the right from the knob showing the date.