stockEase.js - simple jQuery plugin for outputting stock information from Yahoo's Finance API - Dependencies: Mustache.js / jQuery

Readme

Coming soon

gistfile1.js

/*!
* stockEase.js
* Author: Joe Watkins - joe-watkins.io
* Licensed under the MIT license
* Dependencies: Mustache.js, jQuery
*
*/
(function($){

		$.fn.stockEase = function(options) {

				var defaults = {
					wrapper: this,
					symbol: "AAPL",
					htmlTemplate: "#stock-template",
					changeClassUp: "up",
					changeClassDown: "down",
					debugMode: false,
					fullDebugMode: false

				}

				var options =  $.extend(defaults, options);
				var o = options;

				var stockTemplate = $(o.htmlTemplate).html();

					$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D'"+o.symbol+"'&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", function(data){
						if(o.fullDebugMode){ console.log(data);}
						var data = data.query.results.quote;
						if(data.ChangeinPercent.indexOf("+") != -1){
							data.upDown = o.changeClassUp;
						}else{
							data.upDown = o.changeClassDown;
						}
						if(o.debugMode){ console.log(data);}
						var html = Mustache.to_html(stockTemplate, data);
						$(o.wrapper).html(html);
					});



		}; // $.fn

}(jQuery));

// usage
$(".stock-info").stockEase({
	symbol: "HCP",
	debugMode: true
});

gistfile2.html

<div class="stock-info" aria-live="polite" aria-atomic="true"></div>

<script type="text/template" id="stock-template">
	<ul>
		<li class="symbol">Symbol: {{symbol}}</li>
		<li class="price">Price: ${{LastTradePriceOnly}}</li>
		<li class="change {{upDown}}">Change: <span>{{ChangeinPercent}}</span></li>
	</ul>
</script>