test sln

by webxl

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8/jquery.flot.min.js"></script>
<script src="https://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<h1>Zephyr Associates: UI Developer Candidate Test</h1>

<div id="content">
    <div id="instructions">
        <h3>Instructions</h3>
        <ol>
            <li>Using HTML and Javascript, plot the following data on a chart:
                <br />
                <table id="data">
                    <tr>
                        <th>Symbol</th>
                        <th>Product</th>
                        <th>Risk (σ)</th>
                        <th>3yr Ann. Return</th>
                    </tr>
                    <tr>
                        <td>FMAGX</td>
                        <td>Fidelity Magellan</td>
                        <td>16.96%</td>
                        <td>10.99%</td>
                    </tr>
                    <tr>
                        <td>BFOCX</td>
                        <td>Berkshire:Focus</td>
                        <td>19.82%</td>
                        <td>17.74%</td>
                    </tr>
                    <tr>
                        <td>ADTRX</td>
                        <td>Alpine:Trans;Inst</td>
                        <td>19.38%</td>
                        <td>12.84%</td>
                    </tr>
                    <tr>
                        <td>RFG</td>
                        <td>Guggenheim S&amp;P MC 400 P Gro</td>
                        <td>17.83%</td>
                        <td>19.88%</td>
                    </tr>
                    <tr>
                        <td>VAGGX</td>
                        <td>Delaware Sel Gro;Inst</td>
                        <td>15.04%</td>
                        <td>19.42%</td>
                    </tr>
                </table>
            </li>
            <li>Make the table above interactive, so that when the...

CSS

body {
    font-family: arial;
    margin:5px;
    
}

li {
    padding: 4px 0;
}

#chart {
    height: 360px;
    width: 400px;
    margin-left: 10px;
}

#content {
    position: relative;
}

#content > div {
    float: left;
    padding: 0;
    width: 50%;
}

#instructions {
    min-width: 400px;
    padding
}

#data {
    border: 1px solid #888;
    margin-top: 4px;
}

#data td, #data th {
    padding: 3px;
}

#data th {
    background: #eee;
    border-bottom: 1px solid #888;
}

#data tr:hover td {
    background: #eee;
}

.chartLabel {
    background: lightblue;
    border: 1px solid #888;
    padding: 3px;
    position: absolute;
}

JavaScript

// JQuery & Flot version

// step 1a: get all data into an array of objects
var dataRows = $('#data tr'),
    products = [];

// scrape the table
dataRows.each(function (i, row) {
    var cells = $('td', row);
    if (!cells.length) {
        return;
    }
    var product = {
        symbol: cells.eq(0).html(),
        name: cells.eq(1).html(),
        risk: cells.eq(2).html().replace('%', ''),
        annReturn: cells.eq(3).html().replace('%', '')
    };

    products.push(product);
});

// step 1b: create the chart using flot

function drawChart(activeProduct) {
    // format flot series data

    var data = [];

    $.each(products, function (i, product) {
        data.push({
            label: product.symbol,
            data: [
                [product.risk, product.annReturn]
            ],
            points: {
                show: true,
                radius: 5 //activeProduct === product.symbol ? 8 : 5 
                /* Issue: changing the radius causes flot 
                to rescale grid; alternative is to fill point or pad grid somehow */
            }
        });
    });

    var placeholder = $('#chart'),
        options = {
            xaxis: {
                min: 13,
                max: 26
            },
            yaxis: {
                min: 9,
                max: 23
            }
        };

    var plot = $.plot(placeholder, data, options);

    if (activeProduct) {
        var productToHighlight;

        $.each(products, function (i, product) {
            if (activeProduct === product.symbol) {
                productToHighlight = product;
            }
        });

        var p = plot.pointOffset({
            x: productToHighlight.risk,
            y: productToHighlight.annReturn
        });

        var highlightLabel = $('<div>', {
            'class': 'chartLabel',
            css: {
                left: p.left + 14,
                top: p.top + 8
            },
            html: productToHighlight.name
        });

       ...