Added percentage stacking mode to histogram

common/lib/panels/jquery.flot.stack.js

@@ -186,3 +186,131 @@ charts or filled areas).
         version: '1.2'
     });
 })(jQuery);
+
+(function ($) {
+    var options = {
+        series: {
+            stackpercent: null
+        } // or number/string
+    };
+
+    function init(plot) {
+
+        // will be built up dynamically as a hash from x-value, or y-value if horizontal
+        var stackBases = {};
+        var processed = false;
+        var stackSums = {};
+
+        //set percentage for stacked chart
+        function processRawData(plot, series, data, datapoints) {
+            console.log(plot)
+            if (!processed) {
+                processed = true;
+                stackSums = getStackSums(plot.getData());
+            }
+            if (series.stackpercent == true) {
+                var num = data.length;
+                series.percents = [];
+                var key_idx = 0;
+                var value_idx = 1;
+                if (series.bars && series.bars.horizontal && series.bars.horizontal === true) {
+                    key_idx = 1;
+                    value_idx = 0;
+                }
+                for (var j = 0; j < num; j++) {
+                    var sum = stackSums[data[j][key_idx] + ""];
+                    if (sum > 0) {
+                        series.percents.push(data[j][value_idx] * 100 / sum);
+                    } else {
+                        series.percents.push(0);
+                    }
+                }
+            }
+        }
+
+        //calculate summary
+        function getStackSums(_data) {
+            var data_len = _data.length;
+            var sums = {};
+            if (data_len > 0) {
+                //caculate summary
+                for (var i = 0; i < data_len; i++) {
+                    if (_data[i].stackpercent) {
+                        var key_idx = 0;
+                        var value_idx = 1;
+                        if (_data[i].bars && _data[i].bars.horizontal && _data[i].bars.horizontal === true) {
+                            key_idx = 1;
+                            value_idx = 0;
+                        }
+                        var num = _data[i].data.length;
+                        for (var j = 0; j < num; j++) {
+                            var value = 0;
+                            if (_data[i].data[j][1] != null) {
+                                value = _data[i].data[j][value_idx];
+                            }
+                            if (sums[_data[i].data[j][key_idx] + ""]) {
+                                sums[_data[i].data[j][key_idx] + ""] += value;
+                            } else {
+                                sums[_data[i].data[j][key_idx] + ""] = value;
+                            }
+
+                        }
+                    }
+                }
+            }
+            return sums;
+        }
+
+        function stackData(plot, s, datapoints) {
+            if (!s.stackpercent) return;
+            if (!processed) {
+                stackSums = getStackSums(plot.getData());
+            }
+            var newPoints = [];
+            
+            
+            var key_idx = 0;
+            var value_idx = 1;
+            if (s.bars && s.bars.horizontal && s.bars.horizontal === true) {
+                key_idx = 1;
+                value_idx = 0;
+            }
+
+            for (var i = 0; i < datapoints.points.length; i += 3) {
+                // note that the values need to be turned into absolute y-values.
+                // in other words, if you were to stack (x, y1), (x, y2), and (x, y3),
+                // (each from different series, which is where stackBases comes in),
+                // you'd want the new points to be (x, y1, 0), (x, y1+y2, y1), (x, y1+y2+y3, y1+y2)
+                // generally, (x, thisValue + (base up to this point), + (base up to this point))
+                if (!stackBases[datapoints.points[i + key_idx]]) {
+                    stackBases[datapoints.points[i + key_idx]] = 0;
+                }
+                newPoints[i + key_idx] = datapoints.points[i + key_idx];
+                newPoints[i + value_idx] = datapoints.points[i + value_idx] + stackBases[datapoints.points[i + key_idx]];
+                newPoints[i + 2] = stackBases[datapoints.points[i + key_idx]];
+                stackBases[datapoints.points[i + key_idx]] += datapoints.points[i + value_idx];
+                // change points to percentage values
+                // you may need to set yaxis:{ max = 100 }
+                if ( stackSums[newPoints[i+key_idx]+""] > 0 ){
+                    newPoints[i + value_idx] = newPoints[i + value_idx] * 100 / stackSums[newPoints[i + key_idx] + ""];
+                    newPoints[i + 2] = newPoints[i + 2] * 100 / stackSums[newPoints[i + key_idx] + ""];
+                } else {
+                    newPoints[i + value_idx] = 0;
+                    newPoints[i + 2] = 0;
+                }
+            }
+
+            datapoints.points = newPoints;
+        }
+
+        plot.hooks.processRawData.push(processRawData);
+        plot.hooks.processDatapoints.push(stackData);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'stackpercent',
+        version: '0.1'
+    });
+})(jQuery);

panels/histogram/editor.html

@@ -52,6 +52,7 @@
     <div class="span1"> <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
     <div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
     <div class="span1"> <label class="small">Stack</label><input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
+    <div class="span1" ng-show="panel.stack"> <label class="small" bs-tooltip="'Stack as a percentage of total'">Percent</label><input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage"></div>
     <div class="span1"> <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
     <div class="span1"> <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
     <div class="span1"> <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>

panels/histogram/module.js

@@ -64,6 +64,7 @@ angular.module('kibana.histogram', [])
     legend      : true,
     'x-axis'    : true,
     'y-axis'    : true,
+    percentage  : false
   }
   _.defaults($scope.panel,_d)
 
@@ -290,7 +291,8 @@ angular.module('kibana.histogram', [])
             scope.plot = $.plot(elem, scope.data, {
               legend: { show: false },
               series: {
-                stack:  stack,
+                stackpercent: scope.panel.stack ? scope.panel.percentage : false,
+                stack: scope.panel.percentage ? null : stack,
                 lines:  { 
                   show: scope.panel.lines, 
                   fill: scope.panel.fill/10, 
@@ -301,7 +303,12 @@ angular.module('kibana.histogram', [])
                 points: { show: scope.panel.points, fill: 1, fillColor: false, radius: 5},
                 shadowSize: 1
               },
-              yaxis: { show: scope.panel['y-axis'], min: 0, color: "#c8c8c8" },
+              yaxis: { 
+                show: scope.panel['y-axis'], 
+                min: 0, 
+                max: scope.panel.percentage && scope.panel.stack ? 100 : null, 
+                color: "#c8c8c8" 
+              },
               xaxis: {
                 timezone: scope.panel.timezone,
                 show: scope.panel['x-axis'],
@@ -367,7 +374,8 @@ angular.module('kibana.histogram', [])
       elem.bind("plothover", function (event, pos, item) {
         if (item) {
           tt(pos.pageX, pos.pageY,
-            "<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:15px;width:15px;border-radius:10px;'></div> "+
+            "<div style='vertical-align:middle;display:inline-block;background:"+
+            item.series.color+";height:15px;width:15px;border-radius:10px;'></div> "+
             item.datapoint[1].toFixed(0) + " @ " + 
             moment(item.datapoint[0]).format('MM/DD HH:mm:ss'));
         } else {