Stock Quote & Chart Dashing Widget

README.md

Description

Stock Quote & Chart Dashing Dashboard consists of two widgets. While one displays a stock's current quote and other details; another displays its last 30-days closing stock prices.

Preview

Dependencies

json

Add the gem to your dashing gemfile:

gem 'json'

and run bundle install.

Usage

First, copy stock.coffee, stock.html, and stock.sass into the /widgets/stock directory and chart.coffee, chart.html, and chart.sass into the /widgets/chart directory. Put the yahoo_stock_quote.rb and yahoo_stock_quote.rb files in the /jobs folder.

To use the widget, put the following codes into one of the /dashboards directory's .erb file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="yahoo_stock_quote" data-view="Stock" data-prefix="$"></div>
</li>  

<li data-row="1" data-col="1" data-sizex="3" data-sizey="1">
  <div data-id="yahoo_stock_chart" data-view="Chart" data-prefix="$"></div>
</li>	

Settings

There are two jobs running for this dashboard, which are yahoo_stock_quote.rb and yahoo_stock_chart.rb. yahoo_stock_quote.rb selects data from yahoo.finance.quotes table, and yahoo_stock_chart.rb retrieves data from yahoo.finance.historicaldata table. You can change to another stock with the following line within the jobs.

symbol = "YHOO"

chart.coffee

class Dashing.Chart extends Dashing.Widget

  @accessor 'current', ->
    return @get('displayedValue') if @get('displayedValue')
    points = @get('points')
    if points
      points[points.length - 1].y

  @accessor 'moreinfo', ->
    return @get('symbol') + ' (Closing stock prices from ' + @get('startdate') + ' to ' + @get('enddate') + ')' if @get('symbol')
  
  ready: ->
    container = $(@node).parent()
    # Gross hacks. Let's fix this.
    width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
    height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
    @graph = new Rickshaw.Graph(
      element: @node
      width: width
      height: height
      series: [
        {
        color: "#fff",
        data: [{x:0, y:0}]
        }
      ]
    )

    @graph.series[0].data = @get('points') if @get('points')

    x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph)
    y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
    @graph.render()
  
  onData: (data) ->
    if @graph
      @graph.series[0].data = data.points
      @graph.render()

chart.html

<h1 class="title" data-bind="title"></h1>

<h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2>

<p class="more-info" data-bind="moreinfo"></p>

chart.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #dc5945;   //#47bbb3;

$title-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.3);
$tick-color:        rgba(0, 0, 0, 0.4);


// ----------------------------------------------------------------------------
// Widget-chart styles
// ----------------------------------------------------------------------------
.widget-chart {

  background-color: $background-color;
  position: relative;


  svg {
    position: absolute;
    opacity: 0.5;
    fill-opacity: 0.8;
    left: 0px;
    top: 0px;
  }

  .title, .value {
    position: relative;
    z-index: 99;
  }

  .title {
    color: $title-color;
  }

  .more-info {
    color: $moreinfo-color;
    font-weight: 600;
    font-size: 20px;
    margin-top: 0;
  }

  .x_tick {
    position: absolute;
    bottom: 0;
    .title {
      font-size: 20px;
      color: $tick-color;
      opacity: 0.5;
      padding-bottom: 3px;
    }
  }

  .y_ticks {
    font-size: 20px;
    fill: $tick-color;
    fill-opacity: 1;
  }

  .domain {
    display: none;
  }

}

stock.coffee

class Dashing.Stock extends Dashing.Widget
  @accessor 'price', Dashing.AnimatedValue

  @accessor 'changepercent', ->
    @get('change')[1..-1] + ' (' + @get('percentchange')[1..-1] + ')'
  
  @accessor 'title', ->
    @get('name') + ' (' +@get('symbol') + ')'
  
  @accessor 'lasttrade', ->
    'Last traded at ' + @get('lasttradetime')
  
  @accessor 'arrow', ->
    if parseFloat(@get('change')) > 0 then 'icon-arrow-up' else 'icon-arrow-down'

stock.html

<h1 class="title" data-bind="title"></h1>

<h2 class="value" data-bind="price | shortenedNumber | prepend prefix"></h2>

<p class="change-percent">
  <i data-bind-class="arrow"></i><span data-bind="changepercent"></span>
</p>

<p class="more-info" data-bind="moreinfo | raw"></p>

<p class="last-trade-time" data-bind="lasttrade"></p>

stock.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #47bbb3;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);;
$moreinfo-color:    rgba(255, 255, 255, 0.7);;
$last-trade-color:  rgba(255, 255, 255, 0.7);;

// ----------------------------------------------------------------------------
// Widget-stock styles
// ----------------------------------------------------------------------------
.widget-stock {

  background-color: $background-color;

  .title {
    color: $title-color;
  }

  .value {
    color: $value-color;
  font-size: 60px;
  }

  .change-percent {
    font-weight: 500;
    font-size: 50px;
    color: $value-color;
  }

  .more-info {
    color: $moreinfo-color;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

  .last-trade-time {
    color: $last-trade-color;
  }

}

yahoo_stock_chart.rb

require 'net/http'
require 'json'
require 'date'
 
enddate = Date.today
startdate = Date.today - 30

symbol = "YHOO"

# query  = URI::encode "select * from yahoo.finance.quotes where symbol='#{symbol}'&format=json&env=http://datatables.org/alltables.env&callback="
# query = URI::encode "select * from yahoo.finance.historicaldata where symbol='#{symbol}' and startDate='2009-09-11' and endDate='2010-03-10'&format=json&env=http://datatables.org/alltables.env&callback="
query = URI::encode "select * from yahoo.finance.historicaldata where symbol='#{symbol}' and startDate='#{startdate}' and endDate='#{enddate}'&format=json&env=http://datatables.org/alltables.env&callback="


SCHEDULER.every "12h", :first_in => 0 do |job|
  http     = Net::HTTP.new "query.yahooapis.com"
  request  = http.request Net::HTTP::Get.new("/v1/public/yql?q=#{query}")
  response = JSON.parse request.body
  results  = response["query"]["results"]["quote"]
  
  if results
    points = []
  i = 0
	results.each do |q|
	  i += 1
	  points << { x: i, y: q["Close"].to_f}
	end

    send_event("yahoo_stock_chart", { points: points.reverse, symbol: symbol, startdate: startdate, enddate: enddate })
  end
end

yahoo_stock_quote.rb

require "net/http"
require "json"

symbol = "YHOO"
query  = URI::encode "select * from yahoo.finance.quotes where symbol='#{symbol}'&format=json&env=http://datatables.org/alltables.env&callback="

SCHEDULER.every "15s", :first_in => 0 do |job|
  http     = Net::HTTP.new "query.yahooapis.com"
  request  = http.request Net::HTTP::Get.new("/v1/public/yql?q=#{query}")
  response = JSON.parse request.body
  results  = response["query"]["results"]["quote"]

  if results
  quote = {
		name: results['Name'],
		symbol: results['Symbol'],
		price: results['LastTradePriceOnly'],
		change: results['Change'],
		percentchange:  results['PercentChange'],
		lasttradetime: results['LastTradeTime']
	}
  
	send_event "yahoo_stock_quote", quote
  end
  
end