Access YQL finance data using Jquery

Let’s take a look at how you can access stock information(realtime and historical) without the use of server-side code.  In case you haven’t noticed, it is hard these days to find a good source of market data that will satisfy most developers’ needs (free, fast and easy).

YQL and Open Data tables

YQL (Yahoo! Query Language) is a SQL-like language that lets you query, filter, and join data across the web. Open Data tables are YQL plugins (XML) that can mapped onto any web service or source on the internet. Together, they provide developers a simple way to access data via a RESTful web api in XML or JSON format. For our example we use jQuery to retrieve our information as a JSON object.

HTML

jQueryUI’s datepicker is a life saver. HTML5’s input placeholder is a nice little enhancement as well. I commented out the resources the you will need to include in your tag.

<!-- Header References
http://code.jquery.com/jquery-1.5.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js -->

<div id="inputSymbol"> 
        <p>Enter Stock</p> 
            <input id="txtSymbol" class="required" Placeholder="Symbol" />   
            <input id="startDate" class="datePick required" type="text"  Placeholder="From" />   
            <input id="endDate" class="datePick" type="text" Placeholder="To"  /> 
        <button ID="submit">Submit</button> 
    </div>     
<div class="realtime"> 
    <div><p>Name</p><span id="symbol"></span></div> 
    <div><p>RealtimeBid</p><span id="bidRealtime"></span></div> 
</div>   
<div class="historical"> 
    <div><p>Date</p><span id="date"></span></div>
    <div><p>Price</p><span id="closeValue"></span></div> 
</div> 

CSS

Used some CSS3 on the textbox for the required field indicator

*{margin:0; padding:0}  body{padding:1em; color:#555; font-family:verdana; text-align:center}

p{padding:0.5em 0; font-weight:bold} input:focus { outline:none; }

input, button{padding:0.4em 0.3em;  margin:0.5em 0em}
input{border:1px solid #999; border-left:1.05em solid #aaa;-moz-border-radius: 15px; border-radius: 15px;}

.required{ border-left:1.05em solid #E8725C;} 

#inputSymbol, .realtime, .historical{ 
    padding:0.5em 0.5em; margin:0% 20%;  
    text-align:left; 
    border-bottom:1px solid #aaa
}
.realtime div, .historical div, .realtime div span, .historical div span{ display:inline-block }
.realtime div, .historical div{width:45%}

#date span, #closeValue span { display:block; color:#666; font-size:90%}
.ui-datepicker { font-size:11px !important} /* skrink datepicker */

jQuery

After we pull our JSON object, we output our columns of interest to their appropriate HTML elements.

var yqlURL="http://query.yahooapis.com/v1/public/yql?q=";
var dataFormat="&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";

$(function() { //Load jQueryUI DatePicker by class name
    $( ".datePick" ).datepicker({dateFormat: 'yy-mm-dd'} );
});
 
$("#submit").click(function() {
    var symbol = $("#txtSymbol").val();
    var startDate=$("#startDate").val();
    var endDate=$("#endDate").val();

    var realtimeQ = yqlURL+"select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + symbol + "%22)%0A%09%09&"+ dataFormat;
    var historicalQ = yqlURL+"select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20%3D%20%22"+ symbol +"%22%20and%20startDate%20%3D%20%22"+ startDate +"%22%20and%20endDate%20%3D%20%22"+ endDate +"%22"+ dataFormat;

    $(function() {
        $.getJSON(realtimeQ, function(json) {//YQL Request
            $('#symbol').text(json.query.results.quote.Name);//Assign quote.Param to span tag
            $('#bidRealtime').text(json.query.results.quote.BidRealtime);
        });
    });  
    $(function() {
        $.getJSON(historicalQ, function(json) {            
            $.each(json.query.results.quote, function(i, quote) {//loop results.quote object 
                $("#date").append('<span>' + quote.Date + '</span');//create span for each record
            });            
            $.each(json.query.results.quote, function(i, quote) { //new each statement is needed
                $("#closeValue").append('<span>' + quote.Close + '</span');
            });
        });
    });
});

Editable Demo

If anyone is familiar with any free stock market APIs out there, I would be interested in checking it out and taking it out for a test drive.

Good Luck,

Max