-
Notifications
You must be signed in to change notification settings - Fork 1
/
radar-charts.html
283 lines (279 loc) · 12.1 KB
/
radar-charts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>The Future</title>
<!-- Google fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/chosen.min.css" />
<!-- JS -->
<script src="plugins/d3/d3.v4.min.js" charset="utf-8"></script>
<script src="plugins/lodash/lodash.js"></script>
<script src="plugins/jquery/jquery-3.1.1.min.js"></script>
<script src="plugins/jquery-chosen/chosen.jquery.min.js"></script>
<style>
body {
font-family: 'PT Sans Narrow', 'Open Sans', sans-serif, 'Arial';
font-size: 24px;
font-weight: 300;
fill: #242424;
text-align: center;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
cursor: default;
}
.legend {
font-family: 'Raleway', sans-serif;
fill: #333333;
}
.tooltip {
fill: #333333;
}
</style>
</head>
<body>
<p>
<div id="selectors">
<select class="chosen-symbol" data-placeholder="Choose Symbol ..." style="width: 200px" multiple="true">
<option value=""></option>
<option value="1">0001 CKH Holdings</option>
<option value="2">0002 CLP Holdings</option>
<option value="3">0003 HK & China Gas</option>
<option value="4">0004 Wharf Holdings</option>
<option value="5">0005 HSBC Holdings</option>
<option value="6">0006 Power Assets</option>
<option value="11">0011 Hang Seng Bank</option>
<option value="12">0012 Henderson Land</option>
<option value="13">0013 Hutchison</option>
<option value="16">0016 SHK Ppt</option>
<option value="17">0017 New World Dev</option>
<option value="19">0019 Swire Pacific A</option>
<option value="23">0023 Bank of E Asia</option>
<option value="27">0027 Galaxy Ent</option>
<option value="66">0066 MTR Corporation</option>
<option value="83">0083 Sino Land</option>
<option value="101">0101 Hang Lung Ppt</option>
<option value="135">0135 Kunlun Energy</option>
<option value="144">0144 China Mer Port</option>
<option value="151">0151 Want Want China</option>
<option value="267">0267 CITIC</option>
<option value="291">0291 China Res Beer</option>
<option value="293">0293 Cathay Pac Air</option>
<option value="322">0322 Tingyi</option>
<option value="330">0330 Esprit Holdings</option>
<option value="386">0386 Sinopec Corp</option>
<option value="388">0388 HKEx</option>
<option value="494">0494 Li & Fung</option>
<option value="551">0551 Yue Yuen Ind</option>
<option value="688">0688 China Overseas</option>
<option value="700">0700 Tencent</option>
<option value="762">0762 China Unicom</option>
<option value="823">0823 Link REIT</option>
<option value="836">0836 China Res Power</option>
<option value="857">0857 PetroChina</option>
<option value="883">0883 CNOOC</option>
<option value="902">0902 Huaneng</option>
<option value="939">0939 CCB</option>
<option value="941">0941 China Mobile</option>
<option value="992">0992 Lenovo Group</option>
<option value="1038">1038 CKI Holdings</option>
<option value="1044">1044 Hengan Int'l</option>
<option value="1088">1088 China Shenhua</option>
<option value="1109">1109 China Res Land</option>
<option value="1113">1113 CK Property</option>
<option value="1199">1199 COSCO Pacific</option>
<option value="1299">1299 AIA</option>
<option value="1398">1398 ICBC</option>
<option value="1880">1880 Belle Int'l</option>
<option value="1898">1898 China Coal</option>
<option value="1928">1928 Sands China Ltd</option>
<option value="2018">2018 AAC</option>
<option value="2038">2038 FIH</option>
<option value="2318">2318 Ping An</option>
<option value="2319">2319 Mengniu Dairy</option>
<option value="2388">2388 BOC Hong Kong</option>
<option value="2600">2600 CHALCO</option>
<option value="2628">2628 China Life</option>
<option value="3328">3328 Bankcomm</option>
<option value="3988">3988 Bank of China</option>
</select>
<select class="chosen-period" data-placeholder="Choose Period ..." style="width: 200px" multiple="true">
<option value=""></option>
<option value="201609">2016-09</option>
<option value="201608">2016-08</option>
<option value="201607">2016-07</option>
<option value="201606">2016-06</option>
<option value="201605">2016-05</option>
<option value="201604">2016-04</option>
<option value="201603">2016-03</option>
<option value="201602">2016-02</option>
<option value="201601">2016-01</option>
<option value="201512">2015-12</option>
<option value="201511">2015-11</option>
<option value="201510">2015-10</option>
<option value="201509">2015-09</option>
<option value="201508">2015-08</option>
<option value="201507">2015-07</option>
<option value="201506">2015-06</option>
<option value="201505">2015-05</option>
<option value="201504">2015-04</option>
<option value="201503">2015-03</option>
<option value="201502">2015-02</option>
<option value="201501">2015-01</option>
<option value="201412">2014-12</option>
<option value="201411">2014-11</option>
<option value="201410">2014-10</option>
<option value="201409">2014-09</option>
<option value="201408">2014-08</option>
<option value="201407">2014-07</option>
<option value="201406">2014-06</option>
<option value="201405">2014-05</option>
<option value="201404">2014-04</option>
<option value="201403">2014-03</option>
<option value="201402">2014-02</option>
<option value="201401">2014-01</option>
<option value="201312">2013-12</option>
<option value="201311">2013-11</option>
<option value="201310">2013-10</option>
<option value="201309">2013-09</option>
<option value="201308">2013-08</option>
<option value="201307">2013-07</option>
<option value="201306">2013-06</option>
<option value="201305">2013-05</option>
<option value="201304">2013-04</option>
<option value="201303">2013-03</option>
<option value="201302">2013-02</option>
<option value="201301">2013-01</option>
<option value="201212">2012-12</option>
<option value="201211">2012-11</option>
<option value="201210">2012-10</option>
<option value="201209">2012-09</option>
<option value="201208">2012-08</option>
<option value="201207">2012-07</option>
<option value="201206">2012-06</option>
<option value="201205">2012-05</option>
<option value="201204">2012-04</option>
<option value="201203">2012-03</option>
<option value="201202">2012-02</option>
<option value="201201">2012-01</option>
<option value="201112">2011-12</option>
<option value="201111">2011-11</option>
<option value="201110">2011-10</option>
<option value="201109">2011-09</option>
<option value="201108">2011-08</option>
<option value="201107">2011-07</option>
<option value="201106">2011-06</option>
<option value="201105">2011-05</option>
<option value="201104">2011-04</option>
<option value="201103">2011-03</option>
<option value="201102">2011-02</option>
<option value="201101">2011-01</option>
<option value="201012">2010-12</option>
<option value="201011">2010-11</option>
<option value="201010">2010-10</option>
<option value="201009">2010-09</option>
<option value="201008">2010-08</option>
<option value="201007">2010-07</option>
<option value="201006">2010-06</option>
<option value="201005">2010-05</option>
<option value="201004">2010-04</option>
<option value="201003">2010-03</option>
<option value="201002">2010-02</option>
<option value="201001">2010-01</option>
<option value="200912">2009-12</option>
<option value="200911">2009-11</option>
<option value="200910">2009-10</option>
<option value="200909">2009-09</option>
<option value="200908">2009-08</option>
<option value="200907">2009-07</option>
<option value="200906">2009-06</option>
<option value="200905">2009-05</option>
<option value="200904">2009-04</option>
<option value="200903">2009-03</option>
<option value="200902">2009-02</option>
<option value="200901">2009-01</option>
<option value="200812">2008-12</option>
<option value="200811">2008-11</option>
<option value="200810">2008-10</option>
<option value="200809">2008-09</option>
<option value="200808">2008-08</option>
<option value="200807">2008-07</option>
<option value="200806">2008-06</option>
<option value="200805">2008-05</option>
<option value="200804">2008-04</option>
<option value="200803">2008-03</option>
<option value="200802">2008-02</option>
<option value="200801">2008-01</option>
<option value="200712">2007-12</option>
<option value="200711">2007-11</option>
<option value="200710">2007-10</option>
<option value="200709">2007-09</option>
<option value="200708">2007-08</option>
<option value="200707">2007-07</option>
<option value="200706">2007-06</option>
<option value="200705">2007-05</option>
<option value="200704">2007-04</option>
<option value="200703">2007-03</option>
<option value="200702">2007-02</option>
<option value="200701">2007-01</option>
</select>
</div>
</p>
<p>
<h2 class="chart-caption"></h2>
</p>
<p>
<div class="radarChart"></div>
</p>
<script src="js/radarChart.js"></script>
<script src="js/utils.js"></script>
<script src="js/radarChart-prepare.js"></script>
<script>
var currentSymbols = [
"1"
];
var currentSymbolLabels = [
"0001 CKH Holdings"
];
var currentPeriods = [
"201609"
];
var currentPeriodLabels = [
"2016-09"
];
$(".chosen-symbol").chosen();
$(".chosen-period").chosen();
$(".chosen-symbol").chosen().change(function(event) {
var vals = $(".chosen-symbol").val();
var labels = [];
for (var i = 0; i < this.options.length; ++i) {
if (this.options[i].selected) {
labels.push(prettifyHtmlString($(this.options[i]).html()));
}
}
currentSymbols = vals;
currentSymbolLabels = labels;
drawChart(currentSymbols, currentPeriods);
$(".chart-caption").text("Fundamentals of " + currentSymbolLabels + " at " + currentPeriodLabels);
});
$(".chosen-period").chosen().change(function(event) {
var vals = $(".chosen-period").val();
var labels = [];
for (var i = 0; i < this.options.length; ++i) {
if (this.options[i].selected) {
labels.push(prettifyHtmlString($(this.options[i]).html()));
}
}
currentPeriods = vals;
currentPeriodLabels = labels;
drawChart(currentSymbols, currentPeriods);
$(".chart-caption").text("Fundamentals of " + currentSymbolLabels + " at " + currentPeriodLabels);
});
// Draw something on load
drawChart(currentSymbols, currentPeriods);
$(".chart-caption").text("Fundamentals of " + currentSymbolLabels + " at " + currentPeriodLabels);
</script>
</body>
</html>