gauge.html 1.85 KB
Newer Older
Hamza Arfaoui's avatar
Hamza Arfaoui committed
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
<!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">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>amCharts Responsive Example</title>
    <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="http://www.amcharts.com/lib/3/gauge.js"></script>
    <script src="../responsive.min.js"></script>
    <style>
    body, html {
      height: 100%;
      padding: 0;
      margin: 0;
    }
    </style>
    <script>
      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": [{}],
        "responsive": {
          "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" style="width: 100%; height: 100%;"></div>
  </body>

</html>