API Docs for: 3.18.1
Show:

File: charts/js/CandlestickSeries.js

/**
 * Provides functionality for creating a candlestick series.
 *
 * @module charts
 * @submodule series-candlestick
 */
/**
 * The CandlestickSeries class renders columns (candles) and lines (wicks) representing the open, high, low and close
 * values for a chart.
 *
 * @class CandlestickSeries
 * @extends RangeSeries
 * @constructor
 * @param {Object} config (optional) Configuration parameters.
 * @submodule series-candlestick
 */
function CandlestickSeries()
{
    CandlestickSeries.superclass.constructor.apply(this, arguments);
}

CandlestickSeries.NAME = "candlestickSeries";

CandlestickSeries.ATTRS = {
    /**
     * Read-only attribute indicating the type of series.
     *
     * @attribute type
     * @type String
     * @readOnly
     * @default candlestick
     */
    type: {
        value: "candlestick"
    },

    /**
     * The graphic in which drawings will be rendered.
     *
     * @attribute graphic
     * @type Graphic
     */
    graphic: {
        lazyAdd: false,

        setter: function(val) {
            //woraround for Attribute order of operations bug
            if(!this.get("rendered")) {
                this.set("rendered", true);
            }
            this.set("upcandle", val.addShape({
               type: "path"
            }));
            this.set("downcandle", val.addShape({
               type: "path"
            }));
            this.set("wick", val.addShape({
               type: "path"
            }));
            return val;
        }
    },

    /**
     * Reference to the candlestick used when the close value is higher than the open value.
     *
     * @attribute upcandle
     * @type Path
     */
    upcandle: {},

    /**
     * Reference to the candlestick used when the open value is higher than the close value.
     *
     * @attribute downcandle
     * @type Path
     */
    downcandle: {},

    /**
     * Reference to the line drawn between the high and low values.
     *
     * @attribute wick
     * @type Path
     */
    wick: {}

    /**
     * Style properties used for drawing candles and wicks. This attribute is inherited from `RangeSeries`. Below are the default values:
     *  <dl>
     *      <dt>upcandle</dt><dd>Properties for a candle representing a period that closes higher than it opens.
     *          <dl>
     *              <dt>fill</dt><dd>A hash containing the following values:
     *                  <dl>
     *                      <dt>color</dt><dd>Color of the fill. The default value is "#00aa00".</dd>
     *                      </dd>
     *                      <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
     *                  </dl>
     *              </dd>
     *              <dt>border</dt><dd>A hash containing the following values:
     *                  <dl>
     *                      <dt>color</dt><dd>Color of the border. The default value is "#000000".</dd>
     *                      <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
     *                      <dt>weight</dt><dd>Number indicating the width of the border. The default value is 0.</dd>
     *                  </dl>
     *              </dd>
     *          </dl>
     *      </dd>
     *      <dt>downcandle</dt><dd>Properties for a candle representing a period that opens higher than it closes.
     *          <dl>
     *              <dt>fill</dt><dd>A hash containing the following values:
     *                  <dl>
     *                      <dt>color</dt><dd>Color of the fill. The default value is "#aa0000".</dd>
     *                      </dd>
     *                      <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
     *                  </dl>
     *              </dd>
     *              <dt>border</dt><dd>A hash containing the following values:
     *                  <dl>
     *                      <dt>color</dt><dd>Color of the border. The default value is "#000000".</dd>
     *                      <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
     *                      <dt>weight</dt><dd>Number indicating the width of the border. The default value is 0.</dd>
     *                  </dl>
     *              </dd>
     *          </dl>
     *      </dd>
     *      <dt>wick</dt><dd>Properties for the wick, which is a line drawn from the high point of the period to the low point of the period.
     *          <dl>
     *              <dt>color</dt><dd>The color of the wick. The default value is "#000000".</dd>
     *              <dt>weight</dt><dd>The weight of the wick. The default value is 1.</dd>
     *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the wick. The default value is 1.</dd>
     *          </dl>
     *      </dd>
     *  </dl>
     *
     * @attribute styles
     * @type Object
     */
};

