Magic Price Ticker and the BLP JSON API

The guys at Quiet Speculation mentioned a self-updating stock ticker for Magic card prices as another cool feature they would like to see. In the spirit of BLP's stock-like price graphs, I thought the feature was a great fit.

The first iteration of the ticker is below! It requires JavaScript like the embeddable search bar I added a few days ago, but the ticker runs off BLP's new JSON API. The API is publicly accessible, but it's pretty basic at the moment. The API is available at http://blacklotusproject.com/json/ and returns today's top cards, their prices, and their changes from the previous day.

Sample response:

[
  {
    "percent_change": "0.26",
    "name": "Banefire",
    "url":
      "http://blacklotusproject.com/cards/CON/Banefire/",
    "price": "7.66",
    "up": true,
    "set_code": "CON",
    "change": "0.02"
  },
  {
    "percent_change": "-0.29",
    "name": "Nyxathid",
    "url":
      "http://blacklotusproject.com/cards/CON/Nyxathid/",
    "price": "3.38",
    "up": false,
    "set_code": "CON",
    "change": "-0.01"
  }
]

The interface supports JSONP through the jsonp attribute. A request to http://blacklotusproject.com/json/?jsonp=callback would return the data wrapped in a call to callback.

JSONP callback:

callback([obj, obj2, ...]);

Preview:

Code:

<!-- Black Lotus Project Price Ticker --> <div id="blp2"></div> <script type="text/javascript" src="http://media.blacklotusproject.com/cards_media/script/jsapi.min.js"></script> <script type="text/javascript"> var ticker = new blproject.PriceTicker(); ticker.scroll = 3; ticker.hideset = true; ticker.draw('blp2'); </script>

The ticker can be embedded in any web page using this code. It supports a few basic options right now.

Ticker options:

scroll

The number of pixels the content is scrolled at each interval. Default is 2.

timeout

The time in milliseconds between each interval. Default is 40.

hideset

Whether to hide the three-letter expansion code after the name of each card. Default is false.

Tickers only have a single function: draw. It takes the ID of the element that the ticker should use.