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.
An open-high-low-close chart (also OHLC chart, or simply bar chart) is a type of chart typically used to illustrate movements in the price of a financial instrument over time. Each vertical line on the chart shows the price range (the highest and lowest prices) over one unit of time, e.g., one day or one hour. Tick marks project from each side of the line indicating the opening price (e.g., for a daily bar chart this would be the starting price for that day) on the left, and the closing price for that time period on the right. The bars may be shown in different hues depending on whether prices rose or fell in that period.
Register plugin StockPlugin in view projection. Add Stock in plugin then register layouts like OhlcLayer as indicators 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
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.
An open-high-low-close chart (also OHLC chart, or simply bar chart) is a type of chart typically used to illustrate movements in the price of a financial instrument over time. Each vertical line on the chart shows the price range (the highest and lowest prices) over one unit of time, e.g., one day or one hour. Tick marks project from each side of the line indicating the opening price (e.g., for a daily bar chart this would be the starting price for that day) on the left, and the closing price for that time period on the right. The bars may be shown in different hues depending on whether prices rose or fell in that period.
First prepare HTML document.
<div style="padding-top: 20px;">
<div id="ohlcView"></div>
</div>
<script type="text/javascript">
//action code
</script>
Let's create function
/**
* Create ohlc stock view
*
* @param container
* @param width
* @param height
*/
function createViewStockOHLC(container, width, height) {
//view
var view = new JenScript.View({
name : container,
width : width,
height : height,
holders : 20,
west : 80,
south : 80,
});
//date range
var startDate = new Date(2013, 09, 01);
var endDate = new Date(2013, 11, 01);
var proj1 = new JenScript.TimeXProjection({
cornerRadius : 6,
name : "proj1",
minXDate : startDate,
maxXDate : endDate,
minY : 19,
maxY : 24
});
view.registerProjection(proj1);
//device outline
var outline = new JenScript.DeviceOutlinePlugin({color : 'black'});
proj1.registerPlugin(outline);
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
};
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,
minor : minor,
median : median,
major:major
});
proj1.registerPlugin(westMetrics);
var tx1 = new JenScript.TranslatePlugin();
proj1.registerPlugin(tx1);
var tpad = new JenScript.TranslatePad();
tx1.registerWidget(tpad);
tx1.registerWidget(new JenScript.TranslateCompassWidget({
ringFillColor : 'pink'
}));
tx1.select();
var stockPlugin = new JenScript.StockPlugin();
proj1.registerPlugin(stockPlugin);
stockPlugin.addLayer(new JenScript.OhlcLayer({
markerColor : 'purple',
markerWidth : 1.5
}));
var legend = new JenScript.TitleLegendPlugin({
layout : 'relative',
part : JenScript.ViewPart.Device,
text : 'SLV Fixing',
fontSize : 14,
textColor : 'purple',
xAlign : 'right',
yAlign : 'top',
});
proj1.registerPlugin(legend);
var loader = new StockLoader(proj1,[2013,2014],function(year,stocks){
stockPlugin.setStocks(stocks);
});
}