HighCharts, YQL and GoldenLayout

HighCharts,-YQL-and-GoldenLayout.markdown

HighCharts, YQL and GoldenLayout

Forked from Wolfram Hempel's Pen HighCharts, YQL and GoldenLayout.

A Pen by Captain Anonymous on CodePen.

License.

index.html

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

script.js

/********************************
* 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();
});