Stock Chart - Fixing Line, long-term trend

Sébastien Janaud - May 23, 2015 - updated june 2017 / Samples

Stock Feature

Stock chart are graphical representations of historical stock prices which help to determine current supply and demand forces in a stock market exchange. In stock and commodity markets trading, studying chart patterns plays a large role during technical analysis. Analysis of stock chart allows a trader to determine with more accuracy just what the current supply and demand is in a stock. JenScript does support common indicators and overlays such as ohlc, candle stick, moving average, sma, ema, wma, macd, bollinger bands, time picker, etc.

Register plugin StockPlugin in view projection. Add Stock in plugin then register layouts like StockFixingLayer as indicators of these stocks on period.

Resource : sample source code - slv historical prices - Stock Web Worker - Stock Loader

Learn : javascript stock plugin sources

Part : Part 1 - Part 2 - Part 3 - Part 4 - Part 5 - Part 6 - Part 7 - Part 8

Related : Modeling Chart Metrics

For this case study, we lookup historical stock prices at nasdaq market. For example 'slv' which is The iShares Silver Trust (the 'Trust') seeks to reflect generally the performance of the price of silver. Go in historical menu section and after re order this history we have slv historical prices split by years.

Stock item is defined by properties :

fixing : the fixing date
low : the lowest price over one unit of time(e.g., one day or one hour)
high price : the highest price over one unit of time ()e.g., one day or one hour)
open price : the opening price (e.g., for a daily chart this would be the starting price for that day)
close price : the closing price for this time fixing period
volume : the number of shares or contracts traded in a security or an entire market

Non blocking UI process supposes we are using web work that loads asynchronously each historical data parts. we can use this stock worker that provides the data download processing and the stock loader that manages the loaded data.

First prepare HTML document.


<div style="padding-top: 20px;">
	<div  id="fixingView"></div>
</div>



<script type="text/javascript">
	//action code
</script>

For long-term trend, it's faster to use simple curve trend that draws a line curve instead of shapes (OHLC or CandleStick) by days.



var minor = {
			tickMarkerSize : 2,
			tickMarkerColor : '#9b59b6',
			tickMarkerStroke : 1
	};
	var median = {
		tickMarkerSize : 4,
		tickMarkerColor : '#d35400',
		tickMarkerStroke : 1.2,
		tickTextColor : '#d35400',
		tickTextFontSize : 10
	};
	var major = {
		tickMarkerSize : 8,
		tickMarkerColor : '#2980b9',
		tickMarkerStroke : 3,
		tickTextColor : '#2980b9',
		tickTextFontSize : 12,
		tickTextOffset : 16
	};
	
function createViewStockCurveFixing(container, width, height) {

	var view = new JenScript.View({
		name : container,
		width : width,
		height : height,
		holders : 20,
		west : 80,
		south : 80,
	});

	var startDate = new Date(2009, 09, 01);
	var endDate = new Date(2015 - updated june 2017, 11, 01);

	var proj1 = new JenScript.TimeXProjection({
		cornerRadius : 6,
		name : "proj1",
		minXDate : startDate,
		maxXDate : endDate,
		minY : 0,
		maxY : 60
	});
	view.registerProjection(proj1);
	
	var outline = new JenScript.DeviceOutlinePlugin({color : 'darkslategrey'});
	proj1.registerPlugin(outline);


	var southMetrics1 = new JenScript.AxisMetricsTiming({
		axis : JenScript.Axis.AxisSouth,
		models : [new JenScript.MonthModel({}), new JenScript.YearModel({})],
		minor : minor,
		median : median,
		major : major,
		gravity : 'rotate'
	});
	proj1.registerPlugin(southMetrics1);
	
	
	var westMetrics = new JenScript.AxisMetricsModeled({
		axis : JenScript.Axis.AxisWest,
		minor : minor,
		median : median,
		major : major
	});
	proj1.registerPlugin(westMetrics);


	var stockPlugin = new JenScript.StockPlugin();
	proj1.registerPlugin(stockPlugin);

	stockPlugin.addLayer(new JenScript.StockFixingLayer({
		curveColor :'pink',
		curveWidth : 1
	}));

	
	var legend = new JenScript.TitleLegendPlugin({
		layout : 'relative',
		part   : JenScript.ViewPart.Device,
		text   : 'SLV Fixing',
		fontSize : 14,
		textColor : '#2980b9',
		xAlign : 'right',
		yAlign : 'top',
	});
	proj1.registerPlugin(legend);
	
	var loader = new StockLoader(proj1,[2010,2011,2012,2013,2014],function(year,stocks){
		stockPlugin.setStocks(stocks);
	});
}