Commodities Quotes Widget

HTML

<body>
    <div id="titlebkgrnd"></div>
    <div id="titletext">Commodities</div>
    <div id="titleaccent"></div>
<!--The form for the radio toggle buttons-->
<form name="range">
    <input id="rdb1" class="radio" type="radio" name="toggler" value="1" checked="checked"><label for="rdb1">Current</label>
    <input id="rdb2" class="radio" type="radio" name="toggler" value="2" ><label for="rdb2">24-Hour</label>
    <input id="rdb3" class="radio" type="radio" name="toggler" value="3" ><label for="rdb3">Week</label>
    <input id="rdb4" class="radio" type="radio" name="toggler" value="4" ><label for="rdb4">Month</label>
</form>

<!--The div and associated data for each radio toggle button-->
<div id="blk-1" class="current">
    <table id="table1" class="table">
    <tr>
    <th class="tblheader">Name</th>
    <th class="tblheader">Ask</th>
    <th class="tblheader">Bid</th>
    <th class="tblheader">Change</th>
    <th class="tblheader">Change%</th>
    </tr>
</table>
</div>
<div id="blk-2" class="toHide">
    <table id="table2" class="table">
    <tr>
    <th class="tblheader">Name</th>
    <th class="tblheader">Prev. Close</th>
    <th class="tblheader">Change</th>
    <th class="tblheader">Change%</th>
    </tr>
    </table>
</div>
<div id="blk-3" class="toHide">
    Weekly comparison of commodity quote info here
</div>
<div id="blk-4" class="toHide">
    Monthly comparison of commodity quote info here
</div>
</body>

CSS

#titlebkgrnd {
    background-color: #103346;
    height: 28px;
    width: 305px;
}
#titletext {
    color: #ffffff;
    font-size: 15pt;
    position: fixed;
    top: 11px;
    left: 18px;
}
#titleaccent {
    background-color: #C3A43F;
    height: 6px;
    width: 305px;
}
.radio {
    display: none;
    margin: 10px;
}
.radio + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    font-weight: bold;
}
.radio:checked + label {
    text-decoration: underline;
}
.toHide {
    display: none;
}
.current {
    display: block;
}
.table {
    padding-top: 8px;
}
.tblheader {
    font-size: 8pt;
}
.my-new-list {
    font-size: 11pt;
}

/*These two classes, .red & .green are used to change the font color of values
depending on the symbol that preceeds the value (+ or -)*/
.red { color: red; }
.green { color: green; }

JavaScript

//This function handles navigation between the various <div>'s housing range data
$(function () {
    $("[name=toggler]").click(function () {
        $('.toHide').hide();
        $('.current').hide();
        $("#blk-" + $(this).val()).show(100);
    });
});
//This function makes the request to the Yahoo API for symbols GCF14.CMX, SIF14.CMX, PAH14.NYM, PLF14.NYM
//To create the link for the query, the YQL console was utilized
$(function () {
    $.getJSON('http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20yahoo.finance.quotes%20WHERE%20symbol%20in(%22GCF14.CMX%22%2C%22SIF14.CMX%22%2C%22PAH14.NYM%22%2C%22PLF14.NYM%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=', function (data) {
        console.log("data: ", data);
        console.log(data.query.results.quote);
        $.each(data.query.results.quote, function (key, obj) {
            var changeClass = '';
            var changeInPercentClass = '';
            var $tr = $('<tr/>', {
                'class': 'my-new-list'
            }).appendTo('#blk-1 table');
            $tr.append($('<td/>').text(obj.Name || "--"));
            $tr.append($('<td/>').text(obj.AskRealtime || "--"));
            $tr.append($('<td/>').text(obj.BidRealtime || "--"));
            
            (obj.Change.substr(0,1) == '+') ? changeClass = 'green' : changeClass = 'red';
            
            (obj.Change.substr(0,1) == '+') ? changeInPercentClass = 'green' : changeInPercentClass = 'red';
            
            $tr.append($('<td class="'+changeClass+'">').text(obj.ChangeRealtime|| "--"));
            var re = /([+|-]\d\.\d\d\%)/gi;
            var rt = re.exec(obj.ChangePercentRealtime);
            $tr.append($('<td class="'+changeInPercentClass+'">').text( rt[0] || "--"));
        });
       $.each(data.query.results.quote, function (key, obj) {
              var change = (obj.PreviousClose - obj.Open);
              var rndchange = (Math.round(change * 100) / 100...