Blame view

samples/clockWithTwoFaces.html 2.91 KB
aaa287d94   Jeff Chen   NN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
  <!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 type="text/javascript">
             
  			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>