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