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		<script src="http://www.amcharts.com/lib/3/amstock.js"></script>
11
12		<!-- Export plugin includes and styles -->
13		<script src="../export.js"></script>
14		<link  type="text/css" href="../export.css" rel="stylesheet">
15
16		<style>
17			body, html {
18				height: 100%;
19				padding: 0;
20				margin: 0;
21				overflow: hidden;
22				font-size: 11px;
23				font-family: Verdana;
24			}
25			#chartdiv {
26				width: 100%;
27				height: 100%;
28			}
29		</style>
30
31		<script type="text/javascript">
32			var chartData1 = [];
33			var chartData2 = [];
34			var chartData3 = [];
35			var chartData4 = [];
36
37			generateChartData();
38
39			function generateChartData() {
40				var firstDate = new Date();
41				firstDate.setDate( firstDate.getDate() - 500 );
42				firstDate.setHours( 0, 0, 0, 0 );
43
44				for ( var i = 0; i < 500; i++ ) {
45					var newDate = new Date( firstDate );
46					newDate.setDate( newDate.getDate() + i );
47
48					var a1 = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
49					var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2;
50
51					var a2 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i;
52					var b2 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;
53
54					var a3 = Math.round( Math.random() * ( 100 + i ) ) + 200;
55					var b3 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;
56
57					var a4 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i;
58					var b4 = Math.round( Math.random() * ( 100 + i ) ) + 600 + i;
59
60					chartData1.push( {
61						date: newDate,
62						value: a1,
63						volume: b1
64					} );
65					chartData2.push( {
66						date: newDate,
67						value: a2,
68						volume: b2
69					} );
70					chartData3.push( {
71						date: newDate,
72						value: a3,
73						volume: b3
74					} );
75					chartData4.push( {
76						date: newDate,
77						value: a4,
78						volume: b4
79					} );
80				}
81			}
82
83			var chart = AmCharts.makeChart( "chartdiv", {
84				"type": "stock",
85
86				"dataSets": [ {
87						"title": "first data set",
88						"fieldMappings": [ {
89							"fromField": "value",
90							"toField": "value"
91						}, {
92							"fromField": "volume",
93							"toField": "volume"
94						} ],
95						"dataProvider": chartData1,
96						"categoryField": "date"
97					},
98
99					{
100						"title": "second data set",
101						"fieldMappings": [ {
102							"fromField": "value",
103							"toField": "value"
104						}, {
105							"fromField": "volume",
106							"toField": "volume"
107						} ],
108						"dataProvider": chartData2,
109						"categoryField": "date"
110					},
111
112					{
113						"title": "third data set",
114						"fieldMappings": [ {
115							"fromField": "value",
116							"toField": "value"
117						}, {
118							"fromField": "volume",
119							"toField": "volume"
120						} ],
121						"dataProvider": chartData3,
122						"categoryField": "date"
123					},
124
125					{
126						"title": "fourth data set",
127						"fieldMappings": [ {
128							"fromField": "value",
129							"toField": "value"
130						}, {
131							"fromField": "volume",
132							"toField": "volume"
133						} ],
134						"dataProvider": chartData4,
135						"categoryField": "date"
136					}
137				],
138
139				"panels": [ {
140
141						"showCategoryAxis": false,
142						"title": "Value",
143						"percentHeight": 70,
144
145						"stockGraphs": [ {
146							"id": "g1",
147							"valueField": "value",
148							"comparable": true,
149							"compareField": "value",
150							"balloonText": "[[title]]:<b>[[value]]</b>",
151							"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
152						} ],
153
154						"stockLegend": {
155							"periodValueTextComparing": "[[percents.value.close]]%",
156							"periodValueTextRegular": "[[value.close]]"
157						}
158					},
159
160					{
161						"title": "Volume",
162						"percentHeight": 30,
163						"stockGraphs": [ {
164							"valueField": "volume",
165							"type": "column",
166							"showBalloon": false,
167							"fillAlphas": 1
168						} ],
169
170
171						"stockLegend": {
172							"periodValueTextRegular": "[[value.close]]"
173						}
174					}
175				],
176
177				"chartScrollbarSettings": {
178					"graph": "g1"
179				},
180
181				"chartCursorSettings": {
182					"valueBalloonsEnabled": true,
183					"fullWidth": true,
184					"cursorAlpha": 0.1,
185					"valueLineBalloonEnabled": true,
186					"valueLineEnabled": true,
187					"valueLineAlpha": 0.5
188				},
189
190				"periodSelector": {
191					"position": "left",
192					"periods": [ {
193						"period": "MM",
194						"selected": true,
195						"count": 1,
196						"label": "1 month"
197					}, {
198						"period": "YYYY",
199						"count": 1,
200						"label": "1 year"
201					}, {
202						"period": "YTD",
203						"label": "YTD"
204					}, {
205						"period": "MAX",
206						"label": "MAX"
207					} ]
208				},
209
210				"dataSetSelector": {
211					"position": "left"
212				},
213
214				"export": {
215					"enabled": true
216				}
217			} );
218		</script>
219	</head>
220	<body>
221		<div id="chartdiv"></div>
222	</body>
223</html>