Subversion Repositories php-qbpwcf

Rev

Rev 23 | 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;
                        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>