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 rel="stylesheet" href="../amcharts/style.css"	type="text/css">
7 
 
8 
		<script src="../amcharts/amcharts.js" type="text/javascript"></script>
9 
		<script src="../amcharts/serial.js" type="text/javascript"></script>
10 
		<script src="../amcharts/amstock.js" type="text/javascript"></script>
11 
 
12 
		<script>
13 
			var chartData = [];
14 
			generateChartData();
15 
 
16 
			function generateChartData() {
17 
				var firstDate = new Date(2012, 0, 1);
18 
				firstDate.setDate(firstDate.getDate() - 500);
19 
				firstDate.setHours(0, 0, 0, 0);
20 
 
21 
				for (var i = 0; i < 500; i++) {
22 
					var newDate = new Date(firstDate);
23 
					newDate.setDate(newDate.getDate() + i);
24 
 
25 
					var a = Math.round(Math.random() * (40 + i)) + 100 + i;
26 
					var b = Math.round(Math.random() * 100000000);
27 
 
28 
					chartData.push({
29 
						date: newDate,
30 
						value: a,
31 
						volume: b
32 
					});
33 
				}
34 
			}
35 
 
36 
			AmCharts.makeChart("chartdiv", {
37 
				type: "stock",
38 
				dataSets: [{
39 
					color: "#b0de09",
40 
					fieldMappings: [{
41 
						fromField: "value",
42 
						toField: "value"
43 
					}, {
44 
						fromField: "volume",
45 
						toField: "volume"
46 
					}],
47 
					dataProvider: chartData,
48 
					categoryField: "date",
49 
					// EVENTS
50 
					stockEvents: [{
51 
						date: new Date(2010, 8, 19),
52 
						type: "sign",
53 
						backgroundColor: "#85CDE6",
54 
						graph: "g1",
55 
						text: "S",
56 
						description: "This is description of an event"
57 
					}, {
58 
						date: new Date(2010, 10, 19),
59 
						type: "flag",
60 
						backgroundColor: "#FFFFFF",
61 
						backgroundAlpha: 0.5,
62 
						graph: "g1",
63 
						text: "F",
64 
						description: "Some longer\ntext can also\n be added"
65 
					}, {
66 
						date: new Date(2010, 11, 10),
67 
						showOnAxis: true,
68 
						backgroundColor: "#85CDE6",
69 
						type: "pin",
70 
						text: "X",
71 
						graph: "g1",
72 
						description: "This is description of an event"
73 
					}, {
74 
						date: new Date(2010, 11, 26),
75 
						showOnAxis: true,
76 
						backgroundColor: "#85CDE6",
77 
						type: "pin",
78 
						text: "Z",
79 
						graph: "g1",
80 
						description: "This is description of an event"
81 
					}, {
82 
						date: new Date(2011, 0, 3),
83 
						type: "sign",
84 
						backgroundColor: "#85CDE6",
85 
						graph: "g1",
86 
						text: "U",
87 
						description: "This is description of an event"
88 
					}, {
89 
						date: new Date(2011, 1, 6),
90 
						type: "sign",
91 
						graph: "g1",
92 
						text: "D",
93 
						description: "This is description of an event"
94 
					}, {
95 
						date: new Date(2011, 3, 5),
96 
						type: "sign",
97 
						graph: "g1",
98 
						text: "L",
99 
						description: "This is description of an event"
100 
					}, {
101 
						date: new Date(2011, 3, 5),
102 
						type: "sign",
103 
						graph: "g1",
104 
						text: "R",
105 
						description: "This is description of an event"
106 
					}, {
107 
						date: new Date(2011, 5, 15),
108 
						type: "arrowUp",
109 
						backgroundColor: "#00CC00",
110 
						graph: "g1",
111 
						description: "This is description of an event"
112 
					}, {
113 
						date: new Date(2011, 6, 25),
114 
						type: "arrowDown",
115 
						backgroundColor: "#CC0000",
116 
						graph: "g1",
117 
						description: "This is description of an event"
118 
					}, {
119 
						date: new Date(2011, 8, 1),
120 
						type: "text",
121 
						graph: "g1",
122 
						text: "Longer text can\nalso be displayed",
123 
						description: "This is description of an event"
124 
					}]
125 
				}],
126 
 
127 
 
128 
				panels: [{
129 
					title: "Value",
130 
					percentHeight: 70,
131 
 
132 
					stockGraphs: [{
133 
						id: "g1",
134 
						valueField: "value"
135 
					}],
136 
 
137 
					stockLegend: {
138 
						valueTextRegular: " ",
139 
						markerType: "none"
140 
					}
141 
				}],
142 
 
143 
				chartScrollbarSettings: {
144 
					graph: "g1",
145 
					updateOnReleaseOnly:false
146 
				},
147 
 
148 
				chartCursorSettings: {
149 
					valueBalloonsEnabled: true,
150 
					graphBulletSize: 1,
151 
					valueLineEnabled:true,
152 
					valueLineBalloonEnabled:true
153 
				},
154 
 
155 
				periodSelector: {
156 
					periods: [{
157 
						period: "DD",
158 
						count: 10,
159 
						label: "10 days"
160 
					}, {
161 
						period: "MM",
162 
						count: 1,
163 
						label: "1 month"
164 
					}, {
165 
						period: "YYYY",
166 
						count: 1,
167 
						label: "1 year"
168 
					}, {
169 
						period: "YTD",
170 
						label: "YTD"
171 
					}, {
172 
						period: "MAX",
173 
						label: "MAX"
174 
					}]
175 
				},
176 
 
177 
				panelsSettings: {
178 
					mouseWheelZoomEnabled:true,
179 
					usePrefixes: true
180 
				}
181 
			});
182 
 
183 
 
184 
 
185 
		</script>
186 
	</head>
187 
	<body style="background-color:#FFFFFF">
188 
		<div id="chartdiv" style="width:100%; height:600px;"></div>
189 
	</body>
190 
 
191 
</html>