How to Implement a JavaScript Stock Ticker

Getting Started

The easiest way to get yourself a JavaScript stock ticker on your website is to start off with one of the freely available JavaScript source codes that have been made available by the respective authors.

Stock quotes are just one of those things you do not create from scratch as this is data picked up from a certain source such as Google finance and Yahoo finance and several other sources of your choice. Some may be commercial while others may be free.

Whichever the case, displaying the source code is just some common JavaScript source code which you can use to scroll your JavaScript stock quotes and an assortment of HTML span containers wrapped into a series of other HTML span containers. These lists are populated from the various stock quote services on the Internet.

Putting the JavaScript Stock Ticker Code Together

One simple way to get going is to use jQuery, the open source JavaScript Ajax client side library. This JavaScript library has already got most of the functionality you would need. To link to it, you will simply need to add the following line into the header of your HTML pages where you want the stock ticker to appear.

You can see here that this library is called directly from the google APIs website so there is nothing more you will need to do here.

The next thing is to call in the functions that implement the necessary jQuery functions. That is done by linking the following file containing the JavaScript stock ticker functions.

This file is stored on a location on your own web server. In this case the file is on the same directory as your HTML file.

Once those files are in place, you are now ready to implement the JavaScript stock ticker.

You will need to have a HTML Div container with an id and a class as show below place within the body of your HTML page where you would like the JavaScript Stock quote to appear. Within the HTML Div container you have HTML span conainters with varied classes loaded based on the data. The class up represents a stock that has gone up while down represents a stock that has dropped. Eq represents stocks that have not changed. These also affect the color of the quotes making them wither green,red or black respectively.

Closing Notes

You may need to populate the HTML span items dynamically at the server level based on the stock data service providers documentation. A good place you may like to start is using the Yahoo stocks data.

You might also want to implement Ajax code to help you dynamically update the stocks specific intervals. A sample of the code that can do this is

function keep_alive() {

xmlhttp = new XMLHttpRequest();

xmlhttp.open(‘GET’, “path_to_your_server_stock_data_code”);

xmlhttp.send(null);

xmlhttp.onreadystatechange = function(){

if (xmlhttp.readyState == 4) {

if(xmlhttp.status == 200 ){

var receivedText = xmlhttp.responseText;

if(document.getElementById){

document.getElementById(‘updatesuff’).innerHTML = receivedText;

}

}else{

alert(“Unable to transmit your changes to the server.”);

return false;}}}};

setInterval(keep_alive,840000); //My session expires at 15 minutes

Here you can download a JavaScript stock ticker which you can use on your site.

Other JavaScript tutorials of interest include sample source code for JavaScript menus as well as sample JavaScript delay code.