-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (81 loc) · 2.93 KB
/
index.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
<html>
<head>
<title>Graph using SVG</title>
</head>
<body>
<h1>Graph using SVG library svg.js</h1>
<table border=1>
<tr>
<td width=50%> <!-- Column Begins -->
<p>
<ol>
<li> Chart representing a small data set.
<table id='tb' border=1>
<tr>
<th>Symbol</th>
<th>Product</th>
<th>Risk (σ)</th>
<th>3yr Ann. Return</th>
</tr>
<tr id='FMAGX'>
<td>FMAGX</td>
<td>Fidelity Magellan</td>
<td>16.96%</td>
<td>10.99%</td>
</tr>
<tr id='BFOCX'>
<td>BFOCX</td>
<td>Berkshire:Focus</td>
<td>19.82%</td>
<td>17.74%</td>
</tr>
<tr id='ADTRX'>
<td>ADTRX</td>
<td>Alpine:Trans;Inst</td>
<td>19.38%</td>
<td>12.84%</td>
</tr>
<tr id='RFG'>
<td>RFG</td>
<td>Guggenheim S&P MC 400 P Gro</td>
<td>17.83%</td>
<td>19.88%</td>
</tr>
<tr id='VAGGX'>
<td>VAGGX</td>
<td>Delaware Sel Gro;Inst</td>
<td>15.04%</td>
<td>19.42%</td>
</tr>
</table>
</li>
<li>
The table above is interactive, so that when the mouse cursor hovers above a row, the row is highlighted and the appropriate
point on the chart is highlighted. Alternatively, you can make the point on the chart highlight the row in the table, when the mouse hovers above the point.
</li>
<li>
A reusable component manages the selection state of products currently shown in the chart.
<ul>
<li>Changing the selection status for a product</li>
<li>Querying the selection status for a product</li>
<li>Setting the list of displayed products</li>
<li>The component provides a mean for clients to receive notifications whenever the selection state of a product changes.</li>
</ul>
</li>
</ol>
</p>
</td> <!-- Column Ends -->
<td> <!-- Column Begins -->
<!-- Chart goes here -->
<i>
<div id='drawing' style='margin-left: 50px'> </div>
</i>
</td> <!-- Column Ends -->
</tr>
</table>
</body>
<script src='svg.js'></script>
<script src='SelectionManager.js'></script>
<script src='drawChart.js'></script>
<script src='launcher.js'></script>
</html>