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