Skip to content

Instantly share code, notes, and snippets.

@rmueck
Forked from wesee/README.md
Created January 12, 2017 12:04
Show Gist options
  • Save rmueck/1f6e5a1348f8dec33b81d6f416c69558 to your computer and use it in GitHub Desktop.
Save rmueck/1f6e5a1348f8dec33b81d6f416c69558 to your computer and use it in GitHub Desktop.
Stock Quote & Chart Dashing Widget

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"
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()
<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>
// ----------------------------------------------------------------------------
// 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;
}
}
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'
<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>
// ----------------------------------------------------------------------------
// 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;
}
}
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
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment