gauge.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <title>amCharts Responsive Example</title>
  7. <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
  8. <script src="http://www.amcharts.com/lib/3/gauge.js"></script>
  9. <script src="../responsive.min.js"></script>
  10. <style>
  11. body, html {
  12. height: 100%;
  13. padding: 0;
  14. margin: 0;
  15. }
  16. </style>
  17. <script>
  18. var chart = AmCharts.makeChart("chartdiv", {
  19. "type": "gauge",
  20. "titles": [{
  21. "text": "Speedometer",
  22. "size": 15
  23. }],
  24. "axes": [{
  25. "startValue": 0,
  26. "axisThickness": 1,
  27. "endValue": 220,
  28. "valueInterval": 10,
  29. "bottomTextYOffset": -20,
  30. "bottomText": "0 km/h",
  31. "bands": [{
  32. "startValue": 0,
  33. "endValue": 90,
  34. "color": "#00CC00"
  35. },
  36. {
  37. "startValue": 90,
  38. "endValue": 130,
  39. "color": "#ffac29"
  40. },
  41. {
  42. "startValue": 130,
  43. "endValue": 220,
  44. "color": "#ea3838",
  45. "innerRadius": "95%"
  46. }
  47. ]
  48. }],
  49. "arrows": [{}],
  50. "responsive": {
  51. "enabled": true
  52. }
  53. });
  54. setInterval(randomValue, 2000);
  55. // set random value
  56. function randomValue() {
  57. var value = Math.round(Math.random() * 200);
  58. chart.arrows[0].setValue(value);
  59. chart.axes[0].setBottomText(value + " km/h");
  60. }
  61. </script>
  62. </head>
  63. <body>
  64. <div id="chartdiv" style="width: 100%; height: 100%;"></div>
  65. </body>
  66. </html>