/**
* @class Ext.chart.series.CandleStick
* @extends Ext.chart.series.Cartesian
*
* Creates a candlestick or OHLC Chart.
*
* CandleStick series are typically used to plot price movements of a security on an exchange
* over time. The series can be used with the 'time' axis, but since exchanges often close
* for weekends, and the price data has gaps for those days, it's more practical to use this series
* with the 'category' axis to avoid rendering those data gaps. The 'category' axis has no notion
* of time (and thus gaps) and treats every Date object (value of the 'xField') as a unique
* category. However, it also means that it doesn't support the 'dateFormat' config,
* which can be easily remedied with a 'renderer' that formats a Date object for use
* as an axis label. For example:
*
* @example
* new Ext.chart.CartesianChart({
* xtype: 'cartesian',
* renderTo: document.body,
* width: 700,
* height: 500,
* insetPadding: 20,
* innerPadding: '0 20 0 20',
*
* store: {
* data: [
* {
* time: new Date('Nov 17 2016'),
* o: 52.40, h: 52.74, l: 52.18, c: 52.29
* },
* {
* time: new Date('Nov 18 2016'),
* o: 51.87, h: 52.22, l: 51.51, c: 52.04
* },
* {
* time: new Date('Nov 21 2016'),
* o: 53.02, h: 53.40, l: 53.02, c: 53.33
* },
* {
* time: new Date('Nov 22 2016'),
* o: 53.48, h: 53.80, l: 53.13, c: 53.70
* },
* {
* time: new Date('Nov 23 2016'),
* o: 52.85, h: 53.39, l: 52.76, c: 53.28
* },
* {
* time: new Date('Nov 25 2016'),
* o: 53.28, h: 53.45, l: 53.20, c: 53.40
* },
* {
* time: new Date('Nov 28 2016'),
* o: 52.51, h: 52.58, l: 51.96, c: 52.00
* },
* {
* time: new Date('Nov 29 2016'),
* o: 51.25, h: 51.98, l: 51.10, c: 51.79
* },
* {
* time: new Date('Nov 30 2016'),
* o: 53.65, h: 54.56, l: 53.60, c: 54.17
* },
* {
* time: new Date('Dec 01 2016'),
* o: 55.26, h: 55.75, l: 54.94, c: 55.13
* }
* ]
* },
* axes: [
* {
* type: 'numeric',
* position: 'left'
* },
* {
* type: 'category',
* position: 'bottom',
*
* renderer: function (axis, value) {
* return Ext.Date.format(value, 'M j\nY');
* }
* }
* ],
* series: {
* type: 'candlestick',
*
* xField: 'time',
*
* openField: 'o',
* highField: 'h',
* lowField: 'l',
* closeField: 'c',
*
* style: {
* barWidth: 10,
*
* dropStyle: {
* fill: 'rgb(222, 87, 87)',
* stroke: 'rgb(222, 87, 87)',
* lineWidth: 3
* },
* raiseStyle: {
* fill: 'rgb(48, 189, 167)',
* stroke: 'rgb(48, 189, 167)',
* lineWidth: 3
* }
* }
* }
* });
*/
Ext.define('Ext.chart.series.CandleStick', {
extend: 'Ext.chart.series.Cartesian',
requires: ['Ext.chart.series.sprite.CandleStick'],
alias: 'series.candlestick',
type: 'candlestick',
seriesType: 'candlestickSeries',
isCandleStick: true,
/**
* @cfg {Object} style Custom style configuration for the sprite used in the series.
* It overrides the style that is provided by the current theme. See
* {@link Ext.chart.theme.series.CandleStick}
*/
config: {
/**
* @cfg {String} openField
* The store record field name that represents the opening value of the given period.
*/
openField: null,
/**
* @cfg {String} highField
* The store record field name that represents the highest value of the time interval
* represented.
*/
highField: null,
/**
* @cfg {String} lowField
* The store record field name that represents the lowest value of the time interval
* represented.
*/
lowField: null,
/**
* @cfg {String} closeField
* The store record field name that represents the closing value of the given period.
*/
closeField: null
},
fieldCategoryY: ['Open', 'High', 'Low', 'Close'],
themeColorCount: function() {
return 2;
}
});