extjs/packages/charts/src/chart/series/CandleStick.js

   1 /**
   2  * @class Ext.chart.series.CandleStick
   3  * @extends Ext.chart.series.Cartesian
   4  *
   5  * Creates a candlestick or OHLC Chart.
   6  *
   7  *     @example
   8  *     Ext.create({
   9  *        xtype: 'cartesian',
  10  *        renderTo: document.body,
  11  *        width: 600,
  12  *        height: 400,
  13  *        insetPadding: 40,
  14  *        store: {
  15  *            fields: ['time', 'open', 'high', 'low', 'close'],
  16  *            data: [{
  17  *                'time': new Date('Jan 1 2010').getTime(),
  18  *                'open': 600,
  19  *                'high': 614,
  20  *                'low': 578,
  21  *                'close': 590
  22  *            }, {
  23  *                'time': new Date('Jan 2 2010').getTime(),
  24  *                'open': 590,
  25  *                'high': 609,
  26  *                'low': 580,
  27  *                'close': 580
  28  *            }, {
  29  *                'time': new Date('Jan 3 2010').getTime(),
  30  *                'open': 580,
  31  *                'high': 602,
  32  *                'low': 578,
  33  *                'close': 602
  34  *            }, {
  35  *                'time': new Date('Jan 4 2010').getTime(),
  36  *                'open': 602,
  37  *                'high': 614,
  38  *                'low': 586,
  39  *                'close': 586
  40  *            }, {
  41  *                'time': new Date('Jan 5 2010').getTime(),
  42  *                'open': 586,
  43  *                'high': 602,
  44  *                'low': 565,
  45  *                'close': 565
  46  *            }]
  47  *        },
  48  *        axes: [{
  49  *            type: 'numeric',
  50  *            position: 'left',
  51  *            fields: ['open', 'high', 'low', 'close'],
  52  *            title: {
  53  *                text: 'Sample Values',
  54  *                fontSize: 15
  55  *            },
  56  *            grid: true,
  57  *            minimum: 560,
  58  *            maximum: 640
  59  *        }, {
  60  *            type: 'time',
  61  *            position: 'bottom',
  62  *            fields: ['time'],
  63  *            fromDate: new Date('Dec 31 2009'),
  64  *            toDate: new Date('Jan 6 2010'),
  65  *            title: {
  66  *                text: 'Sample Values',
  67  *                fontSize: 15
  68  *            },
  69  *            style: {
  70  *                axisLine: false
  71  *            }
  72  *        }],
  73  *        series: {
  74  *            type: 'candlestick',
  75  *            xField: 'time',
  76  *            openField: 'open',
  77  *            highField: 'high',
  78  *            lowField: 'low',
  79  *            closeField: 'close',
  80  *            style: {
  81  *                dropStyle: {
  82  *                    fill: 'rgb(222, 87, 87)',
  83  *                    stroke: 'rgb(222, 87, 87)',
  84  *                    lineWidth: 3
  85  *                },
  86  *                raiseStyle: {
  87  *                    fill: 'rgb(48, 189, 167)',
  88  *                    stroke: 'rgb(48, 189, 167)',
  89  *                    lineWidth: 3
  90  *                }
  91  *            }
  92  *        }
  93  *     });
  94  */
  95 Ext.define('Ext.chart.series.CandleStick', {
  96     extend: 'Ext.chart.series.Cartesian',
  97     requires: ['Ext.chart.series.sprite.CandleStick'],
  98     alias: 'series.candlestick',
  99     type: 'candlestick',
 100     seriesType: 'candlestickSeries',
 101     config: {
 102         /**
 103          * @cfg {String} openField
 104          * The store record field name that represents the opening value of the given period.
 105          */
 106         openField: null,
 107         /**
 108          * @cfg {String} highField
 109          * The store record field name that represents the highest value of the time interval represented.
 110          */
 111         highField: null,
 112         /**
 113          * @cfg {String} lowField
 114          * The store record field name that represents the lowest value of the time interval represented.
 115          */
 116         lowField: null,
 117         /**
 118          * @cfg {String} closeField
 119          * The store record field name that represents the closing value of the given period.
 120          */
 121         closeField: null
 122     },
 123
 124     fieldCategoryY: ['Open', 'High', 'Low', 'Close'],
 125
 126     themeColorCount: function() {
 127         return 2;
 128     }
 129
 130 });