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 <!-- AmCharts includes --> 8 <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> 9 <script src="http://www.amcharts.com/lib/3/pie.js"></script> 10 11 <!-- Export plugin includes and styles --> 12 <script src="../export.js"></script> 13 <link type="text/css" href="../export.css" rel="stylesheet"> 14 15 <style> 16 body, html { 17 height: 100%; 18 padding: 0; 19 margin: 0; 20 overflow: hidden; 21 font-size: 11px; 22 font-family: Verdana; 23 } 24 #chartdiv { 25 width: 100%; 26 height: 80%; 27 position: relative; 28 } 29 #legenddiv { 30 width: 100%; 31 height: 19%; 32 position: relative; 33 } 34 </style> 35 36 <script type="text/javascript"> 37 var chart = AmCharts.makeChart( "chartdiv", { 38 "type": "pie", 39 "dataProvider": [ { 40 "country": "Czech Republic", 41 "litres": 156.9 42 }, { 43 "country": "Ireland", 44 "litres": 131.1 45 }, { 46 "country": "Germany", 47 "litres": 115.8 48 }, { 49 "country": "Australia", 50 "litres": 109.9 51 }, { 52 "country": "Austria", 53 "litres": 108.3 54 }, { 55 "country": "UK", 56 "litres": 65 57 }, { 58 "country": "Belgium", 59 "litres": 50 60 } ], 61 "titleField": "country", 62 "valueField": "litres", 63 "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>", 64 "innerRadius": "30%", 65 "legend": { 66 "align": "center", 67 "markerType": "circle", 68 "divId": "legenddiv" 69 }, 70 "export": { 71 "enabled": true, 72 "position": "top-left", 73 "legend": { 74 "position": "bottom" 75 } 76 } 77 } ); 78 </script> 79 </head> 80 <body> 81 <div id="chartdiv"></div> 82 <div id="legenddiv"></div> 83 </body> 84</html>