Version 3.18.1
Show:

File: charts/js/BarSeries.js

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