Subversion Repositories php-qbpwcf

Rev

Rev 23 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
23 liveuser 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>