Subversion Repositories php-qbpwcf

Rev

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

<html>
    <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />

                <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
                <script src="http://www.amcharts.com/lib/3/gauge.js"></script>

                <!-- Export plugin includes and styles -->
                <script src="../export.js"></script>
                <link  type="text/css" href="../export.css" rel="stylesheet">

                <style>
                body, html {
                        height: 100%;
                        padding: 0;
                        margin: 0;
                        overflow: hidden;
                        font-size: 11px;
                        font-family: Verdana;
                }
                #chartdiv {
                        width: 100%;
                        height: 100%;
                }
                </style>

                <script type="text/javascript">
                        var chart = AmCharts.makeChart( "chartdiv", {
                                "type": "gauge",
                                "titles": [ {
                                        "text": "Speedometer",
                                        "size": 15
                                } ],
                                "axes": [ {
                                        "startValue": 0,
                                        "axisThickness": 1,
                                        "endValue": 220,
                                        "valueInterval": 10,
                                        "bottomTextYOffset": -20,
                                        "bottomText": "0 km/h",
                                        "bands": [ {
                                                "startValue": 0,
                                                "endValue": 90,
                                                "color": "#00CC00"
                                        }, {
                                                "startValue": 90,
                                                "endValue": 130,
                                                "color": "#ffac29"
                                        }, {
                                                "startValue": 130,
                                                "endValue": 220,
                                                "color": "#ea3838",
                                                "innerRadius": "95%"
                                        } ]
                                } ],
                                "arrows": [ {} ],
                                "export": {
                                        "enabled": true
                                }
                        } );

                        setInterval( randomValue, 2000 );

                        // set random value
                        function randomValue() {
                                var value = Math.round( Math.random() * 200 );
                                chart.arrows[ 0 ].setValue( value );
                                chart.axes[ 0 ].setBottomText( value + " km/h" );
                        }
                </script>
        </head>
        <body>
                <div id="chartdiv"></div>
        </body>
</html>