1<html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 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 10 <!-- Export plugin includes and styles --> 11 <script src="../export.js"></script> 12 <link type="text/css" href="../export.css" rel="stylesheet"> 13 14 <style> 15 body, html { 16 height: 100%; 17 padding: 0; 18 margin: 0; 19 overflow: hidden; 20 font-size: 11px; 21 font-family: Verdana; 22 } 23 #chartdiv { 24 width: 100%; 25 height: 100%; 26 } 27 </style> 28 29 <script type="text/javascript"> 30 var chart = AmCharts.makeChart( "chartdiv", { 31 "type": "gauge", 32 "titles": [ { 33 "text": "Speedometer", 34 "size": 15 35 } ], 36 "axes": [ { 37 "startValue": 0, 38 "axisThickness": 1, 39 "endValue": 220, 40 "valueInterval": 10, 41 "bottomTextYOffset": -20, 42 "bottomText": "0 km/h", 43 "bands": [ { 44 "startValue": 0, 45 "endValue": 90, 46 "color": "#00CC00" 47 }, { 48 "startValue": 90, 49 "endValue": 130, 50 "color": "#ffac29" 51 }, { 52 "startValue": 130, 53 "endValue": 220, 54 "color": "#ea3838", 55 "innerRadius": "95%" 56 } ] 57 } ], 58 "arrows": [ {} ], 59 "export": { 60 "enabled": true 61 } 62 } ); 63 64 setInterval( randomValue, 2000 ); 65 66 // set random value 67 function randomValue() { 68 var value = Math.round( Math.random() * 200 ); 69 chart.arrows[ 0 ].setValue( value ); 70 chart.axes[ 0 ].setBottomText( value + " km/h" ); 71 } 72 </script> 73 </head> 74 <body> 75 <div id="chartdiv"></div> 76 </body> 77</html>