Skip to content

Commit

Permalink
Finished work on OHLC and Candlestick.
Browse files Browse the repository at this point in the history
  • Loading branch information
highslide-software committed Jan 13, 2011
1 parent e3be3ac commit 9ceee6a
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 73 deletions.
193 changes: 126 additions & 67 deletions js/modules/ohlc.src.js
View file
@@ -1,30 +1,33 @@
/**
* @license Highcharts JS v2.0 (prerelease)
* OHLC series module
* Candlestick/OHLC series module
*
* (c) 2010 Torstein Hønsi
*
* License: www.highcharts.com/license
*/

/*
* Todo:
* - Separate up and down colors. Requires a means of assigning separate colors to the pointAttr
* based on conditions, similar to states.
*/

(function(){ // encapsulate

// create shortcuts
var HC = Highcharts,
addEvent = HC.addEvent,
defaultOptions = HC.getOptions(),
defaultPlotOptions = defaultOptions.plotOptions,
seriesTypes = HC.seriesTypes,
extend = HC.extend,
each = HC.each,
map = HC.map,
merge = HC.merge,
each = HC.each,
math = Math,
mathRound = math.round;


/* ****************************************************************************
* Start OHLC series code *
*****************************************************************************/

// 1 - Set default options
defaultPlotOptions.OHLC = merge(defaultPlotOptions.column, {
lineWidth: 1,
Expand Down Expand Up @@ -97,10 +100,10 @@ var OHLCPoint = Highcharts.extendClass(Highcharts.Point, {
series = point.series;

return ['<span style="color:'+ series.color +';font-weight:bold">', (point.name || series.name), '</span><br/> ',
'O: ', point.open, '<br/>',
'H: ', point.high, '<br/>',
'L: ', point.low, '<br/>',
'C: ', point.close].join('');
'Open: ', point.open, '<br/>',
'High: ', point.high, '<br/>',
'Low: ', point.low, '<br/>',
'Close: ', point.close].join('');

}

Expand Down Expand Up @@ -138,6 +141,9 @@ var OHLCSeries = Highcharts.extendClass(seriesTypes.column, {
});
},

/**
* Draw the data points
*/
drawPoints: function() {
var series = this, //state = series.state,
//layer = series.stateLayers[state],
Expand All @@ -149,6 +155,9 @@ var OHLCSeries = Highcharts.extendClass(seriesTypes.column, {
pointOpen,
pointClose,
crispCorr,
halfWidth,
path,
graphic,
crispX;


Expand All @@ -158,39 +167,44 @@ var OHLCSeries = Highcharts.extendClass(seriesTypes.column, {
point.plotX >= 0 && point.plotX <= chart.plotSizeX &&
point.plotY >= 0 && point.plotY <= chart.plotSizeY) {


graphic = point.graphic;
pointAttr = point.pointAttr[point.selected ? 'selected' : ''];

// crisp vector coordinates
crispCorr = (pointAttr['stroke-width'] % 2) / 2;
crispX = mathRound(point.plotX) + crispCorr;
plotOpen = mathRound(point.plotOpen) + crispCorr;
plotClose = mathRound(point.plotClose) + crispCorr;
halfWidth = mathRound(point.barW / 2);

point.graphic = chart.renderer.path([
'M',
crispX, mathRound(point.yBottom),
'L',
crispX, mathRound(point.plotY),
'M',
crispX, plotOpen,
'L',
crispX - 2, plotOpen,
'M',
crispX, plotClose,
'L',
crispX + 2, plotClose,
'Z'
])
.attr(pointAttr)
.add(series.group);

path = [
'M',
crispX, mathRound(point.yBottom),
'L',
crispX, mathRound(point.plotY),
'M',
crispX, plotOpen,
'L',
crispX - halfWidth, plotOpen,
'M',
crispX, plotClose,
'L',
crispX + halfWidth, plotClose,
'Z'
];


if (graphic) {
graphic.animate({ d: path });
} else {
point.graphic = chart.renderer.path(path)
.attr(pointAttr)
.add(series.group);
}

}

// draw the selected mode marker on top of the default one
if (point.selected) {
series.drawPointState(point, 'select');
}

});

Expand All @@ -199,30 +213,65 @@ var OHLCSeries = Highcharts.extendClass(seriesTypes.column, {

});
seriesTypes.OHLC = OHLCSeries;
/* ****************************************************************************
* End OHLC series code *
*****************************************************************************/


/* ****************************************************************************
* Candlestick series *
* Start Candlestick series code *
*****************************************************************************/

// 1 - set default options
defaultPlotOptions.candlestick = merge(defaultPlotOptions.column, {
lineColor: 'black',
lineWidth: 1
lineWidth: 1,
upColor: 'white',
states: {
hover: {
lineWidth: 2
}
}
});

// 3 - Create the CandlestickSeries object
var CandlestickSeries = Highcharts.extendClass(seriesTypes.OHLC, {
var CandlestickSeries = Highcharts.extendClass(OHLCSeries, {
type: 'candlestick',

/**
* One-to-one mapping from options to SVG attributes
*/
pointAttrToOptions: { // mapping between SVG attributes and the corresponding options
fill: 'color',
stroke: 'lineColor',
'stroke-width': 'lineWidth'
},

/**
* Postprocess mapping between options and SVG attributes
*/
getAttribs: function() {
OHLCSeries.prototype.getAttribs.apply(this, arguments);
var series = this,
options = series.options,
stateOptions = options.states,
upColor = options.upColor,
seriesDownPointAttr = merge(series.pointAttr);

seriesDownPointAttr[''].fill = upColor;
seriesDownPointAttr.hover.fill = stateOptions.hover.upColor || upColor;
seriesDownPointAttr.select.fill = stateOptions.select.upColor || upColor;

each(series.data, function(point) {
if (point.open < point.close) {
point.pointAttr = seriesDownPointAttr;
}
});
},


/**
* Draw the data points
*/
drawPoints: function() {
var series = this, //state = series.state,
//layer = series.stateLayers[state],
Expand All @@ -237,7 +286,9 @@ var CandlestickSeries = Highcharts.extendClass(seriesTypes.OHLC, {
bottomBox,
crispCorr,
crispX,
boxWidth = 5;
graphic,
path,
halfWidth;


each(data, function(point) {
Expand All @@ -246,7 +297,7 @@ var CandlestickSeries = Highcharts.extendClass(seriesTypes.OHLC, {
point.plotX >= 0 && point.plotX <= chart.plotSizeX &&
point.plotY >= 0 && point.plotY <= chart.plotSizeY) {


graphic = point.graphic;
pointAttr = point.pointAttr[point.selected ? 'selected' : ''];

// crisp vector coordinates
Expand All @@ -256,36 +307,39 @@ var CandlestickSeries = Highcharts.extendClass(seriesTypes.OHLC, {
plotClose = mathRound(point.plotClose) + crispCorr;
topBox = math.min(plotOpen, plotClose);
bottomBox = math.max(plotOpen, plotClose);
halfWidth = mathRound(point.barW / 2);

point.graphic = chart.renderer.path([
'M',
crispX - boxWidth, bottomBox,
'L',
crispX - boxWidth, topBox,
'L',
crispX + boxWidth, topBox,
'L',
crispX + boxWidth, bottomBox,
'L',
crispX - boxWidth, bottomBox,
'M',
crispX, bottomBox,
'L',
crispX, mathRound(point.yBottom),
'M',
crispX, topBox,
'L',
crispX, mathRound(point.plotY),
'Z'
])
.attr(pointAttr)
.add(series.group);
// create the path
path = [
'M',
crispX - halfWidth, bottomBox,
'L',
crispX - halfWidth, topBox,
'L',
crispX + halfWidth, topBox,
'L',
crispX + halfWidth, bottomBox,
'L',
crispX - halfWidth, bottomBox,
'M',
crispX, bottomBox,
'L',
crispX, mathRound(point.yBottom),
'M',
crispX, topBox,
'L',
crispX, mathRound(point.plotY),
'Z'
];

if (graphic) {
graphic.animate({ d: path });
} else {
point.graphic = chart.renderer.path(path)
.attr(pointAttr)
.add(series.group);
}

}

// draw the selected mode marker on top of the default one
if (point.selected) {
series.drawPointState(point, 'select');
}

});
Expand All @@ -297,3 +351,8 @@ var CandlestickSeries = Highcharts.extendClass(seriesTypes.OHLC, {

seriesTypes.candlestick = CandlestickSeries;

/* ****************************************************************************
* End Candlestick series code *
*****************************************************************************/

})();
17 changes: 11 additions & 6 deletions studies/ohlc.htm
View file
Expand Up @@ -6,7 +6,7 @@


<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/highcharts.src.js"></script>
<script type="text/javascript" src="../js/modules/ohlc.src.js"></script>

Expand Down Expand Up @@ -41,7 +41,8 @@
[ 5.24 , 5.97 , 4.86 , 5.28 ],
[ 5.89 , 5.89 , 4.91 , 4.92 ],
[ 5.76 , 6.37 , 5.56 , 6.03 ],
[ 6.34 , 6.56 , 5.47 , 6.15 ],
//[ 6.34 , 6.56 , 5.47 , 6.15 ],
{ open: 8.34 , high: 8.56 , low: 5.47 , close: 6.15, color: 'yellow', lineColor: 'silver' },
[ 5.62 , 6.61 , 5.33 , 6.04 ],
[ 4.59 , 6.27 , 4.48 , 5.31 ],
[ 4.43 , 5.06 , 4.40 , 4.50 ],
Expand Down Expand Up @@ -167,7 +168,6 @@
];


var chart;
var options = {
chart: {
},
Expand All @@ -181,8 +181,13 @@
series: {
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
},
candlestick: {
}
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
Expand All @@ -192,17 +197,17 @@
}]
};


var chart1, chart2;
$(document).ready(function() {
options.chart.type = 'OHLC';
options.chart.renderTo = 'container-ohlc';
options.title.text = 'OHLC';
chart = new Highcharts.Chart(options);
chart1 = new Highcharts.Chart(options);

options.chart.type = 'candlestick';
options.chart.renderTo = 'container-candlestick';
options.title.text = 'Candlestick';
chart = new Highcharts.Chart(options);
chart2 = new Highcharts.Chart(options);
});


Expand Down

0 comments on commit 9ceee6a

Please sign in to comment.