Home > Jquery, Web Development > Access YQL finance data using Jquery

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

  1. December 1, 2011 at 1:00 pm

    Hi, it worked fine for couple times but now I just keep getting
    “Uncaught TypeError: Cannot read property ‘quote’ of null” whenever I search for the historical data on your demo.

    I wonder, is this a problem with their end?

  2. Lou
    June 24, 2012 at 9:56 pm

    For this to wirk in IE(9) the the yqlURL should have a ‘callback=?’ paramater.

    See this discussion: http://stackoverflow.com/questions/6514457/getjson-or-ajax-requests-not-working-with-ie9

    Lou

  3. Anonymous
    February 26, 2015 at 8:13 am

    I’m confused what you mean to include the resources you commented out in our tag

  4. February 26, 2015 at 10:00 am

    mean to write “HTML document instead of tag”

    • Anonymous
      February 26, 2015 at 10:06 am

      Got that figured out, thank you though! On a side not I ran into the same issue that jaequery ran into, even on the fiddle, Any ideas or do you think its an issue on my end

    • February 26, 2015 at 10:08 am

      Ended up figuring that out. However I ran into the same issue that the previous user had with the quote of null. Thoughts?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: