Clase que nos proporciona la cotización de las acciones en tiempo real. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Lenguajes de script Javascript

¡votar!

Clase que nos proporciona la cotización de las acciones en tiempo real

Para todos aquellos que le gustan invertir en bolsa y que tienen acciones de distintas empresas, os traemos la clase Request.Stocks, que nos ofrecerá los valores que tienen las acciones en tiempo real, refrescando los valores de forma automáticas.

Veamos como poder hacer uso de esta clase para pode tener nuestra propia tabla de valores de las acciones. Para ello haremos uso de Request.JSON y Yahoo!'s YQL.

Lo primero que haremos será crear un sencillo código HTML. Consistirán en dos DIV donde luego se pintarán los datos.



<div id="stockIndicator">Retrieving stock information....</div>
<div id="stockContainer"></div>

A continuación mostramos los estilos que le asignaremos. Como todo, esto se puede modificar para que cada uno aplique los estilos que vea necesarios.



#stockContainer, #stockIndicator { width:500px; }

#stockContainer    { background:#343434; padding:10px; }

#stockIndicator    { text-align:right; visibility:hidden; padding:5px; }

.stockRow      { padding:5px 10px; clear:both; margin-bottom:5px; }

.stockName    { font-size:14px; font-weight:normal; float:left; }

.stockData    { font-size:11px; float:right; width:200px; text-align:right; }



/* stock differential */`

.stockSame      {  }

.stockUp      { background:lightgreen; }

.stockUp .stockName  { color:green; }

.stockDown      { background:pink; }

.stockDown .stockName { color:red; }

Antes de meternos con el ejemplo a fondo, veamos en que consiste la clase Request.Stocks, que es una extensión de JSONP, que permite usar varias configuraciones por defecto de YQL Yahoo, además de añadir otras más, que permite obtener de forma personalizada ciertos datos que queremos recibir de Yahoo, como será en este caso con los valores bursátiles. Algunas de las opciones de personalización que incluye son:

Stocks: un array de símbolos donde recuperar los datos
sortBy: el campo de datos para ordenar.
Display: Los campos de datos para recuperar desde Yahoo. Algunos de estos campos son: Ask, AverageDailyVolume, Bid, AskRealtime, BidRealtime, BookValue, Change&PercentChange, Change, Commission, ChangeRealtime, AfterHoursChangeRealtime, DividendShare, LastTradeDate, TradeDate, y algunos más.

El código correspondiente a nuestro ejemplo será el siguiente:



// When the dom is ready...

window.addEvent("domready",function() {

// Get the stock container and indicator

var container = document.id("stockContainer");

var indicator = document.id("stockIndicator");

// Create the instance

var request = new Request.Stocks({

// Stocks to retrieve

stocks: ["AAPL","GOOG","MSFT"],

// Formatter upon result

onComplete: function(result) {

// Log out the result to see the structure

console.warn(result);

// Hide the indicator

indicator.fade(0);

// Create a template with which to display the information

var template = ' 

&#60;div class="stockRow stock{UpDown}"&#62; 

&#60;div class="stockName"&#62;({symbol}) {Name}&#60;/div&#62;

&#60;div class="stockData"&#62;{Ask} {Change} {ChangeinPercent}&#60;/div&#62; 

&#60;br class="clear" /&#62; 

&#60;/div&#62; 

';

// For every stock , display its information in the template

var html ="";

Array.from(result.query.results.quote).each(function(quote) {

// Add an "UpDown" property to the quote object

var change = Number.from(quote.Change);

quote.UpDown =  change == 0 ? "Same" : change &#62; 0 ? "Up" : "Down";

// Update running contnet

html += template.substitute(quote);

});

// Update the content

container.set("html",html);

},

// Show the indicator upon request

onRequest: function () {

indicator.fade(1);

}

});

// Send the request every 20 seconds

(function() {

request.send();

}).periodical(20 * 1000);

// Send right away

request.send();

El método onComplete proporciona la funcionalidad necesaria para controlar los datos obtenidos de Yahoo. Si nos fijamos en el código, podemos ver como creamos la cadena de resultados utilizando string.substitute de MooTools.

Si quieren, pueden ver un ejemplo en el siguiente enlace.

Vía: DavidWalsh