Cómo ver cotizaciones de acciones en Javascript

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 = '

 

      ';

      // 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 > 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.

Y este ha sido el artículo en el que trataba explicaros cómo ver cotizaciones de acciones en Javascript, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!