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.
In statistics, a moving average (rolling average or running average) is a calculation to analyze data points by creating a series of averages of different subsets of the full data set. A moving average is commonly used with time series data to smooth out short-term fluctuations and highlight longer-term trends or cycles. The threshold between short-term and long-term depends on the application, and the parameters of the moving average will be set accordingly. For example, it is often used in technical analysis of financial data, like stock prices, returns or trading volumes. It is also used in economics to examine gross domestic product, employment or other macroeconomic time series.
Register plugin StockPlugin
in view projection. Add Stock
in plugin then register layouts like StockMovingAverageLayer
or StockWeightedMovingAverageLayer
or StockExponentialMovingAverageLayer
as moving average curves of these stocks on period.
Resource : wikipedia - 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
In financial applications a simple moving average (SMA) is the unweighted average of the previous n data. However, in science and engineering the mean is normally taken from an equal number of data on either side of a central value. This ensures that variations in the mean are aligned with the variations in the data rather than being shifted in time. An example of a simple equally weighted running mean for a n-day sample of closing price is the mean of the previous n days' closing prices
A weighted average is any average that has multiplying factors to give different weights to data at different positions in the sample window. Mathematically, the moving average is the convolution of the datum points with a fixed weighting function. In technical analysis of financial data, a weighted moving average (WMA) has the specific meaning of weights that decrease in arithmetical progression. In an n-day WMA the latest day has weight n, the second latest n − 1, etc., down to one.
A type of moving average that is similar to a simple moving average, except that more weight is given to the latest data. The exponential moving average (EMA) is also known as "exponentially weighted moving average". This type of moving average reacts faster to recent price changes than a simple moving average. The 12- and 26-day EMAs are the most popular short-term averages, and they are used to create indicators like the moving average convergence divergence (MACD) and the percentage price oscillator (PPO). In general, the 50- and 200-day EMAs are used as signals of long-term trends.
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 :
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="sma"></div>
</div>
<div style="padding-top: 20px;">
<div id="wma"></div>
</div>
<div style="padding-top: 20px;">
<div id="ema"></div>
</div>
<script type="text/javascript">
//action code
</script>
Let's create functions
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 createViewStockMovingAverage(container, width, height) {
var view = new JenScript.View({
name : container,
width : width,
height : height,
holders : 20,
west : 80,
south : 80,
});
var startDate = new Date(2013, 04, 25);
var endDate = new Date(2013, 08, 05);
var proj1 = new JenScript.TimeXProjection({
cornerRadius : 6,
name : "proj1",
minXDate : startDate,
maxXDate : endDate,
minY : 16,
maxY : 40
});
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.HourModel({}),new JenScript.DayModel({}),new JenScript.MonthModel({})],
minor : minor,
median : median,
major : major,
});
proj1.registerPlugin(southMetrics1);
var westMetrics = new JenScript.AxisMetricsModeled({
axis : JenScript.Axis.AxisWest
});
proj1.registerPlugin(westMetrics);
var tx1 = new JenScript.TranslatePlugin();
proj1.registerPlugin(tx1);
tx1.select();
var stockPlugin = new JenScript.StockPlugin();
proj1.registerPlugin(stockPlugin);
stockPlugin.addLayer(new JenScript.StockFixingLayer({
curveColor:'black',
curveWidth : 0.4
}));
stockPlugin.addLayer(new JenScript.StockMovingAverageLayer({
curveColor:'#2980b9',
moveCount : 20
}));
var legend = new JenScript.TitleLegendPlugin({
layout : 'relative',
part : JenScript.ViewPart.Device,
text : 'SLV Fixing',
fontSize : 12,
textColor : 'black',
xAlign : 'right',
yAlign : 'top',
});
proj1.registerPlugin(legend);
var legend2 = new JenScript.TitleLegendPlugin({
layout : 'relative',
part : JenScript.ViewPart.Device,
text : 'SLV SMA(20)',
fontSize : 12,
textColor : '#2980b9',
xAlign : 'right',
yAlign : 'top',
yMargin: 26
});
proj1.registerPlugin(legend2);
var loader = new StockLoader(proj1,[2012,2013],function(year,stocks){
stockPlugin.setStocks(stocks);
});
}
function createViewStockWeightedMovingAverage(container, width, height) {
var view = new JenScript.View({
name : container,
width : width,
height : height,
holders : 20,
west : 80,
south : 80,
});
var startDate = new Date(2013, 04, 25);
var endDate = new Date(2013, 08, 05);
var proj1 = new JenScript.TimeXProjection({
cornerRadius : 6,
name : "proj1",
minXDate : startDate,
maxXDate : endDate,
minY : 16,
maxY : 40
});
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.HourModel({}),new JenScript.DayModel({}),new JenScript.MonthModel({})],
minor : minor,
median : median,
major : major,
});
proj1.registerPlugin(southMetrics1);
var westMetrics = new JenScript.AxisMetricsModeled({
axis : JenScript.Axis.AxisWest
});
proj1.registerPlugin(westMetrics);
var tx1 = new JenScript.TranslatePlugin();
proj1.registerPlugin(tx1);
tx1.select();
var stockPlugin = new JenScript.StockPlugin();
proj1.registerPlugin(stockPlugin);
stockPlugin.addLayer(new JenScript.StockFixingLayer({
curveColor:'pink',
curveWidth : 1.5
}));
stockPlugin.addLayer(new JenScript.StockWeightedMovingAverageLayer({
curveColor:'green',
moveCount : 20
}));
var legend = new JenScript.TitleLegendPlugin({
layout : 'relative',
part : JenScript.ViewPart.Device,
text : 'SLV Fixing',
fontSize : 14,
textColor : 'pink',
xAlign : 'right',
yAlign : 'top',
});
proj1.registerPlugin(legend);
var legend2 = new JenScript.TitleLegendPlugin({
layout : 'relative',
part : JenScript.ViewPart.Device,
text : 'SLV WMA(20)',
fontSize : 14,
textColor : 'purple',
xAlign : 'right',
yAlign : 'top',
yMargin: 26
});
proj1.registerPlugin(legend2);
var loader = new StockLoader(proj1,[2012,2013],function(year,stocks){
stockPlugin.setStocks(stocks);
});
}
function createViewStockExponentialMovingAverage(container, width, height) {
var view = new JenScript.View({
name : container,
width : width,
height : height,
holders : 20,
west : 80,
south : 80,
});
var startDate = new Date(2013, 04, 25);
var endDate = new Date(2013, 08, 05);
var proj1 = new JenScript.TimeXProjection({
cornerRadius : 6,
name : "proj1",
minXDate : startDate,
maxXDate : endDate,
minY : 16,
maxY : 40
});
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.HourModel({}),new JenScript.DayModel({}),new JenScript.MonthModel({})],
minor : minor,
median : median,
major : major,
});
proj1.registerPlugin(southMetrics1);
var westMetrics = new JenScript.AxisMetricsModeled({
axis : JenScript.Axis.AxisWest
});
proj1.registerPlugin(westMetrics);
var tx1 = new JenScript.TranslatePlugin();
proj1.registerPlugin(tx1);
tx1.select();
var stockPlugin = new JenScript.StockPlugin();
proj1.registerPlugin(stockPlugin);
stockPlugin.addLayer(new JenScript.StockFixingLayer({
curveColor:'black',
curveWidth : 1
}));
stockPlugin.addLayer(new JenScript.StockExponentialMovingAverageLayer({
curveColor:'purple',
moveCount : 20
}));
var legend = new JenScript.TitleLegendPlugin({
layout : 'relative',
part : JenScript.ViewPart.Device,
text : 'SLV Fixing',
fontSize : 14,
textColor : 'black',
xAlign : 'right',
yAlign : 'top',
});
proj1.registerPlugin(legend);
var legend2 = new JenScript.TitleLegendPlugin({
layout : 'relative',
part : JenScript.ViewPart.Device,
text : 'SLV EMA(20)',
fontSize : 14,
textColor : 'purple',
xAlign : 'right',
yAlign : 'top',
yMargin: 26
});
proj1.registerPlugin(legend2);
var loader = new StockLoader(proj1,[2012,2013],function(year,stocks){
stockPlugin.setStocks(stocks);
});
}