The Scrolling Stock Ticker Project

I. Overview

The scrolling stock ticker above is a simple example of a lightweight component for retrieving real-time data and displaying it dynamically in a web browser. Many stock tickers today are based on heavy Java applets, which tend to slow down my computer considerably. Other tickers based on JavaScript and Ajax do not have a scrolling feature. The basic marquee scrollers do not retrieve real-time data. So, I decided to develop my own simple scrolling stock ticker which combines all of these functions.

II. Consulting

I do my best to explain the concepts and techniques behind my projects. If you like my work and can use my expertise in your projects, I am available for consulting at a competitive rate.

III. Components

1. Stock Data Retrieval Component

This component is a group of PHP functions for querying a web data source, retrieving the resulting data, and storing the result in a DOM document object. These functions are located in a standalone PHP file.

First, the stock quotes are retrieved using the @fopen() file pointer to the following url:

The Yahoo Finance site will return a comma-delimited CSV file based on the query parameters. More info on Yahoo’s data protocol can be found here. Other web services return data in RSS, JSON, or XML formats, which will require different query and parsing methods.

Next, the CSV-formatted results are parsed by the @fgetcsv() function, which stores the comma-delimited values into an array. The array values are then placed into <span> elements and returned in the following format:

2. CSS Display Component

Not exactly a “component”, this is simply a CSS file which contains formatting for the <span> data above. For example:

3. Ajax Stock Update Component

This component is a group of JavaScript functions for dynamically updating the stock quotes using Ajax. Ajax is a group of web techniques for updating a web page without the user having to press the Refresh button.

The function uses the http_request.onreadystatechange property to call the Stock Data Retrieval Component (i.e. the standalone PHP file) to retrieve a new set of <span> elements containing the newly-updated stock quotes. The document object is then updated dynamically by replacing the <span> contents of the <div id=”RayStockTickerID”> node as follows:

4. Scrolling Marquee Component

This component is a group of JavaScript functions which retrieve the stock quotes from the DOM document object, display the css-formatted stock quotes in a line of text, then scroll the text from right to left one pixel at a time with the setTimeout() function.

As each stock quote falls off the left of the screen, its <span> node is removed and appended to the end of the chain to create a continuous loop. At the end of each loop, the stock quotes are updated dynamically by the Ajax Stock Update Component.

5. Chart Display Component

When you move the mouse to a particular stock in the ticker, this component will display an overlay of the corresponding daily stock chart. This is accomplished using onmouseover() event handlers within each stock’s <span> tag. The onmouseover() event calls a function which dynamically creates an <img> element and retrieves the chart from Yahoo Finance as follows:

The mousemove() function moves the chart based on the mouse cursor’s current position. The onmouseout() function hides the chart by setting the imgbox visibility to ‘hidden’.

6. Main Component

The main component is a a section of PHP code in the main website which creates all the components above and initiates the program.

IV. Future Enhancements

A. Different Input Formats

As mentioned above, the input data streams may be formatted in RSS, JSON, XML, etc. Functions can be developed for parsing and querying these other data protocols.

B. Caching

This simple project does not implement caching since it does not use previous stock data. A cache can be developed to store data into an external database or text file before displaying it on the screen.

C. Data Processing

The incoming data can be processed and enriched before displaying to the web page. For example, the stock ticker could display only those stocks which have crossed their 50-day moving average, or those that have exceeded their daily VaR limits within a portfolio.

D. Different Output Formats

Instead of a simple scrolling ticker display, this app can be modified to create an output data stream in other formats like RSS, JSON, XML, database, e-mail, etc, or other platforms such as Facebook, Twitter, and mobile devices.