stacked bar chart

Author: Yaron Naveh

README.md

@@ -56,7 +56,7 @@ You can use any of the default widgets of [blessed](https://github.com/chjj/bles
       }
    screen.append(line) //must append before setting data
    line.setData([data])
-   
+
    screen.key(['escape', 'q', 'C-c'], function(ch, key) {
      return process.exit(0);
    });
@@ -73,6 +73,8 @@ See below for a complete list of widgets.
 
 [Bar Chart](#bar-chart)
 
+[Stacked Bar Chart](#stacked-bar-chart)
+
 [Map](#map)
 
 [Gauge](#gauge)
@@ -142,6 +144,31 @@ See below for a complete list of widgets.
        , data: [5, 10]})
 `````
 
+### Stacked Bar Chart
+
+<img src="./docs/images/stacked-bar.png" alt="stacked-bar" width="250">
+
+`````javascript
+    bar = contrib.stackedBar(
+       { label: 'Server Utilization (%)'
+       , barWidth: 4
+       , barSpacing: 6
+       , xOffset: 0
+       //, maxValue: 15
+       , height: "40%"
+       , width: "50%"
+       , barBgColor: [ 'red', 'blue', 'green' ]})
+    screen.append(bar)
+    bar.setData(
+       { barCategory: ['Q1', 'Q2', 'Q3', 'Q4']
+       , stackedCategory: ['US', 'EU', 'AP']
+       , data:
+          [ [ 7, 7, 5]
+          , [8, 2, 0]
+          , [0, 0, 0]
+          , [2, 3, 2] ]
+       })
+`````
 
 ### Map
 
@@ -231,7 +258,7 @@ Updating the donut is as easy as passing in an array to `setData` using the same
 
 	lcd.setDisplay(23 + 'G'); // will display "23G"
 	lcd.setOptions({}) // adjust options at runtime
-   
+
 `````
 
 Please see the **examples/lcd.js** for an example. The example provides keybindings to adjust the `segmentWidth` and `segmentInterval` and `strokeWidth` in real-time so that you can see how they manipulate the look and feel.
@@ -391,7 +418,7 @@ Every node is a hash and it can have custom properties that can be used in "sele
   * No effect when the node have no child
   * Default value for each node will be `treeInstance.options.extended` if the node `extended` option is not set
   * *Example* : <code>{'Fruit':{ name: 'Fruit', extended: true, children:{ 'Banana': {}, 'Cherry': {}}}}</code>
-     
+
 ### Markdown
 
 <img src="./docs/images/markdown.png" alt="table">

docs/images/stacked-bar.png

@@ -0,0 +1,26 @@
+var blessed = require('blessed')
+  , contrib = require('../')
+  , screen = blessed.screen()
+  , bar = contrib.stackedBar(
+       { label: 'Server Utilization (%)'
+       , barWidth: 4
+       , barSpacing: 6
+       , xOffset: 0
+       //, maxValue: 15
+       , height: "40%"
+       , width: "50%"
+       , barBgColor: [ 'red', 'blue', 'green' ]})
+
+screen.append(bar)
+
+bar.setData(
+       { barCategory: ['Q1', 'Q2', 'Q3', 'Q4']
+       , stackedCategory: ['US', 'EU', 'AP']
+       , data:
+          [ [ 7, 7, 5]
+          , [8, 2, 0]
+          , [0, 0, 0]
+          , [2, 3, 2] ]
+       })
+
+screen.render()

examples/stacked-bar.js

@@ -18,6 +18,7 @@ exports.tree = require('./lib/widget/tree.js')
 exports.markdown = require('./lib/widget/markdown.js')
 
 exports.bar = require('./lib/widget/charts/bar')
+exports.stackedBar = require('./lib/widget/charts/stacked-bar')
 exports.line = require('./lib/widget/charts/line')
 
 exports.OutputBuffer = require('./lib/server-utils').OutputBuffer

index.js

@@ -1,5 +1,5 @@
 /*
-* Recursively merge properties of two objects 
+* Recursively merge properties of two objects
 */
 function MergeRecursive(obj1, obj2) {
 
@@ -33,5 +33,36 @@ function getTypeName(thing){
     return Object.prototype.toString.call(thing);
 }
 
+function abbreviateNumber(value) {
+    var newValue = value;
+    if (value >= 1000) {
+        var suffixes = ["", "k", "m", "b","t"];
+        var suffixNum = Math.floor( (""+value).length/3 );
+        var shortValue = '';
+        for (var precision = 2; precision >= 1; precision--) {
+            shortValue = parseFloat( (suffixNum != 0 ? (value / Math.pow(1000,suffixNum) ) : value).toPrecision(precision));
+            var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g,'');
+            if (dotLessShortValue.length <= 2) { break; }
+        }
+        if (shortValue % 1 != 0)  shortNum = shortValue.toFixed(1);
+            newValue = shortValue+suffixes[suffixNum];
+        }
+    return newValue;
+}
+
+function getColorCode(color) {
+    if (Array.isArray(color) && color.length == 3)
+    {
+        return x256(color[0],color[1],color[2]);
+    }
+    else
+    {
+      return color;
+    }
+}
+
 exports.MergeRecursive = MergeRecursive
 exports.getTypeName = getTypeName
+exports.abbreviateNumber = abbreviateNumber
+exports.getColorCode = getColorCode
+

lib/utils.js

@@ -5,17 +5,6 @@ var blessed = require('blessed')
    , x256 = require('x256')
    , _ = require('lodash')
 
-function getColorCode(color) {
-    if (Array.isArray(color) && color.length == 3)
-    {
-        return x256(color[0],color[1],color[2]);
-    }
-    else
-    {
-      return color;
-    }
-}
-
 function Line(options) {
 
   var self = this
@@ -90,7 +79,7 @@ Line.prototype.setData = function(data) {
       var maxChars = legendWidth-2
       for (var i=0; i<data.length; i++) {
         var style = data[i].style || {}
-        var color = getColorCode(style.line || self.options.style.line)
+        var color = utils.getColorCode(style.line || self.options.style.line)
         legandText += '{'+color+'-fg}'+ data[i].title.substring(0, maxChars)+'{/'+color+'-fg}\r\n'
       }
       self.legend.setContent(legandText)
@@ -130,27 +119,10 @@ Line.prototype.setData = function(data) {
       return max;
     }
 
-    function abbreviateNumber(value) {
-        var newValue = value;
-        if (value >= 1000) {
-            var suffixes = ["", "k", "m", "b","t"];
-            var suffixNum = Math.floor( (""+value).length/3 );
-            var shortValue = '';
-            for (var precision = 2; precision >= 1; precision--) {
-                shortValue = parseFloat( (suffixNum != 0 ? (value / Math.pow(1000,suffixNum) ) : value).toPrecision(precision));
-                var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g,'');
-                if (dotLessShortValue.length <= 2) { break; }
-            }
-            if (shortValue % 1 != 0)  shortNum = shortValue.toFixed(1);
-            newValue = shortValue+suffixes[suffixNum];
-        }
-        return newValue;
-    }
-
     function formatYLabel(value, max, min, numLabels, wholeNumbersOnly, abbreviate) {
       var fixed = (max/numLabels<1 && value!=0 && !wholeNumbersOnly) ? 2 : 0
       var res = value.toFixed(fixed)
-      return abbreviate?abbreviateNumber(res):res
+      return abbreviate?utils.abbreviateNumber(res):res
     }
 
     function getMaxXLabelPadding(numLabels, wholeNumbersOnly, abbreviate, min) {