Subversion Repositories qbpwcf-lib(archive)

Rev

Rev 915 | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<!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>