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/pie.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 .chartdiv { 18 width: 50%; 19 height: 100%; 20 float: left; 21 } 22 </style> 23 <script> 24 AmCharts.makeChart( "chart1", { 25 "type": "pie", 26 "titles": [ { 27 "text": "Visits", 28 "size": 16 29 } ], 30 "dataProvider": [ { 31 "country": "United States", 32 "visits": 7252 33 }, { 34 "country": "China", 35 "visits": 3882 36 }, { 37 "country": "Japan", 38 "visits": 1809 39 }, { 40 "country": "Germany", 41 "visits": 1322 42 }, { 43 "country": "United Kingdom", 44 "visits": 1122 45 } ], 46 "valueField": "visits", 47 "titleField": "country", 48 "startEffect": "elastic", 49 "startDuration": 2, 50 "labelRadius": 15, 51 "innerRadius": "50%", 52 "depth3D": 10, 53 "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>", 54 "angle": 15, 55 "legend": {}, 56 "responsive": { 57 "enabled": true 58 } 59 } ); 60 61 AmCharts.makeChart( "chart2", { 62 "type": "pie", 63 "theme": "none", 64 "titles": [ { 65 "text": "Views", 66 "size": 16 67 } ], 68 "dataProvider": [ { 69 "country": "United States", 70 "visits": 10616 71 }, { 72 "country": "China", 73 "visits": 9845 74 }, { 75 "country": "Japan", 76 "visits": 3111 77 }, { 78 "country": "Germany", 79 "visits": 2874 80 }, { 81 "country": "United Kingdom", 82 "visits": 2110 83 } ], 84 "valueField": "visits", 85 "titleField": "country", 86 "startEffect": "elastic", 87 "startDuration": 2, 88 "labelRadius": 15, 89 "innerRadius": "50%", 90 "depth3D": 10, 91 "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>", 92 "angle": 15, 93 "legend": {}, 94 "responsive": { 95 "enabled": true 96 } 97 } ); 98 </script> 99</head> 100 101<body> 102 <div id="chart1" class="chartdiv"></div> 103 <div id="chart2" class="chartdiv"></div> 104</body> 105 106</html>