Y.extend(CandlestickSeries, Y.RangeSeries, {
    /**
     * Draws markers for an Candlestick series.
     *
     * @method
     * @param {Array} xcoords The xcoordinates to be plotted.
     * @param {Array} opencoords The coordinates representing the open values.
     * @param {Array} highcoords The coordinates representing the high values.
     * @param {Array} lowcoords The coordinates representing the low values.
     * @param {Array} closecoords The coordinates representing the close values.
     * @param {Number} len The number of x coordinates to plot.
     * @param {Number} width The width of each candlestick marker.
     * @param {Number} halfwidth Half the width of each candlestick marker.
     * @param {Object} styles The styles for the series.
     * @private
     */
    _drawMarkers: function(xcoords, opencoords, highcoords, lowcoords, closecoords, len, width, halfwidth, styles)
    {
        var upcandle = this.get("upcandle"),
            downcandle = this.get("downcandle"),
            candle,
            wick = this.get("wick"),
            wickStyles = styles.wick,
            wickWidth = wickStyles.width,
            cx,
            opencoord,
            highcoord,
            lowcoord,
            closecoord,
            left,
            right,
            top,
            bottom,
            height,
            leftPadding = styles.padding.left,
            up,
            i,
            isNumber = Y.Lang.isNumber;
        upcandle.set(styles.upcandle);
        downcandle.set(styles.downcandle);
        wick.set({
            fill: wickStyles.fill,
            stroke: wickStyles.stroke,
            shapeRendering: wickStyles.shapeRendering
        });
        upcandle.clear();
        downcandle.clear();
        wick.clear();
        for(i = 0; i < len; i = i + 1)
        {
            cx = Math.round(xcoords[i] + leftPadding);
            left = cx - halfwidth;
            right = cx + halfwidth;
            opencoord = Math.round(opencoords[i]);
            highcoord = Math.round(highcoords[i]);
            lowcoord = Math.round(lowcoords[i]);
            closecoord = Math.round(closecoords[i]);
            up = opencoord > closecoord;
            top = up ? closecoord : opencoord;
            bottom = up ? opencoord : closecoord;
            height = bottom - top;
            candle = up ? upcandle : downcandle;
            if(candle && isNumber(left) && isNumber(top) && isNumber(width) && isNumber(height))
            {
                candle.drawRect(left, top, width, height);
            }
            if(isNumber(cx) && isNumber(highcoord) && isNumber(lowcoord))
            {
                wick.drawRect(cx - wickWidth/2, highcoord, wickWidth, lowcoord - highcoord);
            }
        }
        upcandle.end();
        downcandle.end();
        wick.end();
        wick.toBack();
    },

    /**
     * Toggles visibility
     *
     * @method _toggleVisible
     * @param {Boolean} visible indicates visibilitye
     * @private
     */
    _toggleVisible: function(visible)
    {
        this.get("upcandle").set("visible", visible);
        this.get("downcandle").set("visible", visible);
        this.get("wick").set("visible", visible);
    },

    /**
     * Destructor implementation for the CartesianSeries class. Calls destroy on all Graphic instances.
     *
     * @method destructor
     * @protected
     */
    destructor: function()
    {
        var upcandle = this.get("upcandle"),
            downcandle = this.get("downcandle"),
            wick = this.get("wick");
        if(upcandle)
        {
            upcandle.destroy();
        }
        if(downcandle)
        {
            downcandle.destroy();
        }
        if(wick)
        {
            wick.destroy();
        }
    },

    /**
     * Gets the default value for the `styles` attribute. Overrides
     * base implementation.
     *
     * @method _getDefaultStyles
     * @return Object
     * @private
     */
    _getDefaultStyles: function()
    {
        var styles = {
            upcandle: {
                shapeRendering: "crispEdges",
                fill: {
                    color: "#00aa00",
                    alpha: 1
                },
                stroke: {
                    color: "#000000",
                    alpha: 1,
                    weight: 0
                }
            },
            downcandle: {
                shapeRendering: "crispEdges",
                fill: {
                    color: "#aa0000",
                    alpha: 1
                },
                stroke: {
                    color: "#000000",
                    alpha: 1,
                    weight: 0
                }
            },
            wick: {
                shapeRendering: "crispEdges",
                width: 1,
                fill: {
                    color: "#000000",
                    alpha: 1
                },
                stroke: {
                    color: "#000000",
                    alpha: 1,
                    weight: 0
                }
            }
        };
        return this._mergeStyles(styles, CandlestickSeries.superclass._getDefaultStyles());
    }
});
Y.CandlestickSeries = CandlestickSeries;