Graph using SVG library svg.js

  1. Chart representing a small data set.
    Symbol Product Risk (σ) 3yr Ann. Return
    FMAGX Fidelity Magellan 16.96% 10.99%
    BFOCX Berkshire:Focus 19.82% 17.74%
    ADTRX Alpine:Trans;Inst 19.38% 12.84%
    RFG Guggenheim S&P MC 400 P Gro 17.83% 19.88%
    VAGGX Delaware Sel Gro;Inst 15.04% 19.42%
  2. 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.
  3. A reusable component manages the selection state of products currently shown in the chart.
    • Changing the selection status for a product
    • Querying the selection status for a product
    • Setting the list of displayed products
    • The component provides a mean for clients to receive notifications whenever the selection state of a product changes.