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>