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 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 
<html>
3 
	<head>
4 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
		<title>amStock Example</title>
6 
		<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
7 
		<link rel="stylesheet" href="../amcharts/style.css"	type="text/css">
8 
		<link rel="stylesheet" href="style.css" type="text/css">
9 
 
10 
		<script src="../amcharts/amcharts.js" type="text/javascript"></script>
11 
		<script src="../amcharts/serial.js" type="text/javascript"></script>
12 
		<script src="../amcharts/amstock.js" type="text/javascript"></script>
13 
 
14 
        <!-- theme files. you only need to include the theme you use.
15 
             feel free to modify themes and create your own themes -->
16 
        <script src="../amcharts/themes/light.js" type="text/javascript"></script>
17 
        <script src="../amcharts/themes/dark.js" type="text/javascript"></script>
18 
        <script src="../amcharts/themes/black.js" type="text/javascript"></script>
19 
        <script src="../amcharts/themes/chalk.js" type="text/javascript"></script>
20 
        <script src="../amcharts/themes/patterns.js" type="text/javascript"></script>
21 
 
22 
		<script>
23 
			var chartData1 = [];
24 
			var chartData2 = [];
25 
			var chartData3 = [];
26 
			var chartData4 = [];
27 
 
28 
			generateChartData();
29 
 
30 
			function generateChartData() {
31 
				var firstDate = new Date();
32 
				firstDate.setDate(firstDate.getDate() - 500);
33 
				firstDate.setHours(0, 0, 0, 0);
34 
 
35 
				for (var i = 0; i < 500; i++) {
36 
					var newDate = new Date(firstDate);
37 
					newDate.setDate(newDate.getDate() + i);
38 
 
39 
					var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
40 
					var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
41 
 
42 
					var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
43 
					var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
44 
 
45 
					var a3 = Math.round(Math.random() * (100 + i)) + 200;
46 
					var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
47 
 
48 
					var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
49 
					var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;
50 
 
51 
					chartData1.push({
52 
						date: newDate,
53 
						value: a1,
54 
						volume: b1
55 
					});
56 
					chartData2.push({
57 
						date: newDate,
58 
						value: a2,
59 
						volume: b2
60 
					});
61 
					chartData3.push({
62 
						date: newDate,
63 
						value: a3,
64 
						volume: b3
65 
					});
66 
					chartData4.push({
67 
						date: newDate,
68 
						value: a4,
69 
						volume: b4
70 
					});
71 
				}
72 
			}
73 
 
74 
			// in order to set theme for a chart, all you need to include theme file
75 
			// located in amcharts/themes folder and set theme property for the chart.
76 
 
77 
			var chart;
78 
 
79 
			makeChart("light", "#FFFFFF");
80 
 
81 
			// Theme can only be applied when creating chart instance - this means
82 
			// that if you need to change theme at run time, youhave to create whole
83 
			// chart object once again.
84 
 
85 
			function makeChart(theme, bgColor, bgImage) {
86 
 
87 
				if (chart) {
88 
					chart.clear();
89 
				}
90 
 
91 
				// background
92 
				if (document.body) {
93 
					document.body.style.backgroundColor = bgColor;
94 
					document.body.style.backgroundImage = "url(" + bgImage + ")";
95 
				}
96 
 
97 
				AmCharts.makeChart("chartdiv", {
98 
					type: "stock",
99 
					theme: theme,
100 
 
101 
					dataSets: [{
102 
							title: "first data set",
103 
							fieldMappings: [{
104 
								fromField: "value",
105 
								toField: "value"
106 
							}, {
107 
								fromField: "volume",
108 
								toField: "volume"
109 
							}],
110 
							dataProvider: chartData1,
111 
							categoryField: "date"
112 
						},
113 
 
114 
						{
115 
							title: "second data set",
116 
							fieldMappings: [{
117 
								fromField: "value",
118 
								toField: "value"
119 
							}, {
120 
								fromField: "volume",
121 
								toField: "volume"
122 
							}],
123 
							dataProvider: chartData2,
124 
							categoryField: "date"
125 
						},
126 
 
127 
						{
128 
							title: "third data set",
129 
							fieldMappings: [{
130 
								fromField: "value",
131 
								toField: "value"
132 
							}, {
133 
								fromField: "volume",
134 
								toField: "volume"
135 
							}],
136 
							dataProvider: chartData3,
137 
							categoryField: "date"
138 
						},
139 
 
140 
						{
141 
							title: "fourth data set",
142 
							fieldMappings: [{
143 
								fromField: "value",
144 
								toField: "value"
145 
							}, {
146 
								fromField: "volume",
147 
								toField: "volume"
148 
							}],
149 
							dataProvider: chartData4,
150 
							categoryField: "date"
151 
						}
152 
					],
153 
 
154 
					panels: [{
155 
 
156 
							showCategoryAxis: false,
157 
							title: "Value",
158 
							percentHeight: 70,
159 
 
160 
							stockGraphs: [{
161 
								id: "g1",
162 
 
163 
								valueField: "value",
164 
								comparable: true,
165 
								compareField: "value",
166 
								bullet: "round",
167 
								balloonText: "[[title]]:<b>[[value]]</b>",
168 
								compareGraphBalloonText: "[[title]]:<b>[[value]]</b>",
169 
								compareGraphBullet: "round"
170 
							}],
171 
 
172 
							stockLegend: {
173 
								periodValueTextComparing: "[[percents.value.close]]%",
174 
								periodValueTextRegular: "[[value.close]]"
175 
							}
176 
						},
177 
 
178 
						{
179 
							title: "Volume",
180 
							percentHeight: 30,
181 
							stockGraphs: [{
182 
								valueField: "volume",
183 
								type: "column",
184 
								showBalloon: false,
185 
								fillAlphas: 1
186 
							}],
187 
 
188 
 
189 
							stockLegend: {
190 
								periodValueTextRegular: "[[value.close]]"
191 
							}
192 
						}
193 
					],
194 
 
195 
					chartScrollbarSettings: {
196 
						graph: "g1"
197 
					},
198 
 
199 
					chartCursorSettings: {
200 
						valueBalloonsEnabled: true
201 
					},
202 
 
203 
					periodSelector: {
204 
						position: "left",
205 
						periods: [{
206 
							period: "DD",
207 
							count: 10,
208 
							label: "10 days"
209 
						}, {
210 
							period: "MM",
211 
							selected: true,
212 
							count: 1,
213 
							label: "1 month"
214 
						}, {
215 
							period: "YYYY",
216 
							count: 1,
217 
							label: "1 year"
218 
						}, {
219 
							period: "YTD",
220 
							label: "YTD"
221 
						}, {
222 
							period: "MAX",
223 
							label: "MAX"
224 
						}]
225 
					},
226 
 
227 
					dataSetSelector: {
228 
						position: "left"
229 
					}
230 
				});
231 
			}
232 
		</script>
233 
	</head>
234 
    <body style="font-size:15px;">Select theme:
235 
        <a href="#" onclick="makeChart('light', '#ffffff');">Light</a> |
236 
        <a href="#" onclick="makeChart('dark', '#282828')">Dark</a> |
237 
        <a href="#" onclick="makeChart('black', '#222222')">Black</a> |
238 
        <a href="#" onclick="makeChart('patterns', '#FFFFFF')">Patterns</a> |
239 
        <a href="#" onclick="makeChart('chalk', '#282828', 'images/board.jpg')">Chalk</a>
240 
        <br><br>
241 
		<div id="chartdiv" style="width:100%; height:600px;"></div>
242 
	</body>
243 
 
244 
</html>