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/serial.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 chartData = [{
20        "year": 2000,
21        "cars": 1587,
22        "motorcycles": 650,
23        "bicycles": 121
24     }, {
25        "year": 1995,
26        "cars": 1567,
27        "motorcycles": 683,
28        "bicycles": 146
29     }, {
30        "year": 1996,
31        "cars": 1617,
32        "motorcycles": 691,
33        "bicycles": 138
34     }, {
35        "year": 1997,
36        "cars": 1630,
37        "motorcycles": 642,
38        "bicycles": 127
39     }, {
40        "year": 1998,
41        "cars": 1660,
42        "motorcycles": 699,
43        "bicycles": 105
44     }, {
45        "year": 1999,
46        "cars": 1683,
47        "motorcycles": 721,
48        "bicycles": 109
49     }, {
50        "year": 2000,
51        "cars": 1691,
52        "motorcycles": 737,
53        "bicycles": 112
54     }, {
55        "year": 2001,
56        "cars": 1298,
57        "motorcycles": 680,
58        "bicycles": 101
59     }, {
60        "year": 2002,
61        "cars": 1275,
62        "motorcycles": 664,
63        "bicycles": 97
64     }, {
65        "year": 2003,
66        "cars": 1246,
67        "motorcycles": 648,
68        "bicycles": 93
69     }, {
70        "year": 2004,
71        "cars": 1218,
72        "motorcycles": 637,
73        "bicycles": 101
74     }, {
75        "year": 2005,
76        "cars": 1213,
77        "motorcycles": 633,
78        "bicycles": 87
79     }, {
80        "year": 2006,
81        "cars": 1199,
82        "motorcycles": 621,
83        "bicycles": 79
84     }, {
85        "year": 2007,
86        "cars": 1110,
87        "motorcycles": 210,
88        "bicycles": 81
89     }, {
90        "year": 2008,
91        "cars": 1165,
92        "motorcycles": 232,
93        "bicycles": 75
94     }, {
95        "year": 2009,
96        "cars": 1145,
97        "motorcycles": 219,
98        "bicycles": 88
99     }, {
100        "year": 2010,
101        "cars": 1163,
102        "motorcycles": 201,
103        "bicycles": 82
104     }, {
105        "year": 2011,
106        "cars": 1180,
107        "motorcycles": 285,
108        "bicycles": 87
109     }, {
110        "year": 2012,
111        "cars": 1159,
112        "motorcycles": 277,
113        "bicycles": 71
114     }];
115
116     AmCharts.makeChart("chartdiv", {
117       "type": "serial",
118       "dataProvider": chartData,
119       "rotate": false,
120       "marginTop": 10,
121       "categoryField": "year",
122       "categoryAxis": {
123         "gridAlpha": 0.07,
124         "axisColor": "#DADADA",
125         "startOnAxis": true,
126         "title": "Year",
127         "guides": [{
128           "category": "2001",
129           "lineColor": "#CC0000",
130           "lineAlpha": 1,
131           "dashLength": 2,
132           "inside": true,
133           "labelRotation": 90,
134           "label": "fines for speeding increased"
135         }, {
136           "category": "2007",
137           "lineColor": "#CC0000",
138           "lineAlpha": 1,
139           "dashLength": 2,
140           "inside": true,
141           "labelRotation": 90,
142           "label": "motorcycle fee introduced"
143         }]
144       },
145       "valueAxes": [{
146         "stackType": "regular",
147         "gridAlpha": 0.07,
148         "title": "Traffic incidents"
149       }],
150       "graphs": [{
151         "id": "g1",
152         "type": "column",
153         "title": "Cars",
154         "valueField": "cars",
155         "bullet": "round",
156         "lineAlpha": 0,
157         "fillAlphas": 0.6,
158         "balloonText": "<img src='images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
159       }, {
160         "id": "g2",
161         "type": "column",
162         "title": "Motorcycles",
163         "valueField": "motorcycles",
164         "lineAlpha": 0,
165         "fillAlphas": 0.6,
166         "balloonText": "<img src='images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
167       }, {
168         "id": "g3",
169         "type": "column",
170         "title": "Bicycles",
171         "valueField": "bicycles",
172         "lineAlpha": 0,
173         "fillAlphas": 0.6,
174         "balloonText": "<img src='images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
175       }],
176       "legend": {
177         "position": "bottom",
178         "valueText": "[[value]]",
179         "valueWidth": 100,
180         "valueAlign": "left",
181         "equalWidths": false,
182         "periodValueText": "total: [[value.sum]]"
183       },
184       "chartCursor": {
185         "cursorAlpha": 0
186       },
187       "chartScrollbar": {
188         "color": "FFFFFF"
189       },
190      "responsive": {
191        "enabled": true
192      }
193
194     });
195
196    </script>
197  </head>
198
199  <body>
200    <div id="chartdiv" style="width: 100%; height: 100%;"></div>
201  </body>
202
203</html>