chart-bar.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. /**
  2. * Bar charts
  3. */
  4. $.fn.sparkline.bar = bar = createClass($.fn.sparkline._base, barHighlightMixin, {
  5. type: 'bar',
  6. init: function (el, values, options, width, height) {
  7. var barWidth = parseInt(options.get('barWidth'), 10),
  8. barSpacing = parseInt(options.get('barSpacing'), 10),
  9. chartRangeMin = options.get('chartRangeMin'),
  10. chartRangeMax = options.get('chartRangeMax'),
  11. chartRangeClip = options.get('chartRangeClip'),
  12. stackMin = Infinity,
  13. stackMax = -Infinity,
  14. isStackString, groupMin, groupMax, stackRanges,
  15. numValues, i, vlen, range, zeroAxis, xaxisOffset, min, max, clipMin, clipMax,
  16. stacked, vlist, j, slen, svals, val, yoffset, yMaxCalc, canvasHeightEf;
  17. bar._super.init.call(this, el, values, options, width, height);
  18. // scan values to determine whether to stack bars
  19. for (i = 0, vlen = values.length; i < vlen; i++) {
  20. val = values[i];
  21. isStackString = typeof(val) === 'string' && val.indexOf(':') > -1;
  22. if (isStackString || $.isArray(val)) {
  23. stacked = true;
  24. if (isStackString) {
  25. val = values[i] = normalizeValues(val.split(':'));
  26. }
  27. val = remove(val, null); // min/max will treat null as zero
  28. groupMin = Math.min.apply(Math, val);
  29. groupMax = Math.max.apply(Math, val);
  30. if (groupMin < stackMin) {
  31. stackMin = groupMin;
  32. }
  33. if (groupMax > stackMax) {
  34. stackMax = groupMax;
  35. }
  36. }
  37. }
  38. this.stacked = stacked;
  39. this.regionShapes = {};
  40. this.barWidth = barWidth;
  41. this.barSpacing = barSpacing;
  42. this.totalBarWidth = barWidth + barSpacing;
  43. this.width = width = (values.length * barWidth) + ((values.length - 1) * barSpacing);
  44. this.initTarget();
  45. if (chartRangeClip) {
  46. clipMin = chartRangeMin === undefined ? -Infinity : chartRangeMin;
  47. clipMax = chartRangeMax === undefined ? Infinity : chartRangeMax;
  48. }
  49. numValues = [];
  50. stackRanges = stacked ? [] : numValues;
  51. var stackTotals = [];
  52. var stackRangesNeg = [];
  53. for (i = 0, vlen = values.length; i < vlen; i++) {
  54. if (stacked) {
  55. vlist = values[i];
  56. values[i] = svals = [];
  57. stackTotals[i] = 0;
  58. stackRanges[i] = stackRangesNeg[i] = 0;
  59. for (j = 0, slen = vlist.length; j < slen; j++) {
  60. val = svals[j] = chartRangeClip ? clipval(vlist[j], clipMin, clipMax) : vlist[j];
  61. if (val !== null) {
  62. if (val > 0) {
  63. stackTotals[i] += val;
  64. }
  65. if (stackMin < 0 && stackMax > 0) {
  66. if (val < 0) {
  67. stackRangesNeg[i] += Math.abs(val);
  68. } else {
  69. stackRanges[i] += val;
  70. }
  71. } else {
  72. stackRanges[i] += Math.abs(val - (val < 0 ? stackMax : stackMin));
  73. }
  74. numValues.push(val);
  75. }
  76. }
  77. } else {
  78. val = chartRangeClip ? clipval(values[i], clipMin, clipMax) : values[i];
  79. val = values[i] = normalizeValue(val);
  80. if (val !== null) {
  81. numValues.push(val);
  82. }
  83. }
  84. }
  85. this.max = max = Math.max.apply(Math, numValues);
  86. this.min = min = Math.min.apply(Math, numValues);
  87. this.stackMax = stackMax = stacked ? Math.max.apply(Math, stackTotals) : max;
  88. this.stackMin = stackMin = stacked ? Math.min.apply(Math, numValues) : min;
  89. if (options.get('chartRangeMin') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMin') < min)) {
  90. min = options.get('chartRangeMin');
  91. }
  92. if (options.get('chartRangeMax') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMax') > max)) {
  93. max = options.get('chartRangeMax');
  94. }
  95. this.zeroAxis = zeroAxis = options.get('zeroAxis', true);
  96. if (min <= 0 && max >= 0 && zeroAxis) {
  97. xaxisOffset = 0;
  98. } else if (zeroAxis == false) {
  99. xaxisOffset = min;
  100. } else if (min > 0) {
  101. xaxisOffset = min;
  102. } else {
  103. xaxisOffset = max;
  104. }
  105. this.xaxisOffset = xaxisOffset;
  106. range = stacked ? (Math.max.apply(Math, stackRanges) + Math.max.apply(Math, stackRangesNeg)) : max - min;
  107. // as we plot zero/min values a single pixel line, we add a pixel to all other
  108. // values - Reduce the effective canvas size to suit
  109. this.canvasHeightEf = (zeroAxis && min < 0) ? this.canvasHeight - 2 : this.canvasHeight - 1;
  110. if (min < xaxisOffset) {
  111. yMaxCalc = (stacked && max >= 0) ? stackMax : max;
  112. yoffset = (yMaxCalc - xaxisOffset) / range * this.canvasHeight;
  113. if (yoffset !== Math.ceil(yoffset)) {
  114. this.canvasHeightEf -= 2;
  115. yoffset = Math.ceil(yoffset);
  116. }
  117. } else {
  118. yoffset = this.canvasHeight;
  119. }
  120. this.yoffset = yoffset;
  121. if ($.isArray(options.get('colorMap'))) {
  122. this.colorMapByIndex = options.get('colorMap');
  123. this.colorMapByValue = null;
  124. } else {
  125. this.colorMapByIndex = null;
  126. this.colorMapByValue = options.get('colorMap');
  127. if (this.colorMapByValue && this.colorMapByValue.get === undefined) {
  128. this.colorMapByValue = new RangeMap(this.colorMapByValue);
  129. }
  130. }
  131. this.range = range;
  132. },
  133. getRegion: function (el, x, y) {
  134. var result = Math.floor(x / this.totalBarWidth);
  135. return (result < 0 || result >= this.values.length) ? undefined : result;
  136. },
  137. getCurrentRegionFields: function () {
  138. var currentRegion = this.currentRegion,
  139. values = ensureArray(this.values[currentRegion]),
  140. result = [],
  141. value, i;
  142. for (i = values.length; i--;) {
  143. value = values[i];
  144. result.push({
  145. isNull: value === null,
  146. value: value,
  147. color: this.calcColor(i, value, currentRegion),
  148. offset: currentRegion
  149. });
  150. }
  151. return result;
  152. },
  153. calcColor: function (stacknum, value, valuenum) {
  154. var colorMapByIndex = this.colorMapByIndex,
  155. colorMapByValue = this.colorMapByValue,
  156. options = this.options,
  157. color, newColor;
  158. if (this.stacked) {
  159. color = options.get('stackedBarColor');
  160. } else {
  161. color = (value < 0) ? options.get('negBarColor') : options.get('barColor');
  162. }
  163. if (value === 0 && options.get('zeroColor') !== undefined) {
  164. color = options.get('zeroColor');
  165. }
  166. if (colorMapByValue && (newColor = colorMapByValue.get(value))) {
  167. color = newColor;
  168. } else if (colorMapByIndex && colorMapByIndex.length > valuenum) {
  169. color = colorMapByIndex[valuenum];
  170. }
  171. return $.isArray(color) ? color[stacknum % color.length] : color;
  172. },
  173. /**
  174. * Render bar(s) for a region
  175. */
  176. renderRegion: function (valuenum, highlight) {
  177. var vals = this.values[valuenum],
  178. options = this.options,
  179. xaxisOffset = this.xaxisOffset,
  180. result = [],
  181. range = this.range,
  182. stacked = this.stacked,
  183. target = this.target,
  184. x = valuenum * this.totalBarWidth,
  185. canvasHeightEf = this.canvasHeightEf,
  186. yoffset = this.yoffset,
  187. y, height, color, isNull, yoffsetNeg, i, valcount, val, minPlotted, allMin;
  188. vals = $.isArray(vals) ? vals : [vals];
  189. valcount = vals.length;
  190. val = vals[0];
  191. isNull = all(null, vals);
  192. allMin = all(xaxisOffset, vals, true);
  193. if (isNull) {
  194. if (options.get('nullColor')) {
  195. color = highlight ? options.get('nullColor') : this.calcHighlightColor(options.get('nullColor'), options);
  196. y = (yoffset > 0) ? yoffset - 1 : yoffset;
  197. return target.drawRect(x, y, this.barWidth - 1, 0, color, color);
  198. } else {
  199. return undefined;
  200. }
  201. }
  202. yoffsetNeg = yoffset;
  203. for (i = 0; i < valcount; i++) {
  204. val = vals[i];
  205. if (stacked && val === xaxisOffset) {
  206. if (!allMin || minPlotted) {
  207. continue;
  208. }
  209. minPlotted = true;
  210. }
  211. if (range > 0) {
  212. height = Math.floor(canvasHeightEf * ((Math.abs(val - xaxisOffset) / range))) + 1;
  213. } else {
  214. height = 1;
  215. }
  216. if (val < xaxisOffset || (val === xaxisOffset && yoffset === 0)) {
  217. y = yoffsetNeg;
  218. yoffsetNeg += height;
  219. } else {
  220. y = yoffset - height;
  221. yoffset -= height;
  222. }
  223. color = this.calcColor(i, val, valuenum);
  224. if (highlight) {
  225. color = this.calcHighlightColor(color, options);
  226. }
  227. result.push(target.drawRect(x, y, this.barWidth - 1, height - 1, color, color));
  228. }
  229. if (result.length === 1) {
  230. return result[0];
  231. }
  232. return result;
  233. }
  234. });