Forked from Wolfram Hempel's Pen HighCharts, YQL and GoldenLayout.
A Pen by Captain Anonymous on CodePen.
Forked from Wolfram Hempel's Pen HighCharts, YQL and GoldenLayout.
A Pen by Captain Anonymous on CodePen.
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> | |
<script type="text/javascript" src="//golden-layout.com/assets/js/goldenlayout.min.js"></script> | |
<script type="text/javascript" src="//code.highcharts.com/stock/highstock.js"></script> | |
<script type="text/javascript" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/152047/highcharts-dark-theme.js"></script> | |
<link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-base.css" /> | |
<link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-dark-theme.css" /> | |
/******************************** | |
* Class StockDataRequest | |
********************************/ | |
Date.prototype.yyyymmdd = function() { | |
var yyyy = this.getFullYear().toString(); | |
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based | |
var dd = (this.getDate()-1).toString(); | |
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]); // padding | |
}; | |
d = new Date(); | |
var datee = d.yyyymmdd(); | |
StockDataRequest = function( tickerSymbol, callback ) { | |
this._tickerSymbol = tickerSymbol; | |
this._callback = callback; | |
this._loadData(); | |
}; | |
StockDataRequest.prototype._createYqlQuery = function() { | |
var url = 'https://query.yahooapis.com/v1/public/yql?' + | |
'q=select * from yahoo.finance.historicaldata '+ | |
'where symbol = "' + this._tickerSymbol + '" ' + | |
'and startDate = "2015-01-01" and endDate = "(datee)"&' + | |
'format=json&diagnostics=true&' + | |
'env=store://datatables.org/alltableswithkeys'; | |
return encodeURI( url ); | |
}; | |
StockDataRequest.prototype._loadData = function() { | |
$.ajax({ | |
url: this._createYqlQuery( this._tickerSymbol ), | |
success: this._onDataReceived.bind( this ), | |
cache: true, | |
dataType: 'jsonp' | |
}); | |
}; | |
StockDataRequest.prototype._onDataReceived = function( rawData ) { | |
var highchartsData = this._transformDataForHighCharts( rawData ); | |
this._callback( highchartsData ); | |
}; | |
StockDataRequest.prototype._transformDataForHighCharts = function( rawData ) { | |
var quotes = rawData.query.results.quote, | |
data = [], | |
i; | |
for( i = quotes.length - 1; i >=0; i-- ) { | |
data.push([ | |
( new Date( quotes[ i ].Date ) ).getTime(), | |
parseFloat( quotes[ i ].Open ) | |
]); | |
} | |
return data; | |
}; | |
/******************************** | |
* Class StockChartComponent | |
********************************/ | |
StockChartComponent = function( container, state ) { | |
this._highChartsConfig = { | |
title: { text: 'Historic prices for ' + state.companyName }, | |
series: [], | |
plotOptions: { line: { marker: { enabled: false } } }, | |
xAxis:{ type: 'datetime' }, | |
yAxis:{ title: 'Price in USD' }, | |
chart:{ | |
renderTo: container.getElement()[ 0 ] | |
} | |
}; | |
this._chart = null; | |
this._container = container; | |
this._container.setTitle( 'Chart for ' + state.companyName ); | |
this._state = state; | |
this._container.on( 'open', this._createChart.bind( this ) ); | |
}; | |
StockChartComponent.prototype._createChart = function() { | |
this._chart = new Highcharts.Chart( this._highChartsConfig ); | |
this._chart.showLoading( 'Loading data...' ); | |
new StockDataRequest( this._state.tickerSymbol, this._onDataReady.bind( this ) ); | |
}; | |
StockChartComponent.prototype._onDataReady = function( highchartsData ) { | |
this._chart.addSeries({ | |
color: this._state.color, | |
name: this._state.companyName, | |
data: highchartsData | |
}); | |
this._chart.hideLoading(); | |
this._bindContainerEvents(); | |
}; | |
StockChartComponent.prototype._bindContainerEvents = function() { | |
this._container.on( 'resize', this._setSize.bind( this ) ); | |
this._container.on( 'destroy', this._chart.destroy.bind( this._chart ) ); | |
}; | |
StockChartComponent.prototype._setSize = function() { | |
this._chart.setSize( this._container.width, this._container.height ); | |
}; | |
/******************************** | |
* Initialise Layout | |
********************************/ | |
$(function(){ | |
var myLayout = new GoldenLayout({ | |
content:[{ | |
type: 'row', | |
content: [{ | |
type: 'component', | |
componentName: 'stockChart', | |
componentState: { | |
companyName: 'GOOGL.', | |
tickerSymbol: 'GOOGL', | |
color:'#7C7' | |
} | |
},{ | |
type: 'component', | |
componentName: 'stockChart', | |
componentState: { | |
companyName: 'Apple Inc.', | |
tickerSymbol: 'AAPL', | |
color: '#77C' | |
} | |
}] | |
}] | |
}); | |
myLayout.registerComponent( 'stockChart', StockChartComponent ); | |
myLayout.init(); | |
}); | |