API Docs for: 3.13.0
Show:

File: charts/js/ColumnSeries.js

  1. /**
  2. * Provides functionality for creating a column series.
  3. *
  4. * @module charts
  5. * @submodule series-column
  6. */
  7. /**
  8. * The ColumnSeries class renders columns positioned horizontally along a category or time axis. The columns'
  9. * lengths are proportional to the values they represent along a vertical axis.
  10. * and the relevant data points.
  11. *
  12. * @class ColumnSeries
  13. * @extends MarkerSeries
  14. * @uses Histogram
  15. * @constructor
  16. * @param {Object} config (optional) Configuration parameters.
  17. * @submodule series-column
  18. */
  19. Y.ColumnSeries = Y.Base.create("columnSeries", Y.MarkerSeries, [Y.Histogram], {
  20. /**
  21. * Helper method for calculating the size of markers.
  22. *
  23. * @method _getMarkerDimensions
  24. * @param {Number} xcoord The x-coordinate representing the data point for the marker.
  25. * @param {Number} ycoord The y-coordinate representing the data point for the marker.
  26. * @param {Number} calculatedSize The calculated size for the marker. For a `BarSeries` is it the width. For a `ColumnSeries` it is the height.
  27. * @param {Number} offset Distance of position offset dictated by other marker series in the same graph.
  28. * @return Object
  29. * @private
  30. */
  31. _getMarkerDimensions: function(xcoord, ycoord, calculatedSize, offset)
  32. {
  33. var config = {
  34. left: xcoord + offset
  35. };
  36. if(this._bottomOrigin >= ycoord)
  37. {
  38. config.top = ycoord;
  39. config.calculatedSize = this._bottomOrigin - config.top;
  40. }
  41. else
  42. {
  43. config.top = this._bottomOrigin;
  44. config.calculatedSize = ycoord - this._bottomOrigin;
  45. }
  46. return config;
  47. },
  48.  
  49. /**
  50. * Resizes and positions markers based on a mouse interaction.
  51. *
  52. * @method updateMarkerState
  53. * @param {String} type state of the marker
  54. * @param {Number} i index of the marker
  55. * @protected
  56. */
  57. updateMarkerState: function(type, i)
  58. {
  59. if(this._markers && this._markers[i])
  60. {
  61. var styles = Y.clone(this.get("styles").marker),
  62. markerStyles,
  63. state = this._getState(type),
  64. xcoords = this.get("xcoords"),
  65. ycoords = this.get("ycoords"),
  66. marker = this._markers[i],
  67. markers,
  68. seriesStyles,
  69. seriesCollection = this.get("seriesTypeCollection"),
  70. seriesLen = seriesCollection.length,
  71. seriesSize = 0,
  72. offset = 0,
  73. renderer,
  74. n = 0,
  75. xs = [],
  76. order = this.get("order"),
  77. config;
  78. markerStyles = state === "off" || !styles[state] ? Y.clone(styles) : Y.clone(styles[state]);
  79. markerStyles.fill.color = this._getItemColor(markerStyles.fill.color, i);
  80. markerStyles.border.color = this._getItemColor(markerStyles.border.color, i);
  81. config = this._getMarkerDimensions(xcoords[i], ycoords[i], styles.width, offset);
  82. markerStyles.height = config.calculatedSize;
  83. markerStyles.width = Math.min(this._maxSize, markerStyles.width);
  84. marker.set(markerStyles);
  85. for(; n < seriesLen; ++n)
  86. {
  87. xs[n] = xcoords[i] + seriesSize;
  88. seriesStyles = seriesCollection[n].get("styles").marker;
  89. seriesSize += Math.min(this._maxSize, seriesStyles.width);
  90. if(order > n)
  91. {
  92. offset = seriesSize;
  93. }
  94. offset -= seriesSize/2;
  95. }
  96. for(n = 0; n < seriesLen; ++n)
  97. {
  98. markers = seriesCollection[n].get("markers");
  99. if(markers)
  100. {
  101. renderer = markers[i];
  102. if(renderer && renderer !== undefined)
  103. {
  104. renderer.set("x", (xs[n] - seriesSize/2));
  105. }
  106. }
  107. }
  108. }
  109. }
  110. }, {
  111. ATTRS: {
  112. /**
  113. * Read-only attribute indicating the type of series.
  114. *
  115. * @attribute type
  116. * @type String
  117. * @readOnly
  118. * @default column
  119. */
  120. type: {
  121. value: "column"
  122. }
  123.  
  124. /**
  125. * Style properties used for drawing markers. This attribute is inherited from `MarkerSeries`. Below are the default values:
  126. * <dl>
  127. * <dt>fill</dt><dd>A hash containing the following values:
  128. * <dl>
  129. * <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color
  130. * will be retrieved from the below array:<br/>
  131. * `["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]`
  132. * </dd>
  133. * <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
  134. * </dl>
  135. * </dd>
  136. * <dt>border</dt><dd>A hash containing the following values:
  137. * <dl>
  138. * <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
  139. * will be retrieved from the below array:<br/>
  140. * `["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]`
  141. * <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
  142. * <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
  143. * </dl>
  144. * </dd>
  145. * <dt>width</dt><dd>indicates the width of the marker. The default value is 12.</dd>
  146. * <dt>over</dt><dd>hash containing styles for markers when highlighted by a `mouseover` event. The default
  147. * values for each style is null. When an over style is not set, the non-over value will be used. For example,
  148. * the default value for `marker.over.fill.color` is equivalent to `marker.fill.color`.</dd>
  149. * </dl>
  150. *
  151. * @attribute styles
  152. * @type Object
  153. */
  154. }
  155. });
  156.