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/xy.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": "xy",
21        "startDuration": 1.5,
22        "trendLines": [],
23        "graphs": [
24          {
25            "title": "Diamonds",
26            "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
27            "bullet": "diamond",
28            "id": "AmGraph-1",
29            "lineAlpha": 0,
30            "lineColor": "#b0de09",
31            "valueField": "value",
32            "xField": "x",
33            "yField": "y"
34          },
35          {
36            "title": "Balls",
37            "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
38            "bullet": "round",
39            "id": "AmGraph-2",
40            "lineAlpha": 0,
41            "lineColor": "#fcd202",
42            "valueField": "value2",
43            "xField": "x2",
44            "yField": "y2"
45          }
46        ],
47        "guides": [
48          {
49            "fillAlpha": 0.3,
50            "fillColor": "#ff8000",
51            "id": "Guide-1",
52            "toValue": -2,
53            "value": -8,
54            "valueAxis": "ValueAxis-2"
55          }
56        ],
57        "valueAxes": [
58          {
59            "id": "ValueAxis-1",
60            "axisAlpha": 0
61          },
62          {
63            "id": "ValueAxis-2",
64            "axisAlpha": 0,
65            "position": "bottom"
66          }
67        ],
68        "allLabels": [],
69        "balloon": {},
70        "titles": [],
71        "dataProvider": [
72          {
73            "y": 10,
74            "x": 14,
75            "value": 59,
76            "y2": -5,
77            "x2": -3,
78            "value2": 44
79          },
80          {
81            "y": 5,
82            "x": 3,
83            "value": 50,
84            "y2": -15,
85            "x2": -8,
86            "value2": 12
87          },
88          {
89            "y": -10,
90            "x": -3,
91            "value": 19,
92            "y2": -4,
93            "x2": 6,
94            "value2": 35
95          },
96          {
97            "y": -6,
98            "x": 5,
99            "value": 65,
100            "y2": -5,
101            "x2": -6,
102            "value2": 168
103          },
104          {
105            "y": 15,
106            "x": -4,
107            "value": 92,
108            "y2": -10,
109            "x2": -8,
110            "value2": 102
111          },
112          {
113            "y": 13,
114            "x": 1,
115            "value": 8,
116            "y2": -2,
117            "x2": -3,
118            "value2": 41
119          },
120          {
121            "y": 1,
122            "x": 6,
123            "value": 35,
124            "y2": 0,
125            "x2": -3,
126            "value2": 16
127          }
128        ],
129        "chartCursor": {},
130        "legend": {
131          "position": "bottom"
132        },
133        "responsive": {
134          "enabled": true
135        }
136      });
137
138    </script>
139  </head>
140
141  <body>
142    <div id="chartdiv" style="width: 100%; height: 100%;"></div>
143  </body>
144
145</html>