You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.3 KiB
93 lines
2.3 KiB
<!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; |
|
|
|
AmCharts.ready(function () { |
|
|
|
// clock is just an angular gauge with three arrows |
|
chart = new AmCharts.AmAngularGauge(); |
|
chart.startDuration = 0.3; |
|
|
|
// for simplicyty, we use only one axis |
|
var 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); |
|
|
|
// hour arrow |
|
hArrow = new AmCharts.GaugeArrow(); |
|
hArrow.radius = "50%"; |
|
hArrow.clockWiseOnly = true; |
|
|
|
// minutes arrow |
|
mArrow = new AmCharts.GaugeArrow(); |
|
mArrow.radius = "80%"; |
|
mArrow.startWidth = 6; |
|
mArrow.nailRadius = 0; |
|
mArrow.clockWiseOnly = true; |
|
|
|
// seconds arrow |
|
sArrow = new AmCharts.GaugeArrow(); |
|
sArrow.radius = "90%"; |
|
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 each second |
|
setInterval(updateClock, 1000); |
|
}); |
|
|
|
// update clock |
|
function updateClock() { |
|
// get current date |
|
var date = new Date(); |
|
var hours = date.getHours(); |
|
var minutes = date.getMinutes(); |
|
var seconds = date.getSeconds(); |
|
|
|
// set hours |
|
hArrow.setValue(hours + minutes / 60); |
|
// set minutes |
|
mArrow.setValue(12 * (minutes + seconds / 60) / 60); |
|
// set seconds |
|
sArrow.setValue(12 * date.getSeconds() / 60); |
|
} |
|
|
|
|
|
</script> |
|
</head> |
|
|
|
<body> |
|
<div id="chartdiv" style="width:300px; height:250px;"></div> |
|
</body> |
|
|
|
</html> |