API Docs for: 3.17.2
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.             candle,
  162.             wick = this.get("wick"),
  163.             wickStyles = styles.wick,
  164.             wickWidth = wickStyles.width,
  165.             cx,
  166.             opencoord,
  167.             highcoord,
  168.             lowcoord,
  169.             closecoord,
  170.             left,
  171.             right,
  172.             top,
  173.             bottom,
  174.             height,
  175.             leftPadding = styles.padding.left,
  176.             up,
  177.             i,
  178.             isNumber = Y.Lang.isNumber;
  179.         upcandle.set(styles.upcandle);
  180.         downcandle.set(styles.downcandle);
  181.         wick.set({
  182.             fill: wickStyles.fill,
  183.             stroke: wickStyles.stroke,
  184.             shapeRendering: wickStyles.shapeRendering
  185.         });
  186.         upcandle.clear();
  187.         downcandle.clear();
  188.         wick.clear();
  189.         for(i = 0; i < len; i = i + 1)
  190.         {
  191.             cx = Math.round(xcoords[i] + leftPadding);
  192.             left = cx - halfwidth;
  193.             right = cx + halfwidth;
  194.             opencoord = Math.round(opencoords[i]);
  195.             highcoord = Math.round(highcoords[i]);
  196.             lowcoord = Math.round(lowcoords[i]);
  197.             closecoord = Math.round(closecoords[i]);
  198.             up = opencoord > closecoord;
  199.             top = up ? closecoord : opencoord;
  200.             bottom = up ? opencoord : closecoord;
  201.             height = bottom - top;
  202.             candle = up ? upcandle : downcandle;
  203.             if(candle && isNumber(left) && isNumber(top) && isNumber(width) && isNumber(height))
  204.             {
  205.                 candle.drawRect(left, top, width, height);
  206.             }
  207.             if(isNumber(cx) && isNumber(highcoord) && isNumber(lowcoord))
  208.             {
  209.                 wick.drawRect(cx - wickWidth/2, highcoord, wickWidth, lowcoord - highcoord);
  210.             }
  211.         }
  212.         upcandle.end();
  213.         downcandle.end();
  214.         wick.end();
  215.         wick.toBack();
  216.     },
  217.  
  218.     /**
  219.      * Toggles visibility
  220.      *
  221.      * @method _toggleVisible
  222.      * @param {Boolean} visible indicates visibilitye
  223.      * @private
  224.      */
  225.     _toggleVisible: function(visible)
  226.     {
  227.         this.get("upcandle").set("visible", visible);
  228.         this.get("downcandle").set("visible", visible);
  229.         this.get("wick").set("visible", visible);
  230.     },
  231.  
  232.     /**
  233.      * Destructor implementation for the CartesianSeries class. Calls destroy on all Graphic instances.
  234.      *
  235.      * @method destructor
  236.      * @protected
  237.      */
  238.     destructor: function()
  239.     {
  240.         var upcandle = this.get("upcandle"),
  241.             downcandle = this.get("downcandle"),
  242.             wick = this.get("wick");
  243.         if(upcandle)
  244.         {
  245.             upcandle.destroy();
  246.         }
  247.         if(downcandle)
  248.         {
  249.             downcandle.destroy();
  250.         }
  251.         if(wick)
  252.         {
  253.             wick.destroy();
  254.         }
  255.     },
  256.  
  257.     /**
  258.      * Gets the default value for the `styles` attribute. Overrides
  259.      * base implementation.
  260.      *
  261.      * @method _getDefaultStyles
  262.      * @return Object
  263.      * @private
  264.      */
  265.     _getDefaultStyles: function()
  266.     {
  267.         var styles = {
  268.             upcandle: {
  269.                 shapeRendering: "crispEdges",
  270.                 fill: {
  271.                     color: "#00aa00",
  272.                     alpha: 1
  273.                 },
  274.                 stroke: {
  275.                     color: "#000000",
  276.                     alpha: 1,
  277.                     weight: 0
  278.                 }
  279.             },
  280.             downcandle: {
  281.                 shapeRendering: "crispEdges",
  282.                 fill: {
  283.                     color: "#aa0000",
  284.                     alpha: 1
  285.                 },
  286.                 stroke: {
  287.                     color: "#000000",
  288.                     alpha: 1,
  289.                     weight: 0
  290.                 }
  291.             },
  292.             wick: {
  293.                 shapeRendering: "crispEdges",
  294.                 width: 1,
  295.                 fill: {
  296.                     color: "#000000",
  297.                     alpha: 1
  298.                 },
  299.                 stroke: {
  300.                     color: "#000000",
  301.                     alpha: 1,
  302.                     weight: 0
  303.                 }
  304.             }
  305.         };
  306.         return this._mergeStyles(styles, CandlestickSeries.superclass._getDefaultStyles());
  307.     }
  308. });
  309. Y.CandlestickSeries = CandlestickSeries;
  310.  
  311.