Stock Stack
Stock stack allows you to easily display share price / volume information, sourced from Yahoo Finance. Simply specify which stocks for your Stacks page to display, and Stock Stack will request this information client-side.
To the right are two simple demos of how Stock Stack looks when using either an animated effect, or its grid view.
No server-side code required! You are only limited by what information Yahoo Finance holds, including world-wide markets and indexes.
How it works
Stock stack uses jQuery to communicate with Yahoo in YQL (Yahoo Query Language). It sends a query to Yahoo's YQL web service, requesting information for a set of given stock codes. This request is in turn passed to Yahoo Finance. Yahoo processes the Finance response and sends back to your browser in JSON format. These actions occur rapidly, utilising Yahoo's YQL cache.
Note that Google Finance was investigated as a source of information - It seemed to have better Company Names (Yahoo's are sometimes abbreviated in comparison) however a major issue with Google is their rounding of penny stocks to the nearest cent.
Requirements
Stock stack requires RealMac Software's RapidWeaver and YourHead Software's Stacks plugin.
Note a Yahoo account is not required when requesting stock information.
Customization
Stock stack has the following configuration items that can be changed during editing of the Stack page.
Stock list : Use this text field to enter a comma-delimited list of stocks you require. Eg. "BHP.AX", "RIO.AX" will return BHP and Rio Tinto from the Australian Stock Exchange. "KO", "PEP" will return The Coca-Cola Company and PepsiCo Incorporated from the NYSE. Stocks must be wrapped in double-quotes, and separated by commas.
Cycle stocks : Use this checkbox to use a simple fade-in / fade-out effect to display stocks one row at a time, instead of all rows at once.
Cycle speed & Cycle timeout : Use these text boxes to adjust the cycle effect (in milliseconds)
Font override : If screen 'real estate' is limited, use this to override the font and font-size of the Stock stack. Alternatively, leave as-is to use the font / font-size of the page's theme.
Advanced Customization
To the right is a sample of the html output generated by Stock Stack for reference.
Note the stockRowDown and stockRowUp distinctions for shares with negative / positive movements, respectively.
The internal styling that ships with Stock Stack is declared at the .stockStack level, downwards. By entering styles at the .stockStack .stockStackOverride level downwards, you override the internal styles thanks to CSS specificity rules. This allows you to make styling mods using RapidWeaver's Page Header CSS tab, without having to resort to using !important everywhere.
<div id="stockStack{unique ID}" class="stockStack">
<div class="stockStackOverride">
<div class="stockHeader">
<span class="stkCpy">Company</span>
<span class="stkSym">Symbol</span>
<span class="stkLast">Last</span>
<span class="stkChg">Change</span>
<span class="stkPct">Chg %</span>
<span class="stkVol">Volume</span>
</div>
<div id="stockRow{unique ID}" class="stockRows">
<div class="stockRowDown">
<span class="stkCpy">Acme Widgets Corp</span>
<span class="stkSym">AWC</span>
<span class="stkLast">359.18</span>
<span class="stkChg">-2.33</span>
<span class="stkPct">-0.65</span>
<span class="stkVol">22,000,000</span>
</div>
<div class="stockRowUp">
<span class="stkCpy">Yoyodyne</span>
<span class="stkSym">YYD</span>
<span class="stkLast">84.91</span>
<span class="stkChg">+2.09</span>
<span class="stkPct">2.52</span>
<span class="stkVol">18,000,000</span>
</div>
</div>
</div>
</div>
.stockStack .stockStackOverride .stockHeader
{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
color: #000;
}
.stockStack .stockStackOverride .stockRowUp
{
background: #616B2B;
background: -moz-linear-gradient(top, #616B2B 0%, #3E5112 50%, #2D4200 51%, #4D6316 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#616B2B), color-stop(50%,#3E5112), color-stop(51%,#2D4200), color-stop(100%,#4D6316));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616B2B', endColorstr='#4D6316',GradientType=0 );
color: #EEE;
}
.stockStack .stockStackOverride .stockRowDown
{
background: #6B2A2A;
background: -moz-linear-gradient(top, #6B2A2A 0%, #511212 50%, #420000 51%, #631515 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6B2A2A), color-stop(50%,#511212), color-stop(51%,#420000), color-stop(100%,#631515));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6B2A2A', endColorstr='#631515',GradientType=0 );
color: #EEE;
}
.stockStack .stockStackOverride .stkCpy,
.stockStack .stockStackOverride .stkChg
{
display: none; /* Hide the Company Name and Change columns */
}
.stockStack .stockStackOverride SPAN
{
width: 23%; /* Spread the remaining 4 (visible) spans out */
}
Compatibility
Stock Stack works well with all major browsers (Safari, FireFox, Chrome, Opera and Internet Explorer)
Disclaimer
Yahoo's YQL web service is rate-limited, to allow 1,000 requests per (client) IP address, per hour. This is more than ample, but it is important customers wishing to purchase Stock stack understand this limit set by Yahoo.
A worst-case example of 5 stock stacks on a page, each requesting a different set of stocks, constantly refreshed by a visitor to your site would reach this limit after refreshing the page _200_ times in a single hour. (More than ample!) The good news is that because the query is called from the client-side, this limit is per visitor, ie. this is not a limit imposed on your server.
