jquery.flot.stack.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. /*
  2. Flot plugin for stacking data sets, i.e. putting them on top of each
  3. other, for accumulative graphs.
  4. The plugin assumes the data is sorted on x (or y if stacking
  5. horizontally). For line charts, it is assumed that if a line has an
  6. undefined gap (from a null point), then the line above it should have
  7. the same gap - insert zeros instead of "null" if you want another
  8. behaviour. This also holds for the start and end of the chart. Note
  9. that stacking a mix of positive and negative values in most instances
  10. doesn't make sense (so it looks weird).
  11. Two or more series are stacked when their "stack" attribute is set to
  12. the same key (which can be any number or string or just "true"). To
  13. specify the default stack, you can set
  14. series: {
  15. stack: null or true or key (number/string)
  16. }
  17. or specify it for a specific series
  18. $.plot($("#placeholder"), [{ data: [ ... ], stack: true }])
  19. The stacking order is determined by the order of the data series in
  20. the array (later series end up on top of the previous).
  21. Internally, the plugin modifies the datapoints in each series, adding
  22. an offset to the y value. For line series, extra data points are
  23. inserted through interpolation. If there's a second y value, it's also
  24. adjusted (e.g for bar charts or filled areas).
  25. */
  26. (function ($) {
  27. var options = {
  28. series: { stack: null } // or number/string
  29. };
  30. function init(plot) {
  31. function findMatchingSeries(s, allseries) {
  32. var res = null
  33. for (var i = 0; i < allseries.length; ++i) {
  34. if (s == allseries[i])
  35. break;
  36. if (allseries[i].stack == s.stack)
  37. res = allseries[i];
  38. }
  39. return res;
  40. }
  41. function stackData(plot, s, datapoints) {
  42. if (s.stack == null)
  43. return;
  44. var other = findMatchingSeries(s, plot.getData());
  45. if (!other)
  46. return;
  47. var ps = datapoints.pointsize,
  48. points = datapoints.points,
  49. otherps = other.datapoints.pointsize,
  50. otherpoints = other.datapoints.points,
  51. newpoints = [],
  52. px, py, intery, qx, qy, bottom,
  53. withlines = s.lines.show,
  54. horizontal = s.bars.horizontal,
  55. withbottom = ps > 2 && (horizontal ? datapoints.format[2].x : datapoints.format[2].y),
  56. withsteps = withlines && s.lines.steps,
  57. fromgap = true,
  58. keyOffset = horizontal ? 1 : 0,
  59. accumulateOffset = horizontal ? 0 : 1,
  60. i = 0, j = 0, l;
  61. while (true) {
  62. if (i >= points.length)
  63. break;
  64. l = newpoints.length;
  65. if (points[i] == null) {
  66. // copy gaps
  67. for (m = 0; m < ps; ++m)
  68. newpoints.push(points[i + m]);
  69. i += ps;
  70. }
  71. else if (j >= otherpoints.length) {
  72. // for lines, we can't use the rest of the points
  73. if (!withlines) {
  74. for (m = 0; m < ps; ++m)
  75. newpoints.push(points[i + m]);
  76. }
  77. i += ps;
  78. }
  79. else if (otherpoints[j] == null) {
  80. // oops, got a gap
  81. for (m = 0; m < ps; ++m)
  82. newpoints.push(null);
  83. fromgap = true;
  84. j += otherps;
  85. }
  86. else {
  87. // cases where we actually got two points
  88. px = points[i + keyOffset];
  89. py = points[i + accumulateOffset];
  90. qx = otherpoints[j + keyOffset];
  91. qy = otherpoints[j + accumulateOffset];
  92. bottom = 0;
  93. if (px == qx) {
  94. for (m = 0; m < ps; ++m)
  95. newpoints.push(points[i + m]);
  96. newpoints[l + accumulateOffset] += qy;
  97. bottom = qy;
  98. i += ps;
  99. j += otherps;
  100. }
  101. else if (px > qx) {
  102. // we got past point below, might need to
  103. // insert interpolated extra point
  104. if (withlines && i > 0 && points[i - ps] != null) {
  105. intery = py + (points[i - ps + accumulateOffset] - py) * (qx - px) / (points[i - ps + keyOffset] - px);
  106. newpoints.push(qx);
  107. newpoints.push(intery + qy);
  108. for (m = 2; m < ps; ++m)
  109. newpoints.push(points[i + m]);
  110. bottom = qy;
  111. }
  112. j += otherps;
  113. }
  114. else { // px < qx
  115. if (fromgap && withlines) {
  116. // if we come from a gap, we just skip this point
  117. i += ps;
  118. continue;
  119. }
  120. for (m = 0; m < ps; ++m)
  121. newpoints.push(points[i + m]);
  122. // we might be able to interpolate a point below,
  123. // this can give us a better y
  124. if (withlines && j > 0 && otherpoints[j - otherps] != null)
  125. bottom = qy + (otherpoints[j - otherps + accumulateOffset] - qy) * (px - qx) / (otherpoints[j - otherps + keyOffset] - qx);
  126. newpoints[l + accumulateOffset] += bottom;
  127. i += ps;
  128. }
  129. fromgap = false;
  130. if (l != newpoints.length && withbottom)
  131. newpoints[l + 2] += bottom;
  132. }
  133. // maintain the line steps invariant
  134. if (withsteps && l != newpoints.length && l > 0
  135. && newpoints[l] != null
  136. && newpoints[l] != newpoints[l - ps]
  137. && newpoints[l + 1] != newpoints[l - ps + 1]) {
  138. for (m = 0; m < ps; ++m)
  139. newpoints[l + ps + m] = newpoints[l + m];
  140. newpoints[l + 1] = newpoints[l - ps + 1];
  141. }
  142. }
  143. datapoints.points = newpoints;
  144. }
  145. plot.hooks.processDatapoints.push(stackData);
  146. }
  147. $.plot.plugins.push({
  148. init: init,
  149. options: options,
  150. name: 'stack',
  151. version: '1.2'
  152. });
  153. })(jQuery);