communityhallv22/target/classes/static/assets/node_modules/amcharts3/samples/clockWithTwoFaces.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../amcharts/amcharts.js" type="text/javascript"></script>
        <script src="../amcharts/gauge.js" type="text/javascript"></script>

        <script>

			var chart;
			var sArrow;
			var mArrow;
			var hArrow;
			var axis;

			AmCharts.ready(function () {
				// clock is just an angular gauge with three arrows
				chart = new AmCharts.AmAngularGauge();
				chart.startDuration = 0.3;

				// main face
				axis = new AmCharts.GaugeAxis();
				axis.startValue = 0;
				axis.endValue = 12;
				axis.valueInterval = 1;
				axis.minorTickInterval = 0.2;
				axis.showFirstLabel = false;
				axis.startAngle = 0;
				axis.endAngle = 360;
				axis.axisAlpha = 0.3;
				chart.addAxis(axis);

				// seconds face
				var axis2 = new AmCharts.GaugeAxis();
				axis2.startValue = 0;
				axis2.endValue = 60;
				axis2.valueInterval = 15;
				axis2.minorTickInterval = 1;
				axis2.showFirstLabel = false;
				axis2.startAngle = 0;
				axis2.endAngle = 360;
				axis2.radius = 40;
				axis2.centerY = 80;
				axis2.inside = false;
				axis2.axisAlpha = 0.3;
				chart.addAxis(axis2);

				// hour arrow
				hArrow = new AmCharts.GaugeArrow();
				hArrow.radius = "50%";
				hArrow.clockWiseOnly = true;

				// minutes arrow
				mArrow = new AmCharts.GaugeArrow();
				mArrow.radius = "90%";
				mArrow.startWidth = 6;
				mArrow.nailRadius = 0;
				mArrow.clockWiseOnly = true;

				// seconds arrow
				sArrow = new AmCharts.GaugeArrow();
				sArrow.axis = axis2; // this arrow uses different axis
				sArrow.startWidth = 3;
				sArrow.nailRadius = 4;
				sArrow.color = "#CC0000";
				sArrow.clockWiseOnly = true;


				// update clock before adding arrows to avoid initial animation
				updateClock();

				// add arrows
				chart.addArrow(hArrow);
				chart.addArrow(mArrow);
				chart.addArrow(sArrow);

				chart.write("chartdiv");

				// update clock every second
				setInterval(updateClock, 1000);
			});

			// update clock
			function updateClock() {
				// get date
				var date = new Date();
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();

				// update hours
				hArrow.setValue(hours + minutes / 60);
				// update minutes
				mArrow.setValue(12 * (minutes + seconds / 60) / 60);
				// update seconds
				sArrow.setValue(date.getSeconds());

				// update date
				var dateString = AmCharts.formatDate(date, "DD MMM, EEE");
				axis.setTopText(dateString);
			}


        </script>
    </head>

    <body>
        <div id="chartdiv" style="width:400px; height:400px;"></div>
    </body>
</html>