Obtaining Stock Information: Utilizing AJAX, JSONP, and the YahooFinanceAPI library.

October 9, 2009

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>

Obtaining Stock Information: Utilizing AJAX, JSONP, and the YahooFinanceAPI library.

Full Sample HTML Source

Comments & Questions

Add Your Comment

Cancel