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 = generateChartData();
14 
 
15 
			function generateChartData() {
16 
				var chartData = [];
17 
				var firstDate = new Date(2012, 0, 1);
18 
				firstDate.setDate(firstDate.getDate() - 1000);
19 
				firstDate.setHours(0, 0, 0, 0);
20 
 
21 
				for (var i = 0; i < 1000; i++) {
22 
					var newDate = new Date(firstDate);
23 
					newDate.setHours(0, i, 0, 0);
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 
				return chartData;
35 
			}
36 
 
37 
			var chart = AmCharts.makeChart("chartdiv", {
38 
 
39 
					type: "stock",
40 
 
41 
					categoryAxesSettings: {
42 
						minPeriod: "mm"
43 
					},
44 
 
45 
					dataSets: [{
46 
						color: "#b0de09",
47 
						fieldMappings: [{
48 
							fromField: "value",
49 
							toField: "value"
50 
						}, {
51 
							fromField: "volume",
52 
							toField: "volume"
53 
						}],
54 
 
55 
						dataProvider: chartData,
56 
						categoryField: "date"
57 
					}],
58 
 
59 
 
60 
					panels: [{
61 
							showCategoryAxis: false,
62 
							title: "Value",
63 
							percentHeight: 70,
64 
 
65 
							valueAxes:[{
66 
									id:"v1"
67 
								}
68 
							],
69 
 
70 
							stockGraphs: [{
71 
								id: "g1",
72 
								valueField: "value",
73 
								type: "smoothedLine",
74 
								lineThickness: 2,
75 
								bullet: "round"
76 
							}],
77 
 
78 
							stockLegend: {
79 
								valueTextRegular: " ",
80 
								markerType: "none"
81 
							}
82 
						},
83 
 
84 
 
85 
 
86 
						{
87 
							title: "Volume",
88 
							percentHeight: 30,
89 
 
90 
							stockGraphs: [{
91 
								valueField: "volume",
92 
								type: "column",
93 
								cornerRadiusTop: 2,
94 
								fillAlphas: 1
95 
							}],
96 
 
97 
							stockLegend: {
98 
								valueTextRegular: " ",
99 
								markerType: "none"
100 
							}
101 
						}
102 
					],
103 
 
104 
					chartScrollbarSettings: {
105 
						graph: "g1",
106 
						usePeriod: "10mm",
107 
						position: "top",
108 
						updateOnReleaseOnly:false
109 
					},
110 
 
111 
					chartCursorSettings: {
112 
						valueBalloonsEnabled: true,
113 
						valueLineBalloonEnabled:true,
114 
						valueLineEnabled:true
115 
					},
116 
 
117 
					periodSelector: {
118 
						position: "bottom",
119 
						dateFormat: "YYYY-MM-DD HH:NN",
120 
						inputFieldWidth: 150,
121 
						periods: [{
122 
							period: "hh",
123 
							count: 1,
124 
							label: "1 hour",
125 
							selected: true
126 
 
127 
						}, {
128 
							period: "hh",
129 
							count: 2,
130 
							label: "2 hours"
131 
						}, {
132 
							period: "hh",
133 
							count: 5,
134 
							label: "5 hour"
135 
						}, {
136 
							period: "hh",
137 
							count: 12,
138 
							label: "12 hours"
139 
						}, {
140 
							period: "MAX",
141 
							label: "MAX"
142 
						}]
143 
					},
144 
 
145 
					panelsSettings: {
146 
						usePrefixes: true
147 
					}
148 
				});
149 
 
150 
		</script>
151 
	</head>
152 
	<body style="background-color:#FFFFFF">
153 
		<div id="chartdiv" style="width:100%; height:600px;"></div>
154 
	</body>
155 
 
156 
</html>