Oct
09
This short tutorial shows how to access Stock Information from Yahoo Finance through an AJAX call utilizing JSONP. For the tutorial the following information is required.
- JQuery - Javascript library with built in AJAX and JSONP functions
- YahooFinanceAPI - PHP library that utilizes Yahoo Finance to return stock information from an underlying call to download.finance.yahoo.com/d/qutoes.csv – Please note that you can utilize this library to create your own web page that will return various stock information. For the purpose of the example we will be accessing a url on my server to showcase the cross domain capability.
Step 1: Create a sample html page that includes the JQuery library
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"/> </head> <body> <div id="quote"> </div> </body> </html>
Step 2: Create the table that will hold the stock information returned by the AJAX call
<table cellspacing="0" cellpadding="3" border="1"> <tr> <th>Symbol</th> <th>Last Trade</th> <th>Last Trade Time</th> <th>Change</th> <th>Open</th> <th>Previous Close</th> <th>Day's Low</th> <th>Day's High</th> <th>Volume</th> </tr> <tr> <td id="symbol"></td> <td id="lastTrade"></td> <td id="lastTradeTime"></td> <td id="change"></td> <td id="open"></td> <td id="previousClose"></td> <td id="daysLow"></td> <td id="daysHigh"></td> <td id="volume"></td> </tr> </table>
Step 3: Define the JQuery JavaScript code that will call make an AJAX call for the specified stock information
- Create the document ready function so the JavaScript is not called until the page is loaded.
$(document).ready(function(){ });
- perform the AJAX call for JSONP data using the getJSON function of JQuery
$.getJSON( "http://mdbitz.com/testing/PHPYahooFinance/finance.php?symbol=DELL&callback=?", function( data ) { } );
- Output the returned data to the appropriate cells of the Table.
$("#symbol").text( data.symbol ); $("#previousClose" ).text( data.previousClose ); $("#open" ).text( data.open ); $("#lastTrade").text( data.lastTrade ); $("#lastTradeTime").text( data.lastTradeTime ); $("#change").text( data.change ); $("#daysLow").text( data.daysLow ); $("#daysHigh").text( data.daysHigh ); $("#volume").text( data.volume);
Step 4: View your sample page
| Symbol | Last Trade | Last Trade Time | Change | Open | Previous Close | Day’s Low | Day’s High | Volume |
|---|---|---|---|---|---|---|---|---|
| DELL | 16.13 | 10.19AM | +0.31 | 15.77 | 15.82 | 15.75 | 16.20 | 7162443 |
Full Sample HTML Source
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $.getJSON("http://mdbitz.com/testing/PHPYahooFinance/finance.php?symbol=DELL&callback=?", function(data){ $("#symbol").text( data.symbol ); $("#previousClose" ).text( data.previousClose ); $("#open" ).text( data.open ); $("#lastTrade").text( data.lastTrade ); $("#lastTradeTime").text( data.lastTradeTime ); $("#change").text( data.change ); $("#daysLow").text( data.daysLow ); $("#daysHigh").text( data.daysHigh ); $("#volume").text( data.volume); } ); }); </script> </head> <body> <div id="quote"> <table cellspacing="0" cellpadding="3" border="1"> <tr> <th>Symbol</th> <th>Last Trade</th> <th>Last Trade Time</th> <th>Change</th> <th>Open</th> <th>Previous Close</th> <th>Day's Low</th> <th>Day's High</th> <th>Volume</th> </tr> <tr> <td id="symbol"></td> <td id="lastTrade"></td> <td id="lastTradeTime"></td> <td id="change"></td> <td id="open"></td> <td id="previousClose"></td> <td id="daysLow"></td> <td id="daysHigh"></td> <td id="volume"></td> </tr> </table> </div> </body> </html>