API Docs for: 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. /**
  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 = this._copyObject(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. seriesCollection = this.get("seriesTypeCollection"),
  69. seriesLen = seriesCollection ? seriesCollection.length : 0,
  70. seriesStyles,
  71. seriesSize = 0,
  72. offset = 0,
  73. renderer,
  74. n = 0,
  75. ys = [],
  76. order = this.get("order"),
  77. config;
  78. markerStyles = state === "off" || !styles[state] ? styles : 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.height, offset);
  82. markerStyles.width = config.calculatedSize;
  83. markerStyles.height = Math.min(this._maxSize, markerStyles.height);
  84. marker.set(markerStyles);
  85. for(; n < seriesLen; ++n)
  86. {
  87. ys[n] = ycoords[i] + seriesSize;
  88. seriesStyles = seriesCollection[n].get("styles").marker;
  89. seriesSize += Math.min(this._maxSize, seriesStyles.height);
  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("y", (ys[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. * @default bar
  118. */
  119. type: {
  120. value: "bar"
  121. },
  122.  
  123. /**
  124. * Indicates the direction of the category axis that the bars are plotted against.
  125. *
  126. * @attribute direction
  127. * @type String
  128. */
  129. direction: {
  130. value: "vertical"
  131. }
  132.  
  133. /**
  134. * Style properties used for drawing markers. This attribute is inherited from `MarkerSeries`. Below are the default values:
  135. * <dl>
  136. * <dt>fill</dt><dd>A hash containing the following values:
  137. * <dl>
  138. * <dt>color</dt><dd>Color of the fill. 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. * `["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]`
  141. * </dd>
  142. * <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
  143. * </dl>
  144. * </dd>
  145. * <dt>border</dt><dd>A hash containing the following values:
  146. * <dl>
  147. * <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
  148. * will be retrieved from the below array:<br/>
  149. * `["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]`
  150. * <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
  151. * <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
  152. * </dl>
  153. * </dd>
  154. * <dt>height</dt><dd>indicates the width of the marker. The default value is 12.</dd>
  155. * <dt>over</dt><dd>hash containing styles for markers when highlighted by a `mouseover` event. The default
  156. * values for each style is null. When an over style is not set, the non-over value will be used. For example,
  157. * the default value for `marker.over.fill.color` is equivalent to `marker.fill.color`.</dd>
  158. * </dl>
  159. *
  160. * @attribute styles
  161. * @type Object
  162. */
  163. }
  164. });
  165.