API Docs for: 3.13.0
Show:

File: charts/js/StackedColumnSeries.js

  1. /**
  2.  * Provides functionality for creating a stacked column series.
  3.  *
  4.  * @module charts
  5.  * @submodule series-column-stacked
  6.  */
  7. var Y_Lang = Y.Lang;
  8.  
  9. /**
  10.  * The StackedColumnSeries renders column chart in which series are stacked vertically to show
  11.  * their contribution to the cumulative total.
  12.  *
  13.  * @class StackedColumnSeries
  14.  * @extends ColumnSeries
  15.  * @uses StackingUtil
  16.  * @constructor
  17.  * @param {Object} config (optional) Configuration parameters.
  18.  * @submodule series-column-stacked
  19.  */
  20. Y.StackedColumnSeries = Y.Base.create("stackedColumnSeries", Y.ColumnSeries, [Y.StackingUtil], {
  21.     /**
  22.      * Draws the series.
  23.      *
  24.      * @method drawSeries
  25. 	 * @protected
  26. 	 */
  27. 	drawSeries: function()
  28. 	{
  29.         if(this.get("xcoords").length < 1)
  30.         {
  31.             return;
  32.         }
  33.         var isNumber = Y_Lang.isNumber,
  34.             style = Y.clone(this.get("styles").marker),
  35.             w = style.width,
  36.             h = style.height,
  37.             xcoords = this.get("xcoords"),
  38.             ycoords = this.get("ycoords"),
  39.             i = 0,
  40.             len = xcoords.length,
  41.             top = ycoords[0],
  42.             seriesCollection = this.get("seriesTypeCollection"),
  43.             ratio,
  44.             order = this.get("order"),
  45.             graphOrder = this.get("graphOrder"),
  46.             left,
  47.             marker,
  48.             fillColors,
  49.             borderColors,
  50.             lastCollection,
  51.             negativeBaseValues,
  52.             positiveBaseValues,
  53.             useOrigin = order === 0,
  54.             totalWidth = len * w,
  55.             dimensions = {
  56.                 width: [],
  57.                 height: []
  58.             },
  59.             xvalues = [],
  60.             yvalues = [],
  61.             groupMarkers = this.get("groupMarkers");
  62.         if(Y_Lang.isArray(style.fill.color))
  63.         {
  64.             fillColors = style.fill.color.concat();
  65.         }
  66.         if(Y_Lang.isArray(style.border.color))
  67.         {
  68.             borderColors = style.border.color.concat();
  69.         }
  70.         this._createMarkerCache();
  71.         if(totalWidth > this.get("width"))
  72.         {
  73.             ratio = this.get("width")/totalWidth;
  74.             w *= ratio;
  75.             w = Math.max(w, 1);
  76.         }
  77.         if(!useOrigin)
  78.         {
  79.             lastCollection = seriesCollection[order - 1];
  80.             negativeBaseValues = lastCollection.get("negativeBaseValues");
  81.             positiveBaseValues = lastCollection.get("positiveBaseValues");
  82.             if(!negativeBaseValues || !positiveBaseValues)
  83.             {
  84.                 useOrigin = true;
  85.                 positiveBaseValues = [];
  86.                 negativeBaseValues = [];
  87.             }
  88.         }
  89.         else
  90.         {
  91.             negativeBaseValues = [];
  92.             positiveBaseValues = [];
  93.         }
  94.         this.set("negativeBaseValues", negativeBaseValues);
  95.         this.set("positiveBaseValues", positiveBaseValues);
  96.         for(i = 0; i < len; ++i)
  97.         {
  98.             left = xcoords[i];
  99.             top = ycoords[i];
  100.  
  101.             if(!isNumber(top) || !isNumber(left))
  102.             {
  103.                 if(useOrigin)
  104.                 {
  105.                     negativeBaseValues[i] = this._bottomOrigin;
  106.                     positiveBaseValues[i] = this._bottomOrigin;
  107.                 }
  108.                 this._markers.push(null);
  109.                 continue;
  110.             }
  111.             if(useOrigin)
  112.             {
  113.                 h = Math.abs(this._bottomOrigin - top);
  114.                 if(top < this._bottomOrigin)
  115.                 {
  116.                     positiveBaseValues[i] = top;
  117.                     negativeBaseValues[i] = this._bottomOrigin;
  118.                 }
  119.                 else if(top > this._bottomOrigin)
  120.                 {
  121.                     positiveBaseValues[i] = this._bottomOrigin;
  122.                     negativeBaseValues[i] = top;
  123.                     top -= h;
  124.                 }
  125.                 else
  126.                 {
  127.                     positiveBaseValues[i] = top;
  128.                     negativeBaseValues[i] = top;
  129.                 }
  130.             }
  131.             else
  132.             {
  133.                 if(top > this._bottomOrigin)
  134.                 {
  135.                     top += (negativeBaseValues[i] - this._bottomOrigin);
  136.                     h = top - negativeBaseValues[i];
  137.                     negativeBaseValues[i] = top;
  138.                     top -= h;
  139.                 }
  140.                 else if(top <= this._bottomOrigin)
  141.                 {
  142.                     top = positiveBaseValues[i] - (this._bottomOrigin - top);
  143.                     h = positiveBaseValues[i] - top;
  144.                     positiveBaseValues[i] = top;
  145.                 }
  146.             }
  147.             if(!isNaN(h) && h > 0)
  148.             {
  149.                 left -= w/2;
  150.                 if(groupMarkers)
  151.                 {
  152.                     dimensions.width[i] = w;
  153.                     dimensions.height[i] = h;
  154.                     xvalues.push(left);
  155.                     yvalues.push(top);
  156.                 }
  157.                 else
  158.                 {
  159.                     style.width = w;
  160.                     style.height = h;
  161.                     style.x = left;
  162.                     style.y = top;
  163.                     if(fillColors)
  164.                     {
  165.                         style.fill.color = fillColors[i % fillColors.length];
  166.                     }
  167.                     if(borderColors)
  168.                     {
  169.                         style.border.color = borderColors[i % borderColors.length];
  170.                     }
  171.                     marker = this.getMarker(style, graphOrder, i);
  172.                 }
  173.             }
  174.             else if(!groupMarkers)
  175.             {
  176.                this._markers.push(null);
  177.             }
  178.         }
  179.         if(groupMarkers)
  180.         {
  181.             this._createGroupMarker({
  182.                 fill: style.fill,
  183.                 border: style.border,
  184.                 dimensions: dimensions,
  185.                 xvalues: xvalues,
  186.                 yvalues: yvalues,
  187.                 shape: style.shape
  188.             });
  189.         }
  190.         else
  191.         {
  192.             this._clearMarkerCache();
  193.         }
  194.     },
  195.  
  196.     /**
  197.      * Resizes and positions markers based on a mouse interaction.
  198.      *
  199.      * @method updateMarkerState
  200.      * @param {String} type state of the marker
  201.      * @param {Number} i index of the marker
  202.      * @protected
  203.      */
  204.     updateMarkerState: function(type, i)
  205.     {
  206.         if(this._markers && this._markers[i])
  207.         {
  208.             var styles,
  209.                 markerStyles,
  210.                 state = this._getState(type),
  211.                 xcoords = this.get("xcoords"),
  212.                 marker = this._markers[i],
  213.                 offset = 0,
  214.                 fillColor,
  215.                 borderColor;
  216.             styles = this.get("styles").marker;
  217.             offset = styles.width * 0.5;
  218.             markerStyles = state === "off" || !styles[state] ? Y.clone(styles) : Y.clone(styles[state]);
  219.             markerStyles.height = marker.get("height");
  220.             markerStyles.x = (xcoords[i] - offset);
  221.             markerStyles.y = marker.get("y");
  222.             markerStyles.id = marker.get("id");
  223.             fillColor = markerStyles.fill.color;
  224.             borderColor = markerStyles.border.color;
  225.             if(Y_Lang.isArray(fillColor))
  226.             {
  227.                 markerStyles.fill.color = fillColor[i % fillColor.length];
  228.             }
  229.             else
  230.             {
  231.                 markerStyles.fill.color = this._getItemColor(markerStyles.fill.color, i);
  232.             }
  233.             if(Y_Lang.isArray(borderColor))
  234.             {
  235.                 markerStyles.border.color = borderColor[i % borderColor.length];
  236.             }
  237.             else
  238.             {
  239.                 markerStyles.border.color = this._getItemColor(markerStyles.border.color, i);
  240.             }
  241.             marker.set(markerStyles);
  242.         }
  243.     },
  244.  
  245.     /**
  246.      * Gets the default values for the markers.
  247.      *
  248.      * @method _getPlotDefaults
  249.      * @return Object
  250.      * @protected
  251.      */
  252.     _getPlotDefaults: function()
  253.     {
  254.         var defs = {
  255.             fill:{
  256.                 type: "solid",
  257.                 alpha: 1,
  258.                 colors:null,
  259.                 alphas: null,
  260.                 ratios: null
  261.             },
  262.             border:{
  263.                 weight: 0,
  264.                 alpha: 1
  265.             },
  266.             width: 24,
  267.             height: 24,
  268.             shape: "rect",
  269.  
  270.             padding:{
  271.                 top: 0,
  272.                 left: 0,
  273.                 right: 0,
  274.                 bottom: 0
  275.             }
  276.         };
  277.         defs.fill.color = this._getDefaultColor(this.get("graphOrder"), "fill");
  278.         defs.border.color = this._getDefaultColor(this.get("graphOrder"), "border");
  279.         return defs;
  280.     }
  281. }, {
  282.     ATTRS: {
  283.         /**
  284.          * Read-only attribute indicating the type of series.
  285.          *
  286.          * @attribute type
  287.          * @type String
  288.          * @default stackedColumn
  289.          */
  290.         type: {
  291.             value: "stackedColumn"
  292.         },
  293.  
  294.         /**
  295.          * @attribute negativeBaseValues
  296.          * @type Array
  297.          * @default null
  298.          * @private
  299.          */
  300.         negativeBaseValues: {
  301.             value: null
  302.         },
  303.  
  304.         /**
  305.          * @attribute positiveBaseValues
  306.          * @type Array
  307.          * @default null
  308.          * @private
  309.          */
  310.         positiveBaseValues: {
  311.             value: null
  312.         }
  313.  
  314.         /**
  315.          * Style properties used for drawing markers. This attribute is inherited from `ColumnSeries`. Below are the default values:
  316.          *  <dl>
  317.          *      <dt>fill</dt><dd>A hash containing the following values:
  318.          *          <dl>
  319.          *              <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color
  320.          *              will be retrieved from the below array:<br/>
  321.          *              `["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]`
  322.          *              </dd>
  323.          *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
  324.          *          </dl>
  325.          *      </dd>
  326.          *      <dt>border</dt><dd>A hash containing the following values:
  327.          *          <dl>
  328.          *              <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
  329.          *              will be retrieved from the below array:<br/>
  330.          *              `["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]`
  331.          *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
  332.          *              <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
  333.          *          </dl>
  334.          *      </dd>
  335.          *      <dt>width</dt><dd>indicates the width of the marker. The default value is 24.</dd>
  336.          *      <dt>over</dt><dd>hash containing styles for markers when highlighted by a `mouseover` event. The default
  337.          *      values for each style is null. When an over style is not set, the non-over value will be used. For example,
  338.          *      the default value for `marker.over.fill.color` is equivalent to `marker.fill.color`.</dd>
  339.          *  </dl>
  340.          *
  341.          * @attribute styles
  342.          * @type Object
  343.          */
  344.     }
  345. });
  346.  
  347.  
  348.