API Docs for: 3.10.3
Show:

File: charts/js/CandlestickSeries.js

  1. /**
  2.  * Provides functionality for creating a candlestick series.
  3.  *
  4.  * @module charts
  5.  * @submodule series-candlestick
  6.  */
  7. /**
  8.  * The CandlestickSeries class renders columns (candles) and lines (wicks) representing the open, high, low and close
  9.  * values for a chart.
  10.  *
  11.  * @class CandlestickSeries
  12.  * @extends RangeSeries
  13.  * @constructor
  14.  * @param {Object} config (optional) Configuration parameters.
  15.  * @submodule series-candlestick
  16.  */
  17. function CandlestickSeries()
  18. {
  19.     CandlestickSeries.superclass.constructor.apply(this, arguments);
  20. }
  21.  
  22. CandlestickSeries.NAME = "candlestickSeries";
  23.  
  24. CandlestickSeries.ATTRS = {
  25.     /**
  26.      * Read-only attribute indicating the type of series.
  27.      *
  28.      * @attribute type
  29.      * @type String
  30.      * @readOnly
  31.      * @default candlestick
  32.      */
  33.     type: {
  34.         value: "candlestick"
  35.     },
  36.  
  37.     /**
  38.      * The graphic in which drawings will be rendered.
  39.      *
  40.      * @attribute graphic
  41.      * @type Graphic
  42.      */
  43.     graphic: {
  44.         lazyAdd: false,
  45.  
  46.         setter: function(val) {
  47.             //woraround for Attribute order of operations bug
  48.             if(!this.get("rendered")) {
  49.                 this.set("rendered", true);
  50.             }
  51.             this.set("upcandle", val.addShape({
  52.                type: "path"
  53.             }));
  54.             this.set("downcandle", val.addShape({
  55.                type: "path"
  56.             }));
  57.             this.set("wick", val.addShape({
  58.                type: "path"
  59.             }));
  60.             return val;
  61.         }
  62.     },
  63.  
  64.     /**
  65.      * Reference to the candlestick used when the close value is higher than the open value.
  66.      *
  67.      * @attribute upcandle
  68.      * @type Path
  69.      */
  70.     upcandle: {},
  71.  
  72.     /**
  73.      * Reference to the candlestick used when the open value is higher than the close value.
  74.      *
  75.      * @attribute downcandle
  76.      * @type Path
  77.      */
  78.     downcandle: {},
  79.  
  80.     /**
  81.      * Reference to the line drawn between the high and low values.
  82.      *
  83.      * @attribute wick
  84.      * @type Path
  85.      */
  86.     wick: {}
  87.  
  88.     /**
  89.      * Style properties used for drawing candles and wicks. This attribute is inherited from `RangeSeries`. Below are the default values:
  90.      *  <dl>
  91.      *      <dt>upcandle</dt><dd>Properties for a candle representing a period that closes higher than it opens.
  92.      *          <dl>
  93.      *              <dt>fill</dt><dd>A hash containing the following values:
  94.      *                  <dl>
  95.      *                      <dt>color</dt><dd>Color of the fill. The default value is "#00aa00".</dd>
  96.      *                      </dd>
  97.      *                      <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
  98.      *                  </dl>
  99.      *              </dd>
  100.      *              <dt>border</dt><dd>A hash containing the following values:
  101.      *                  <dl>
  102.      *                      <dt>color</dt><dd>Color of the border. The default value is "#000000".</dd>
  103.      *                      <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
  104.      *                      <dt>weight</dt><dd>Number indicating the width of the border. The default value is 0.</dd>
  105.      *                  </dl>
  106.      *              </dd>
  107.      *          </dl>
  108.      *      </dd>
  109.      *      <dt>downcandle</dt><dd>Properties for a candle representing a period that opens higher than it closes.
  110.      *          <dl>
  111.      *              <dt>fill</dt><dd>A hash containing the following values:
  112.      *                  <dl>
  113.      *                      <dt>color</dt><dd>Color of the fill. The default value is "#aa0000".</dd>
  114.      *                      </dd>
  115.      *                      <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
  116.      *                  </dl>
  117.      *              </dd>
  118.      *              <dt>border</dt><dd>A hash containing the following values:
  119.      *                  <dl>
  120.      *                      <dt>color</dt><dd>Color of the border. The default value is "#000000".</dd>
  121.      *                      <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
  122.      *                      <dt>weight</dt><dd>Number indicating the width of the border. The default value is 0.</dd>
  123.      *                  </dl>
  124.      *              </dd>
  125.      *          </dl>
  126.      *      </dd>
  127.      *      <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.
  128.      *          <dl>
  129.      *              <dt>color</dt><dd>The color of the wick. The default value is "#000000".</dd>
  130.      *              <dt>weight</dt><dd>The weight of the wick. The default value is 1.</dd>
  131.      *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the wick. The default value is 1.</dd>
  132.      *          </dl>
  133.      *      </dd>
  134.      *  </dl>
  135.      *
  136.      * @attribute styles
  137.      * @type Object
  138.      */
  139. };
  140.  
  141. Y.extend(CandlestickSeries, Y.RangeSeries, {
  142.     /**
  143.      * Draws markers for an Candlestick series.
  144.      *
  145.      * @method
  146.      * @param {Array} xcoords The xcoordinates to be plotted.
  147.      * @param {Array} opencoords The coordinates representing the open values.
  148.      * @param {Array} highcoords The coordinates representing the high values.
  149.      * @param {Array} lowcoords The coordinates representing the low values.
  150.      * @param {Array} closecoords The coordinates representing the close values.
  151.      * @param {Number} len The number of x coordinates to plot.
  152.      * @param {Number} width The width of each candlestick marker.
  153.      * @param {Number} halfwidth Half the width of each candlestick marker.
  154.      * @param {Object} styles The styles for the series.
  155.      * @private
  156.      */
  157.     _drawMarkers: function(xcoords, opencoords, highcoords, lowcoords, closecoords, len, width, halfwidth, styles)
  158.     {
  159.         var upcandle = this.get("upcandle"),
  160.             downcandle = this.get("downcandle"),
  161.             wick = this.get("wick"),
  162.             cx,
  163.             opencoord,
  164.             highcoord,
  165.             lowcoord,
  166.             closecoord,
  167.             left,
  168.             right,
  169.             top,
  170.             bottom,
  171.             leftPadding = styles.padding.left,
  172.             up;
  173.         upcandle.set(styles.upcandle);
  174.         downcandle.set(styles.downcandle);
  175.         wick.set(styles.wick);
  176.         upcandle.clear();
  177.         downcandle.clear();
  178.         wick.clear();
  179.         for(i = 0; i < len; i = i + 1)
  180.         {
  181.             cx = xcoords[i] + leftPadding;
  182.             left = cx - halfwidth;
  183.             right = cx + halfwidth;
  184.             opencoord = opencoords[i];
  185.             highcoord = highcoords[i];
  186.             lowcoord = lowcoords[i];
  187.             closecoord = closecoords[i];
  188.             up = opencoord > closecoord;
  189.             top = up ? closecoord : opencoord;
  190.             bottom = up ? opencoord : closecoord;
  191.             height = bottom - top;
  192.             candle = up ? upcandle : downcandle;
  193.             candle.drawRect(left, top, width, height);
  194.             wick.moveTo(cx, highcoord);
  195.             wick.lineTo(cx, lowcoord);
  196.         }
  197.         upcandle.end();
  198.         downcandle.end();
  199.         wick.end();
  200.         wick.toBack();
  201.     },
  202.  
  203.     /**
  204.      * Toggles visibility
  205.      *
  206.      * @method _toggleVisible
  207.      * @param {Boolean} visible indicates visibilitye
  208.      * @private
  209.      */
  210.     _toggleVisible: function(visible)
  211.     {
  212.         this.get("upcandle").set("visible", visible);
  213.         this.get("downcandle").set("visible", visible);
  214.         this.get("wick").set("visible", visible);
  215.     },
  216.  
  217.     /**
  218.      * Destructor implementation for the CartesianSeries class. Calls destroy on all Graphic instances.
  219.      *
  220.      * @method destructor
  221.      * @protected
  222.      */
  223.     destructor: function()
  224.     {
  225.         var upcandle = this.get("upcandle"),
  226.             downcandle = this.get("downcandle"),
  227.             wick = this.get("wick");
  228.         if(upcandle)
  229.         {
  230.             upcandle.destroy();
  231.         }
  232.         if(downcandle)
  233.         {
  234.             downcandle.destroy();
  235.         }
  236.         if(wick)
  237.         {
  238.             wick.destroy();
  239.         }
  240.     },
  241.  
  242.     /**
  243.      * Gets the default value for the `styles` attribute. Overrides
  244.      * base implementation.
  245.      *
  246.      * @method _getDefaultStyles
  247.      * @return Object
  248.      * @private
  249.      */
  250.     _getDefaultStyles: function()
  251.     {
  252.         var styles = {
  253.             upcandle: {
  254.                 fill: {
  255.                     color: "#00aa00",
  256.                     alpha: 1
  257.                 },
  258.                 stroke: {
  259.                     color: "#000000",
  260.                     alpha: 1,
  261.                     weight: 0
  262.                 }
  263.             },
  264.             downcandle: {
  265.                 fill: {
  266.                     color: "#aa0000",
  267.                     alpha: 1
  268.                 },
  269.                 stroke: {
  270.                     color: "#000000",
  271.                     alpha: 1,
  272.                     weight: 0
  273.                 }
  274.             },
  275.             wick: {
  276.                 stroke: {
  277.                     color: "#000000",
  278.                     alpha: 1,
  279.                     weight: 1
  280.                 }
  281.             }
  282.         };
  283.         return this._mergeStyles(styles, CandlestickSeries.superclass._getDefaultStyles());
  284.     }
  285. });
  286. Y.CandlestickSeries = CandlestickSeries;
  287.  
  288.